HTML+CSS Rollover menu niet goed in IE WEL in Firefox

[Cidious]

Ik ben even bezig een site van een kennisje aan te passen.. was nog allemaal HTML en dat wil ik gewoon even wat vereenvoudigen met een Stylesheet..

Nu loop ik even vast op het menu.. het gaat om een image rollover menu.. en in firefox werkt alles naar behoren maar in IE krijg ik em maar niet op z'n plek..

Firefox:


IE7:



En dit is het stukje CSS code dat erbij hoort..

<sup>#list-menu {
width: 177px;
}

#list-menu ul {
background:url(images/nav_bg.jpg) 0 0 no-repeat;
width:177px;
height:29px;
position:relative;
left:0px;
top:0px;
padding:0 0 240px 0;
list-style-type: none;
}

#list-menu ul li{
background:url(images/menu_bg.gif) right top no-repeat;
height:27px;
padding:0 0 0 0;
}

#list-menu ul li a{
display:block;
background:url(images/menu_bg.jpg) 0 0 repeat-y;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
color:#ffffff;
background-color:inherit;
text-decoration:none;

}

#list-menu ul li a:hover{
background:url(images/menu_bg_ro.jpg) 0 0 repeat-y;
color:#fff;
background-color:inherit;
}

#header ul li a.hover{
display:block;
background:url(images/menu_bg_ro.jpg) 0 0 repeat-y;
color:#fff;
padding:0 14px;
font:bold 11px/27px Arial, Helvetica, sans-serif;
background-color:inherit;
text-decoration:none;
cursor:text;
}</sup>

iemand enig idee wat ik fout doe?

[Knaak]

Heeft het content veld wel een vaste breedte? Want daar zit ook duidelijk verschil in.

[alex3305]

De code is heel onduidelijk en ik kan er weinig mee. Kun je geen volledige HTML/CSS geven? En overigens alles in nette code tags zetten de volgende keer.

Daarnaast zie ik nergens dat je margin's hebt aangegeven. Misschien behandelt IE ze anders dan Fx. Haal de site anders ook eens door de validator heen, want dit heb ik bijvoorbeeld nog nooit gezien:

Cascading Stylesheet:

font:bold 11px/27px Arial, Helvetica, sans-serif;

Die font-grootte met slashes.

[DiSiLLUSiON]

alex3305 schreef op donderdag 15 mei 2008 @ 02:23:
De code is heel onduidelijk en ik kan er weinig mee. Kun je geen volledige HTML/CSS geven? En overigens alles in nette code tags zetten de volgende keer.

Daarnaast zie ik nergens dat je margin's hebt aangegeven. Misschien behandelt IE ze anders dan Fx. Haal de site anders ook eens door de validator heen, want dit heb ik bijvoorbeeld nog nooit gezien:

Cascading Stylesheet:

font:bold 11px/27px Arial, Helvetica, sans-serif;

Die font-grootte met slashes.

Die slash is simpelweg font-size/line-height.

[Cascade]

Heb je al met de margins van de ul en li gespeeld? Zet die eens op 0.

[_Thanatos_]

In het blokje CSS wat je gepost hebt, zie ik geen CSS-reset, wat voor een semantische html vaak nodig is, zo ook met een <ul> menu. Zoiets dus:

Cascading Stylesheet:

html,body,table,ul,ol,dl,div,form,fieldset { margin: 0; padding: 0; border: 0 }

Kan een hoop gezeik schelen.

[Sebazzz]

Kan je dan niet beter * {margin: 0; padding: 0; border: 0;} doen?

@Fuzzinogwat: Lekker onderbouwd.

[ Voor 21% gewijzigd door Sebazzz op 18-05-2008 13:17 ]

[Fuzzillogic]

Sebazzz schreef op zondag 18 mei 2008 @ 13:09:
Kan je dan niet beter * {margin: 0; padding: 0; border: 0;} doen?

Nee. Bah.

[_Thanatos_]

Onderbouwing: zo heb je niet zelf de controle welke elementen een margin:0 krijgen. Zou je SVG in je pagina opnemen, dan geldt het daar ook voor. Resultaat: onbedoeld afbeeldingen vernaggelen. Het is ook gewoon netter om precies aan te geven welke elementen je bedoelt te resetten. Leest wat makkelijker terug; voor je zelf en je opvolger.
_{Ohja, en * werkt niet in IE6}

[ Voor 6% gewijzigd door _Thanatos_ op 18-05-2008 13:25 ]

[Cidious]

THNX voor jullie support door met wat tips van jullie aan de gang te zijn gegaan heb ik alles netjes op z'n plek gekregen.. wel loop ik weer tegen allerlei nieuwe problemen aan.. MET IE .

Ik hoop zo dat M$ IE8 een beetje meer webdesigner vriendelijk gaat maken.. want het is altijd IE dat loopt te hikken.. en dingen misvormd..

[DiSiLLUSiON]

Nou nou, van 'M$' heb ik nog nooit gehoord, maar ik neem aan dat je gewoon 'Microsoft' bedoelt?

Internet Explorer is helaas een stuk minder vriendelijk naar de webdeveloper toe dan browsers die zich meer aan de standaarden houden. Het is aan jou natuurlijk om de afweging te maken of de doelgroep / complexiteit van de site het rendabel maakt om daarnaast ook IE te ondersteunen of niet.

[ikbenmelle]

#list-menu ul { }

Met ook nog margin:0; erin? Dat zal denk ik wel helpen. Om alle settings van de ul en ul li naar nul te krijgen moet je ze allebei zo zetten:

---

ul {
margin:0;
padding:0;
}

ul li {
margin:0;
padding:0;
}

---

Ik ken een soortgelijk probleem, misschien helpt dit. Succes.