webForumDet fria alternativet

Margin problem i IE och firefox

10 svar · 476 visningar · startad av peppar

pepparMedlem sedan dec. 2001873 inlägg
#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
#2

Har du en doctype på sidan?

pepparMedlem sedan dec. 2001873 inlägg
#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
#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
#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
#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
#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
#8

Har du validerat sidan?

http://validator.w3.org/

martinMedlem sedan apr. 2000313 inlägg
#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
#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
#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

128 ms totalt · 3 externa anrop · v20260731065814-full.3ab8d573
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
125 ms — hämta tråd, inlägg och bilagor (db)