Problemer med vertical-align af menu

Og du har angivet fast størrelse på:

font
line-height
margin
padding
border

Så der ikke er noget overladt til browserens default settings?

Ved ikke om der findes noget ala: INSPECT ELEMENT i ie8.
Men den hjalp mig i samme situation, da jeg oplevede samme kode gav en pixel forskel i linux versus windows.
Og på den måde kan du så få info om hvordan den pågældende browser tolker din menu.

Tag evt. et kig på:
http://msdn.microsoft.com/en-us/library/dd565628%28VS.85%29.aspx

#1 Ja, der er angivet faste værdier på det hele.

#2 Jeg synes ikke rigtig jeg fandt noget der kunne hjælpe mig, der hvor du henviser til jakobdo. Men det gør slet ikke så meget. Jeg har erfaret, at det tilsyneladende ikke har været IE 8 jeg har testet i, men i IE 7, hvor den viser det anderledes end de resterende browsere. I IE 8 vises det korrekt. Så dermed kan jeg godt leve med den ene pixel fejl, når man skal helt tilbage i 7'eren for at opleve den.

Smid du bare et svar alligevel, for at bruge din tid her :-)

Jamen skidt da.

Takker for point.
Dog kunne det stadig være interessant at finde fejlen. :o)

Helt sikkert. Det er stadig rigtig irriterende at noget som burde være så simpelt, er så svært at få til at passe ordentligt sammen. Synes ikke rigtig at kunne finde noget om det på nettet. Ikke uden, at man ender i nogle CSS hacks og så videre, hvilket ikke er en optimal løsning i mine øjne.

Der er noget som hedder text-justify i CSS3, som måske kan hjælpe på fejlen, men har ikke rigtig kigget nærmere på den funktion i CSS før, så ved slet ikke om den berører sådan noget ...

Ikke at det løser dit problem, men jeg har fundet frem til den ekstra plads der er tale om i IE7, er over A tagget.
Så hvorfor den er der, ved jeg simpelthen ikke...

Umiddelbart ser det faktisk ud til det er line-height: 22px; i a.menu_left som gør det...

Præcis jakobdo. Det er line-height der gør forskellen. Den skal normalt være samme højde som containeren omkring elementet, for at centrere ud fra det. Det vil sige 21px. Hvis jeg sætter line-height til 21px, er den centreret perfekt i IE 7. Men det er den ikke i efterfølgende versioner af IE eller i Chrome og FF. Der mangler den 1 pixel. Hvis jeg derimod lægger den ene pixel til som der mangler i line-height, altså 22px, så er det centreret perfekt i IE 8, 9, Chrome og FF, men ikke i IE 7. Så vi når frem til den samme konklusion.

Jeg ved heller ikke, hvorfor der er denne forskel.
Det logiske og rigtige burde være, at line-height skal være 21px og ikke 22px, da div'en omkring a-tagget kun er 21px i højden.

Det eneste jeg kan tænke mig til, som måske kunne være årsagen, er den tidligere border-problematik der har været mellem IE og FF. IE har altid tolket placering af border på en anden måde end FF. Den ene browser placerer border indvending i containeren og den anden (FF så vidt jeg husker) lægger borderen rundt om containeren. Dvs. den tilfører boksen 1 px mere, hvis borderen er 1px tyk. I takt med at Microsoft er blevet bedre til at følge standarden med tiden, tolker deres browser mere og mere tingene på samme måde som Firefox og De er måske gået over til at vise borders på samme måde som FF fra version 8. Så der kunne forskellen på den ene pixel måske ligge.

Der er så den lille krølle, er jeg ikke benytter mig af borders på 1px, men på 7px og derfor skulle man mene, at det også ville forskyde sig 7px på a-tags'ne i såfald, hvis det skulle være denne problematik som driller. Så det er ikke overvejende sandsynligt at det er problemet.

http://reference.sitepoint.com/css/line-height

Så måske løsningen er:

<!--[if IE 7]>
<style>
a.menu_left {line-height:21px;}
</style>
<![endif]-->

Jeg har forsøgt tidligere ved at benytte target/hacks mod en browser. Det virkede dog ikke da jeg udarbejdede det i mit stylesheet, men forsøgte mig lige med det i headeren, og det ser ud til at virke. Jeg har så bare lavet et stylesheet for IE7 alene der hentes ind, når den browser besøger hjemmesiden, da jeg ikke er interesseret i at have CSS stående direkte i min header.

Men tak for hjælpen jakobdo.

Vi finder nok aldrig ud af, hvorfor denne forskel opstår, men når der nu findes en work around på det, går det jo nok altsammen :-)

Ikke for at være en pestilens, men hvis du laver opstillingen anderledes, behøver du ingen IE hacks eller seperate stylesheets for at komme problemet til livs.



Du bør nok også sætte margin og padding til 0, på alle elementer, i starten af dit stylesheet.



For 1px, er 1px. Det er der ikke forskel på. Forskellen ligger i browsernes default stylesheets. Den måde de render de forskellige elementer på.

Nogle gange kan det være nødvendigt at fjerne margin og padding helt, før man definere det på sine bokse. Specielt når vi taler om IE - den værste browser, der nogensinde har eksisteret.

Desuden forstår jeg ikke du gider lægge så mange kræfter i at understøtte forældede versioner af IE, og slet ikke bare for at rette et problem med 1px. Folk har selv valgt at bruge IE og tilmed ikke opdatere den, så de har også selv valgt at få problemer med at vise sites ordentligt. ;)

#12 Det er klart. Man kan løse problemet ved at bygge det op helt anderledes. Jeg kan også lave det i en table, hvis det er det. Men er jeg ikke interesseret i. Men ellers tak for forslaget :)

Jeg har margin og padding på de forskellige elementer.
Også på selve body.

Angående forældede versioner af IE, er vi ikke helt enige på det punkt. Folk har ikke valgt at bruge IE. Det følger med Windows og derfor benytter langt størstedelen den browser af den grund. Ligesom langt størstedelen ikke aner hvad en browser er og at der findes alternativer til Internet Explorer. IE 7 er ikke SÅ forældet endnu, at jeg mener, at den kan forbigåes. Men det er min mening. Og for mig gør det noget, hvis der er 1px til forskel, for jeg tager penge for mit arbejde og jeg har en kunde som på et tidspunkt skal have det færdige produkt og som nok skal få øje på alle sådan nogle småting. Og hvis man nu har muligheden for at udbedre fejlen, hvorfor så ikke gøre det. :)

Sidst men ikke mindst, så er det ligeså meget for min egen skyld, for at lære noget nyt, at jeg går i dybden med at finde årsagen til problemet :)