Margin problem i IE och firefox

10 svar · 478 visningar · startad av peppar 14 maj 2005

pepparMedlem sedan dec. 2001873 inlägg

Frågan14 maj 2005 17:39#1

har en innehållsDIV som ser ut så här:

#content {
	float: left;
	width: 440px; 
	margin: 10px 0px 0px 20px;
	/*background-image: url(content.jpg);
	background-repeat: no-repeat;*/
	padding: 0px;/* 10px 0px 20px;*/
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}
{

Men då blir det problem i IE den verkar inte bry sig om vänstermarginalen utan lägger diven dikt-an vänstervägg på #container DIVen.

om jag gör så här istället:

#content {
	float: left;
	width: 440px; 
	margin: 0px;/*10px 0px 0px 20px;/*
	/*background-image: url(imgs/back_content.jpg);
	background-repeat: no-repeat;*/
	padding: 0px 10px 0px 20px;
	font-family: Tahoma, Geneva, Arial, Helvetica, sans-serif;
}
{

Så blir IE nöjd, men det skiljer sig i Firefox, divarna hamnar inte på samma breddgrad (om man kan yttrycka sig så)

Hur kan jag lösa detta korrekt...?

GuffaMedlem sedan juni 2004533 inlägg

14 maj 2005 19:21#2

Har du en doctype på sidan?

pepparMedlem sedan dec. 2001873 inlägg

14 maj 2005 19:33#3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

GuffaMedlem sedan juni 2004533 inlägg

15 maj 2005 00:48#4

I vissa fall så ska marginalerna räknas bort, det beror på inställningarna på elementet utanför, hur det är positionerat och vilka marginaler det har.

Ifall webbläsarena beter sig olika så kan det antingen bero på att du gjort någonting som inte är korrekt, så webbläsarna får gissa eller kompromissa, eller också kan det bero på olika buggar. Ifall det är buggar så är det oftast Firefox som visar sidan korrekt.

Tänk på att elementet blir 470 pixel brett när du sätter padding på det.

pepparMedlem sedan dec. 2001873 inlägg

15 maj 2005 11:34#5

elementet utanför ser ut såhär:

 #container {
	width: 780px;
	text-align: left;
	margin: 10px auto 0 auto;
	background: url(container1.jpg) #FFFFFF repeat-y;
	padding: 0 !important;
	line-height: 1.8em;
}

GuffaMedlem sedan juni 2004533 inlägg

15 maj 2005 18:23#6

När jag testar med din kod så blir det precis tvärtom. IE lägger av någon anledning dubbel marginal till vänster om content.

Om jag sätter marginalen i content till noll och använder padding så ser det likadant ut i IE och FF.

pepparMedlem sedan dec. 2001873 inlägg

15 maj 2005 18:44#7

Knepigt, då är det något annat lurt som ligger innan och spökar... för köra med uteslutningsmetoden.

GuffaMedlem sedan juni 2004533 inlägg

15 maj 2005 20:43#8

Har du validerat sidan?

http://validator.w3.org/

martinMedlem sedan apr. 2000313 inlägg

16 maj 2005 07:16#9

Guffa skrev:

När jag testar med din kod så blir det precis tvärtom. IE lägger av någon anledning dubbel marginal till vänster om content.

Om jag sätter marginalen i content till noll och använder padding så ser det likadant ut i IE och FF.

Kan vara den här buggen
http://www.positioniseverything.net/explorer/doubled-margin.html

/ m a r t i n

GuffaMedlem sedan juni 2004533 inlägg

16 maj 2005 12:38#10

martin skrev:

Guffa skrev:

Kan vara den här buggen
http://www.positioniseverything.net/explorer/doubled-margin.html

Mycket troligt. Jag besökte just nu den här tråden för att länka till just den sidan. :)

pepparMedlem sedan dec. 2001873 inlägg

16 maj 2005 13:55#11

Kikade på länken från martin, men problemet är ju inte att IE dubblar marginalen utan den nollar den, och som sagt om jag nollar som default och sätter padding-left så visar IE och Firefox inte sidan lika utan diven hamnar längre åt höger i Firefox än i IE.

En av dom datorer som jag sitter och jobbar på har fått fnatt och det verkar bara vara IE som ballat ur, programmet har betett sig underligt dom seanste dagarna, verkar vara efter en uppdatering på winupdate.
Jag har provat samma upplägg på andra datorer men då fungerar det helt smärtfritt...

Så vad jag förstår är det Windows (för ovanlighetens skull [not]) som verkar ha brakat IE...

Återkommer i detta om jag hittar på något annat fel... Tack för hjälpen :bire