[CSS] menu

[Tjeemp]

Ik ben bezig met een website voor een klant, nu ben ik aangekomen bij het menu, in IE ziet dit er prima uit, maar als ik in Firefox de padding-top van het LI element aanpas komt er een wit gat tussen de items te zitten...

Cascading Stylesheet:

ul#menu
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}

ul#menu li
{
font-size: 11px;
font-weight: bold;
background: url(images/menu_item.gif) no-repeat;
color: #3b4c6a;
width: 174px;
height: 23px;
padding: 4px 0 0 16px;
margin: 0 0 0 0;
list-style-type: none;
}

www.timovanderzanden.nl/projects/westhoek/
hier de pagina...

ik kan gewoon niet uitvogelen waar het probleem vandaan komt...

[ Voor 5% gewijzigd door Tjeemp op 12-02-2007 22:25 ]

[BasieP]

offtopic:
ik zie eerlijk gezegt eerder een probleem in IE... (je kleur etc. werkt niet)
ow en mag ik opmerken dat wit een (imo) slecht gekozen hover kleur is?

maareuh ontopic:

je hebt een padding van 4px hoog, je hebt 23px height, maakt 27px
als ik het menu bekijk is elk item bij mij 27px hoog in Firefox..

volgens mij maakt IE dus (weer) de fout.
Ik gok dat IE anders met paddings omgaat.

simpele oplossing: haal padding weg (die 4px iig) en maak het element gewoon 23 of 27px hoog (whatever je wilt)

[ Voor 30% gewijzigd door BasieP op 12-02-2007 22:32 ]

[Tjeemp]

maar ik heb die padding nodig om de tekst in het midden van het element te zetten...

of is er een andere manier waarop dit ook lukt zonder dat de padding die white space veroorzaakt...

en wat bedoel je met "je kleur etc. werkt niet"... neem verbeterpuntjes serieus...

[ Voor 18% gewijzigd door Tjeemp op 12-02-2007 22:41 ]

[BasieP]

Tjeemp schreef op maandag 12 februari 2007 @ 22:39:
maar ik heb die padding nodig om de tekst in het midden van het element te zetten...

of is er een andere manier waarop dit ook lukt zonder dat de padding die white space veroorzaakt...

je hebt een witte achtergrond.. mis ik iets of maakt het dan geen f... uit of je text in het midden van je elementen staat?

edit: ow nu opeens wel he!
(niet slim om een topic te openen en stiekum je site door te ontwikkelen)

[ Voor 11% gewijzigd door BasieP op 12-02-2007 22:42 ]

[Tjeemp]

umm je mist eerder het geen ik niet heb geupload sorry
zit een achtergrond plaatje achter hehe

[BasieP]

de nieuwe situatie laat in mijn ogen weer duidelijk zien dat IE fout zit. Zo zijn jouw plaatjes 23 pixels hoog, heb je een padding van 4 pixels, en toch sluiten je elementen strak aan.

wat jij denk ik beetje door elkaar haalt is padding en margin.

margin is voor ruimte TUSSEN elementen. en padding ruimte binnen elementen (tov andere elementen)
je gebruikt padding goed, maar zal in mijn ogen dan je height geen 23px maar 19px hoog moeten maken. (19+4 = 23 = de hoogte van je plaatje)
Vervolgens een 4px margin om aan te geven hoeveel ruimte er tussen de litjes moet..

edit:
echter.... net even zitten testen, en IE schijnt heel padding niet te snappen in li elementen.

edit2:
mm nog anders, hij doet er wel wat mee, maar niet correct.. dwz, hij rekt het element niet mee, terwijl dit wel hoort.

[ Voor 16% gewijzigd door BasieP op 12-02-2007 22:54 ]

[Tjeemp]

wat ik wil bereiken is dat de LI elementen tegen elkaar aan zitten, maar de tekst in het midden van het balkje staat...

het lijkt nu een beetje een of of situatie tussen IE en FF, als het in het ene goed staat staat het in het andere weer niet goed...

[ Voor 36% gewijzigd door Tjeemp op 12-02-2007 22:50 ]

[BasieP]

mja je zou het met > bug/hax of die mooie comments (waar ik de naam van kwijt ben) een apparte style voor FF of IE kunnen maken, maar ik hoop eerlijk gezegt dat er ook een 'fatsoenlijke' manier voor is

ander alternatief is geen list gebruiken (wat jammer zou zijn, want dit is toch echt een lijst)
of door bijv. zoiets:

[code=css]
ul#menu li
{
display: table-cell; //<-- note
font-size: 11px;
font-weight: bold;
background: url(images/menu_item.gif) no-repeat;
color: #3b4c6a;
width: 174px;
height: 23px; //<--note
padding: 0 0 0 16px;
vertical-align: middle; //<--note
}
[/]werkt niet.. IE snapt zelfs dat neit

[ Voor 53% gewijzigd door BasieP op 12-02-2007 23:19 ]

[Tjeemp]

umm ik heb het op de meest degelijke manier die altijd werkt in FF en IE opgelost... namelijk de aloude <TABLE> gestyled met wat css

[Spockz]

De tekst in het midden van het balkje zo uit de losse hand

Cascading Stylesheet:

li a{
height: 23px;
line-height: 23px;
text-align:center;
vertical-align:middle;
}

[BasieP]

@spockz

vertical-align werkt niet op block lvl elementen

@TS:
jammer dat je je code wijzigt, nu kunnen wij niet zo veel meer testen enzo

[ Voor 61% gewijzigd door BasieP op 12-02-2007 23:06 ]

[Levi Strauss]

Dit probleem kun je oplossen door 2 of méér verschillende stylesheets te gebruiken. En door conditional comments deze toe te passen in verschillende browsers.

Meer hierover kun je lezen in dit topic.

[Tjeemp]

in de css zit ook de LI code nog...

ah dankje... ik zal er eens naar kijken!

[ Voor 38% gewijzigd door Tjeemp op 12-02-2007 23:08 ]

[BasieP]

Tjeemp schreef op maandag 12 februari 2007 @ 23:08:
in de css zit ook de LI code nog...

en waar wordt die op toegepast?

[Tjeemp]

nergens, maar je kunt toch niet testen in mijn document?

edit: voor jou, de css versie en de <table> versie

[ Voor 33% gewijzigd door Tjeemp op 12-02-2007 23:11 ]

[BasieP]

Tjeemp schreef op maandag 12 februari 2007 @ 23:10:
nergens, maar je kunt toch niet testen in mijn document?

edit: voor jou, de css versie en de <table> versie

tnx..

crisp heeft een mooie editCSS gemaakt waarmee dat wel kan (kon voor FF al, maar nu dus ook voor IE)

edit:
ik heb hem voor elkaar:

laat dat hele 'height' ding weg en dit werkt:

Cascading Stylesheet:

ul#menu
{
list-style: none;
margin: 0;
padding: 0;
}

ul#menu li
{
font-size: 11px;
font-weight: bold;
background: url(images/menu_item.gif) no-repeat;
color: #3b4c6a;
width: 174px;
padding: 5px;
padding-left: 16px;
}

[ Voor 34% gewijzigd door BasieP op 12-02-2007 23:27 ]

[MichielioZ]

Internet Explorer (6 iig) werkt, als je geen duidelijke DOC-type definieert zoals jij, met het box-model "border-box".
Om hetzelfde in FireFox te krijgen als in IE6, kan je dan dus in je CSS "-moz-box-sizing: border-box;" gebruiken. Wat betreft padding doet Firefox dan dezelfde maffe dingen als IE

[tec]

oftewel defineer even het doctype, dat scheelt je een hoop gedonder.