Marginaler och grejs

7 svar · 382 visningar · startad av Nellan 14 feb. 2005

NellanMedlem sedan dec. 200419 inlägg

Frågan14 feb. 2005 23:30#1

Så som denna sida ser ut i IE, så vill jag att den ska se ut även i FF:
http://nellan.net/temp/test/

Men hur fixar jag det? De hanterar marginaler och padding olika, jag vet. Jag slängde in denna doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Men då blir den ju inte ända ner till botten istället..

Please help? Pretty please?

silfverMedlem sedan apr. 200312 679 inlägg

14 feb. 2005 23:39#2

Börja med följande:

* {
	margin: 0;
	padding: 0;
}

Sen så utgår du ifrån att allt är nollstält när du sätter margin och padding.

InsiderMedlem sedan jan. 2000978 inlägg

15 feb. 2005 09:00#3

Minska bredden på .ruta till 340px. (tror jag det borde bli om man tar 400 minus paddingen på båda sidor)
Lägg in en ny bredd som bara IE följer:

* html .ruta {width: 400px;}

Då borde bredden bli lika.

NellanMedlem sedan dec. 200419 inlägg

15 feb. 2005 12:30#4

Tack för hjälpen, det funkade! :)

Fast texten hamnar ju längre ner i FF, och sidan får en scroll som inte behövs. (Kolla länken igen för uppdaterad version.) Nån som vet hur man fixar det?

zcorpanMedlem sedan dec. 20042 245 inlägg

15 feb. 2005 13:41#5

Tex:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>

<style type="text/css">
* { margin: 0; padding: 0; }
p { padding: .5em 1em; }
html { height: 100%; margin: 0 auto; }
html { 
	display:table; /* Ignoreras av IE/Win */
	background:silver; 
	color:black; 
	width: 70%; /* IE verkar (felaktigt) sträcka ut html-elementet över hela fönstret ändå */
}
body { display:table-row; /* Ignoreras av IE/Win */ }
div { 
	display:table-cell; /* Ignoreras av IE/Win */
	background: white; 
	border-left: 1px solid black; 
	border-right: 1px solid black; 
}
</style>

<!--[if IE]>
<style type="text/css">
body { text-align: center; /* Centrera för IE5/Win */ } 
html, body, div { 
	height: 100%; /* Jag vet inte hur det blir i IE5/Mac... Nån får testa. :) */
} 
div { width: 70%; margin: 0 auto; text-align: left; }
</style>
<![endif]-->

<div>
<p>test test test
<p>test test test
<p>test test test
<p>test test test
<p>test test test
<p>test test test
<p>test test test
</div>

NellanMedlem sedan dec. 200419 inlägg

15 feb. 2005 16:17#6

Oj, det där förstår jag typ hälften av :\
Hur gör man för att lägga det i en extern stilmall? Funkar det där <!--[if IE]> då? Rubriken hamnar längs kanten också, trots att jag har satt padding på den. Måste det vara så här krångligt att få det att funka i både FF och IE?

m_soderlundMedlem sedan sep. 20026 425 inlägg

15 feb. 2005 16:33#7

Så här ska stilmallen se ut:

* { margin: 0; padding: 0; }
p { padding: .5em 1em; }
html { height: 100%; margin: 0 auto; }
html { 
	display:table; /* Ignoreras av IE/Win */
	background:silver; 
	color:black; 
	width: 70%; /* IE verkar (felaktigt) sträcka ut html-elementet över hela fönstret ändå */
}
body { display:table-row; /* Ignoreras av IE/Win */ }
div { 
	display:table-cell; /* Ignoreras av IE/Win */
	background: white; 
	border-left: 1px solid black; 
	border-right: 1px solid black; 
}

<!--[if IE]>
body { text-align: center; /* Centrera för IE5/Win */ } 
html, body, div { 
	height: 100%; /* Jag vet inte hur det blir i IE5/Mac... Nån får testa.  */
} 
div { width: 70%; margin: 0 auto; text-align: left; }
<![endif]-->

Stilmallen lägger du in genom att använda link-elementet i headern:

<link rel="stylesheet" type="text/css" href="style.css" />

icaaqMedlem sedan okt. 20005 273 inlägg

15 feb. 2005 16:40#8

[red]
<!--[if IE]>
body { text-align: center; /* Centrera för IE5/Win */ } 
html, body, div { 
	height: 100%; /* Jag vet inte hur det blir i IE5/Mac... Nån får testa.  */
} 
div { width: 70%; margin: 0 auto; text-align: left; }
<![endif]-->
[/red]

Kan du inte ha inuti den externa css-mallen, utan den måste du ha i html-dokumentet. alternativt kan du länka till en extern mall inom de taggarna så här

[red]
		<!--[if IE]>
		<LINK rel="stylesheet" type="text/css" href="css/iehack.css"/>
		<![endif]-->
[/red]

mv icaaq