CSS och mozilla

3 svar · 291 visningar · startad av Jaar 10 okt. 2003

JaarMedlem sedan juli 2001434 inlägg

Frågan10 okt. 2003 14:18#1

Har en div-tag som ligger left: 150px
Denna ska gå ända ut till högerkanten.. oavsett upplösning...
Först testa jag width:100% .. men det blev ju hela vidden + de 150 som den var fel positionerad...
Så jag tänkte att jag sätter width: 100% - 150px; och det funka kanonbra i ie...
men i mozilla (firebird) därimot... där blir det en 3 pixlar (ungefär) som den går utanför ...

	#main {
		position: absolute;
		background: #FFFFFF;
		width: 100% - 160px;
		padding: 0px;
		left: 160px;
		top: 60px;
	}

	#main .header {
		font-weight: bold;
		font-size: 12px;
		color: #FFFFFF;
		background-color: #1C2739;
		padding: 3px;	
		width: 100%;
	}

Tar jag bort 100% så blir den typ 3 pixlar för kort... :(

Varför? Båda sätten blir 100% i IE

jarvkloMedlem sedan juli 20013 378 inlägg

11 okt. 2003 10:45#2

Hmm....
Till att börja med så är

width:100%-160px

inte tillåtet enligt W3C:s rekommendationer! (se http://www.w3.org/TR/CSS2/visudet.html#propdef-width )

Kan ha något med det att göra - webbläsarspecifika tillägg kan vara "knixiga" att ha att göra med ;)

Annars tycker jag det ser ut som att det skulle kunna vara "#main .header" som blir några px "för stor" pga att (och nu gissar jag friskt ;) ) du valt en <!DOCTYPE som ställer MSIE i "Quirks mode" och Mozilla i "Standards mode".

Utan att ha testat så känns det som om att du får din padding på 3px antingen inräknad i width (quirks mode) eller inte inräknade i width (Standards mode)...
Hur ett blocks bredd beräknas enligt standard beskrivs i http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width

Blir det bättre om du plockar bort paddingen (eller tar bort width:100%) på #main .header?

JaarMedlem sedan juli 2001434 inlägg

13 okt. 2003 06:58#3

Mycke riktigt var det paddingen som sabba layouten...
Att man kunde skriva 100% - 100px gjorde mig förvånad, och jag kan förstå att man inte ska använda det.

Tack för referensen. Ska kolla och försöka lösa ut det hela... :)

jarvkloMedlem sedan juli 20013 378 inlägg

13 okt. 2003 08:02#4

Kul att det hjälpte!

Om du får fortsatta problem av den här typen, så kan du (om du inte redan gjort det) som sagt se över din <!DOCTYPE...

Här är min standardmotivering om varför: http://www.webforum.nu/showthread.php?s=&postid=650163#post650163

korta versionen:
Välj alltid en <!DOCTYPE som lägger Moz/NN och MSIE i samma mod - Det underlättar garanterat om man vill ha samma utseende i flera webbläsarfamiljer!

Referenslista: http://www.hut.fi/u/hsivonen/doctype.html
Microsoft om Quirks mode: http://msdn.microsoft.com/workshop/author/css/overview/cssenhancements.asp
Mozilla om Quirks mode: http://www.mozilla.org/docs/web-developer/quirks/