IE vs. FF menu

[Verwijderd]

Hallo,

Ik heb voor een website een topmenu, die er in IE goed uitziet, maar in FF niet... Ik heb al gezocht en gezocht, maar kan het niet goed krijgen.

Het menu ziet er zo uit:



De broncode is (voor de CSS):

Cascading Stylesheet:

<style type="text/css">
.indentmenu{
font: bold 13px Arial;
width: 740px; /*leave this value as is in most cases*/
text-align: center;
}
.indentmenu ul{
margin: 0;
padding: 0;
width: 100%; /*width of menu*/
border: 1px solid #000000; /*dark purple border*/
border-width: 1px 0;
background: black url(assets/menu/indentbg.jpg) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
color: black; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #000000; /*dark purple divider between menu items*/
border-left: 1px solid #000000; /*dark purple divider between menu items*/
background: black url(assets/menu/indentbg.jpg) center center repeat-x;
}
.indentmenu ul li a:visited{
color: black;
border-right: 1px solid #000000; /*dark purple divider between menu items*/
border-left: 1px solid #000000; /*dark purple divider between menu items*/
}
.indentmenu ul li a:hover, .indentmenu ul li .current{
color: black !important; /*text color of selected and active item*/
padding: 5px 11px;
background: black url(assets/menu/indentbg2.jpg) center center repeat-x;
}
</style>

en ik roep het menu aan met:

HTML:

<div class="indentmenu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style">Menu 1</a></li>
<li><a href="http://www.dynamicdrive.com/forums">Menu 2</a></li>
<li><a href="http://tools.dynamicdrive.com">Menu 3</a></li>
<li><a href="http://www.javascriptkit.com">Menu 4</a></li>
<li><a href="http://www.cssdrive.com">Menu 5</a></li>
<li><a href="http://www.cssdrive.com">Contact</a></li>
</ul>
<br style="clear: left" />
</div>

[BtM909]

Dat is dus niet helemaal de bedoeling van dit subforum

1. Zet je code tussen [code=js][/] of [code=html][/] tags

2. Geef zelf aan wat je hebt geprobeerd en waarom het niet werkt

3. Isoleer je probleem. Alles maar neerzetten geeft de indruk dat je van ons verwacht dat wij je probleem oplossen.

Probeer het met bovenstaande tips maar nog een keer. Lees voor de zekerheid de lokale policies nog een keer door

[Bio]

Je geeft in iedergeval nergens hoogtes aan in je CSS. Daar zou ik eens mee beginnen.

[Verwijderd]

Als ik hoogte ingeef, bijvoorbeeld height: 20px; dan reageert IE hier wel op en deze past de grote goed toe, maar FF is nog steeds een beetje aan het f*cken met de layout...

De menubalk wordt wel hoger/lager, maar de menu items blijven gelijke groot, ook als ik daar height aan toevoeg. De menuitems blijven tevens bovenaan "hangen", dus waarschijnlijk moet er meer aangepast worden?

[Heikanu]

Het probleem zit bij de padding en margin Hierover is genoeg op internet te vinden!
En trouwens, dit ziet er wel heel erg uit als een bestaand script (deze)...

[Verwijderd]

Hallo,

Het gaat me niet lukken. Ik wist dat het te maken had met padding en marges, maar ik kan de juiste combinatie voor IE én FF niet krijgen.. Het is inderdaad een bestaand script, hoewel het niet het script is waar je naar verwees...

Iemand anders nog iedeeen of tips hoe en wat ik aan moet passen?

[Heikanu]

BtM909 schreef op maandag 21 april 2008 @ 10:37:
2. Geef zelf aan wat je hebt geprobeerd en waarom het niet werkt

3. Isoleer je probleem. Alles maar neerzetten geeft de indruk dat je van ons verwacht dat wij je probleem oplossen.

Volgens mij geld dit nog steeds, en eigenlijk dus alweer!

[Pkunk]

Ik heb even snel je menutje nagbouwd zonder al te veel fratsen. Zo ziet het er iig netjes uit in ff en ie. Volgens mij moet je hier goed op kunnen verder bouwen:

Cascading Stylesheet:

.indentmenu{
    font: bold 13px Arial;
    width: 740px; /*leave this value as is in most cases*/
    text-align: center;
}
.indentmenu ul{
    list-style-type:none;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}
.indentmenu ul li{
    display:inline;
}
.indentmenu ul li a{
    text-decoration: none;
    border-left: solid 1px black;
    border-right: solid 1px black;
    padding: 0px 5px;
}
.indentmenu ul li a:visited{
}
.indentmenu ul li a:hover, .indentmenu ul li .current{
}

//edit: oh volgens mij is het enige verschil dat ik geen vertical padding op m'n a heb Haal die anders gewoon ff weg. Dat hoort namelijk niet op inline elementen.

[ Voor 10% gewijzigd door Pkunk op 21-04-2008 13:14 ]

[Verwijderd]

Je bent mijn held!! Het werk en ziet er zowel in FF als IE super uit! Ik ben tevreden!!

[BtM909]

Ik hoop dat je leert van de code en niet verwacht dat men je problemen oplost. Denk daar voortaan even aan! Heb dit topic opengehouden in de hoop dat je er wat van leert

[Sebazzz]

En voortaan, als je dit al niet doet: Ontwikkelen voor Firefox, dan draait het ook goed in Opera, Safari, Konqueror, go on... en daarna pas rare fratsen uithalen voor IE.
Het duurt veel langer om iets dat voor IE ontworpen is aan te passen zodat Firefox en de rest het slikt dan andersom.