7 svar · 380 visningar · startad av Nellan
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?
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.
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.
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?
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>
:)
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?
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" />
[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