Padding och margin i FF/IE

17 svar · 443 visningar · startad av Nellan 4 jan. 2005

NellanMedlem sedan dec. 200419 inlägg

Frågan4 jan. 2005 10:04#1

http://www.thirdstone.se/TEMP

Som ni ser så blir sidan skum i FF eftersom iframen inte får plats i diven. Antar att det har med margin och padding att göra?

Jag kör med denna doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> eftersom jag vill att sidan ska tolkas i quirks mode (på grund av iframe-buggen i IE). Kan jag lösa problemet genom att tvinga FF att använda quirks mode på något vis?

Tack på förhand!

InsiderMedlem sedan jan. 2000978 inlägg

4 jan. 2005 11:36#2

Måste du ha en iframe?
Du kan ju göra själva diven scrollningsbar och det borde ge exakt samma effekt.

/RED Hade visst frågat dig det redan i en annan tråd och antar att du fortfarande måste ha en iframe. :)

NellanMedlem sedan dec. 200419 inlägg

4 jan. 2005 12:29#3

Ja, jag vill ha en iframe :)

PepeJeriaMedlem sedan feb. 2003774 inlägg

4 jan. 2005 12:59#4

Anledning till detta är att div:en till höger har en height på 400 px + padding-bottom och padding-top på 10px, det blir alltså:
400 + 10 + 10 = 420px hög

Men IE som har en annan boxmodel räknar in paddingen i själva div:ven. Så i IE är den 380 px hög. Denna boxmodel funkar som tänkt när man har en standars compliance doctype i IE 6.

Du säger att du vill använda dig av quirks mode på grund av en iframe bugg i IE, vilken bugg då?

zcorpanMedlem sedan dec. 20042 245 inlägg

4 jan. 2005 13:30#5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

...utlöser quirks mode även i Mozilla.

Om du vill att bara IE ska vara i quirks mode kan du lägga till vad som helst före doctypen, tex en kommentar eller en xml-deklaration.

/me tycker inte om iframes :P

NellanMedlem sedan dec. 200419 inlägg

4 jan. 2005 16:29#6

PepeJeria: Okej, men hur får man dem att använda samma boxmodel då? "Buggen" jag talar om är att IE i standards mode gärna sätter en horisontell scroll på iframen som är helt onödig.

zcorpan: Men då borde de ju visas likadant? :\

PepeJeriaMedlem sedan feb. 2003774 inlägg

4 jan. 2005 16:45#7

Enda sättet du kan få IE 6 att ha samma box model som övriga browsers är att använda dig av en standards compliance mode DOCTYPE.
Eftersom tidigare versioner av IE inte stöder DOCTYPE switching, kommer det ändå att tolka boxmodel på ett felaktigt sätt. Detta löser man dock genom ett CSS hack för att ge dessa browsers ett annat värde.

Följande kod + en DOCTYPE som sätter IE 6 i standards compliance mode löser problemet:

#meny
{
	float: right;
	\height:400px;
	he\ight:360px;
	\width: 153px;
	w\idth:113px;
	margin: 0;
	padding: 20px;
	background-color: #DADADA;
	font-size: 13px;
	font-weight:bold;
}

Första värdet är till IE 5.x och det andra (height/width minus padding) för browsers som förstår boxmodel på ett korrekt sätt.

NellanMedlem sedan dec. 200419 inlägg

4 jan. 2005 17:51#8

Men då får jag ju en horisontell scroll på iframen, och det vill jag inte.

PepeJeriaMedlem sedan feb. 2003774 inlägg

4 jan. 2005 17:54#9

Kan du visa denna bugg? Nyfiken

NellanMedlem sedan dec. 200419 inlägg

4 jan. 2005 18:20#10

här: http://nellan.net/temp/bugg

PepeJeriaMedlem sedan feb. 2003774 inlägg

4 jan. 2005 18:25#11

Om du stänger <p> taggen ordentligt, och ändrar dess marginal så kommer scrollbaren att försvinna.

NellanMedlem sedan dec. 200419 inlägg

4 jan. 2005 18:28#12

Jaså? Men om jag tar bort <p> och kör med <br> istället då? Kolla igen.

jarvkloMedlem sedan juli 20013 378 inlägg

4 jan. 2005 18:36#13

Hmm...

Det där kommer antagligen inte heller att hjälpa...

MSIE är nämligen mycket piggare på att lägga ut en horisontell scrollbar i frames och iframes i standards compliance mode än i quirky mode om man inte aktivt definierar hur man vill ha det med "scrollingen" genom att t.ex. smäcka dit stildefinitionen

<style tyle="text/css">
<!--
html {overflow-x:hidden;  overflow-y:[red][s]auto[/s][/red]scroll}
-->
</style>

på varje sida som laddas in i iframen... ;)

Det framgår också om man gör "view source" på de olika filerna i följande exempel:
HTML 4 Transitional: http://member.webforum.nu/2241/iframescrollertest1.html
xhtml 1.0 Transitional: http://member.webforum.nu/2241/iframes_i_xhtml.html

OBS! att problemet inte verkar uppkomma i annat än MSIE och att de tre alternativen i varje exempel förmodligen ser identiska ut i Mozilla/Opera osv "icke-MSIE"-webbläsare

:birp

//Red: Ändrat till overflow-y:scroll (se nedan)

NellanMedlem sedan dec. 200419 inlägg

4 jan. 2005 19:36#14

jarvklo: Mjo.. fast jag ser ett litet fel på din exempel-sida för html 4 transitional. På iframen längst ner står det ovanför att du satt "overflow-x:hidden och overflow-y:auto inställda för html-taggen", men det stämmer inte!

Du har satt overflow-y:scroll; och det ger inte riktigt samma resultat. Sätter du auto så går texten in bakom scrollbaren, och när man har scroll så är ju scrollen där jämt.. alltså även om innehållet bara är på tex en rad.

Hur som helst: Tack till alla som försökt hjälpa :)

jarvkloMedlem sedan juli 20013 378 inlägg

4 jan. 2005 21:28#15

Ajdå :r

Får skylla på att exemplen har något år på nacken och att jag måste ha slarvat då :r

Nu är det hursomhelst fixat - ledsen bara att vi inte lyckades klura fram en bra lösning åt dig :(

zcorpanMedlem sedan dec. 20042 245 inlägg

4 jan. 2005 21:28#16

zcorpan: Men då borde de ju visas likadant? :\

varför då? det är två olika webbläsare... de beter sig olika i standards compiance mode också.

PepeJeriaMedlem sedan feb. 2003774 inlägg

4 jan. 2005 21:48#17

Men att slopa standards compliance mode endast för den här buggen vore ju lite synd. Ibland krävs det fulhack för att undvika buggar, och enklast då är att sätta en width på 443px på bodyn i iframen, fast detta endast för IE dock, så kör med:

/* Till bodyn i iframe:n */
*html body { width:443px; }

NellanMedlem sedan dec. 200419 inlägg

5 jan. 2005 09:59#18

Ja, det funkade! Tack!