Padding, og noen rare feil...

[JohnRichard]

Hei igjen!

 

Synes det var vanskelig å lage ett skikkelig emnetittel, but here goes.

 

1) #header og #navBar ligger ikke inntil hverandre i IE6. Why? Ser at det ordner seg om jeg setter skriftstørrelse til "mindre" og "minst"

 

2) Padding fra bildene til border-bottom i #navBar er forskjellig i IE6, Opera 7.53 og FF1.0PR

(IE6 = 9px, Opera7 = 5px, FF1.0PR = 10px)

 

Håper noen har noen tips.

 

 

LiNK

[FuLu]

Du trenger ikke sette width: 100%; på block elementer, disse vil strekke seg 100% as default.

 

Det er mulig du må bytte padding i #navBar img til margin. Ellers kan jeg ikke se noe spesielle feil i CSS/HTML her og nå.

[JohnRichard]

1) Ah, takk! Prøvde aldri uten Fjernet det så ble det riktig i IE også.

 

2) Hjalp ikke med margin heller, begge dokumentene (html+css) validerer.

[FuLu]

Test å bare ha margin: 0 20px; i #navBar img, mens du har padding: 4px 0; i #navBar

 

Edit: eventuelt ha padding-bottom: 4px; i #navBar.

Endret 4. november 2004 av FuLu

[JohnRichard]

 

Det gjorde heller ikke susen, fremdeles forskjellig. Tror det har noe med bilder å gjøre, men aner ikke

 

Tusen takk for rask hjelp FuLu, kanskje noen andre har ideer

 

 

Edit: Med bare . som innhold i <div id="navBar">, blir høyden 23px i alle 3 nettleserne. Med en gang jeg legger inn <a href="#"><img...> blir høyden forskjellig...

Endret 4. november 2004 av JohnRichard

[FuLu]

Hmm hmm, det var jo rart, du har kanskje ikke sagt hvor store bildene er? Hva med å slenge på width="xxx" og height="xxx" i <img>, kanskje Opera blir snillere da?

[JohnRichard]

Gjorde ingen forskjell.

 

Men har satt padding på bildene til 4px 20px;

 

Da skal jo i prinsippet bildene vises midt i #navBar, og det gjør de i Opera. Så slik jeg ser det, gjør Opera riktig og IE/FF feil. Der legger nettleserne til enten

a) padding i bunn (#navBar)

b) margin-bottom (#navBar img)

 

..?!

[FuLu]

Heh, fant løsning, ha med vertical-align: bottom; i #navBar img

[JohnRichard]

Tusen takk FuLu. Nå har jeg brukt nok av din tid, men les videre om du vil

 

Du fant en hack , jeg fant en grunn...

 

IE + FF ser at img har margin, og setter dermed på den ekstra marginen før den avslutter </a>, mens opera avslutter </a> også setter padding. Med hacken din ble det likt i alle.

 

Hvis jeg er på bærtur og at min kode var feil og denne er riktig, er det fint om noen sier fra, og forklarer meg hvorfor.

 

Nå ser i hvertfall sida nogenlunde lik ut, la til en img:hover, med en a:hover hack for IE, og en ny hack som fikser problemene IE hacken laget i FF