menu gebaseerd op <ul></ul>,anders in FF dan in IE

[Verwijderd]

hej beste tweakers, ik ben nu al een tijdje aan een website bezig maar krijg iets kleins niet
gelijk in FF en IE.

het gaat over deze site
kijk eens goed naar het verschil van de menu in FF en IE, dan zul je zien dat de "borders" precies wegvallen in FF en niet in IE. Het zijn eigenlijk geen borders, het is de hoogte van de <a> die kleiner gemaakt wordt tov de achtergrond die blauw is. Het zelfde geldt voor de hover-state.
om de link van de hudige pagina niet clickable te maken maak ik hiervoor gebruik van een span>

---

de css ziet er als volgt uit:

Cascading Stylesheet:

/*MENU*/

#menu {
    width:900px;
    height:35px;
    border-top-style:solid;
    border-top-color:#FFFFFF;
    border-top-width:2px;
    background-color:#7ebde8;
}
#menu li {
    list-style-type:none;
    display:block;
    float:left;
    height:33px;
    width:150px;
    margin-top:2px;
}
#menu li span {
    color:#7EBDE8;
    background-color:#FFFFFF;
    line-height:31px;
    text-align:center;
    font-size:2em;
    text-decoration:none;
    width:150px;
    height:31px;
    display:block;
}
#menu li a {
    line-height:31px;
    text-align:center;
    font-size:2em;
    text-decoration:none;
    color:#FFFFFF;
    background-color:#7EBDE8;
    width:150px;
    height:31px;
    display:block;
}
#menu li a:hover {
    color:#7EBDE8;
    width:146px;
    background-color:#FFFFFF;
    border-style:solid;
    border-color:#7EBDE8;
    border-width:2px;
    border-top:none;
    border-bottom:none;
}

iemand een idee hoe ik dit vervelende schoonheidsfoutje kan oplossen?

alvast bedankt

[ Voor 58% gewijzigd door een moderator op 05-01-2008 18:57 . Reden: Code tags toegevoegd ]

[fleppuhstein]

Lijkt me padding van je Div ? Maar wat heb je zelf al geprobeerd om op te lossen ? Welke stukken code zou het om gaan ? Zie ook WEB Policy voor wat meer tips.

[remcotolsma]

Het schoonheidsfoutjes wordt denk ik veroorzaakt doordat je bepaalde elementen float en andere weer niet. Meer over het floaten van elementen kun je hier vinden:
http://www.w3.org/TR/CSS21/visuren.html#float-rules

Waarschijnlijk is je probleem opgelost door het menu ook te floaten.

Cascading Stylesheet:

#menu {
  float: left;

  ..
}

P.S. De CSS van het menu kan minstens 2x zo kort.

[Verwijderd]

idd, mijn probleem is opgelost door de menu ook te floaten, alleen snap ik echt niet hoe ik dit een invloed hierop kan hebben, en vooral waarom het wel luistert naar de CSS in IE en niet in FF.
ik ken wel het probleem van de browser-comptabiliteit, maar dit is toch wel heel raar!

kan zijn dat de css korter kan, maar ik ben nog maar een beginner
ik volg nu +- 4 maanden mct en deze site is ongeveer het resultaat van mijn kunnen tot nu toe :d

merci é