webForumDet fria alternativet
Logga in / Bli medlem

CSS-layout förvanskas i IE6 - Hjälp!

HTML & CSS

26 svar · 1 976 visningar · startad av Reisan

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
Frågan#1

Jag håller på att göra layout på en ny hemsida med CSS. Och som många andra, har jag problem att min CSS-layout förvanskas i IE6, men ser korrekt ut i FireFox för windows, samt Safari och FireFox i OSX.

Ni kan se hemsidan jag håller på med på denna adress.

Kan s k "Box model hack och starHTMLhack" som kan ses på denna hemsidan hjälpa mig?

Här är min layout-css:

body {
	background-image: url(../img/bodybg_1x768px.gif);
	background-repeat: repeat-x;
	background-color: #ebebeb;
}
#container {
	width: 840px;
	background-color: #FFFFFF;
	float: left;
	height: 768px;
}
#topedge {
	height: 10px;
	width: 840px;
	float: left;
}
#bottomedge {
	height: 10px;
	width: 840px;
	float: left;
}
#header {
	float: left;
	height: 100px;
	width: 820px;
	background-color: #ebebeb;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
}
#leftcontent {
	float: left;
	width: 200px;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
}
#centercontent {
	width: 400px;
	float: left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0;
}
#rightcontent {
	width: 200px;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0;
	float: right;
}
#left_header {
	float: left;
	height: 20px;
	width: 200px;
}
#left_box {
	float: left;
	width: 200px;
}
#center_header {
	float: left;
	height: 20px;
	width: 400px;
}
#center_box {
	float: left;
	width: 400px;
}
#right_header {
	float: left;
	height: 20px;
	width: 200px;
}
#right_box {
	float: left;
	width: 200px;
}

Och här är min format-css:

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #0066CC;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #0066CC;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.breadtext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
tantenMedlem sedan nov. 20051 596 inlägg
#2

Tycker det ser ut som du har 10px för mycket om man räknar ihop de tre divarna som ligger bredvid varandra? Får det till 850px men ska väl vara 840px?
Innan jag börjar med hack så brukar jag först 0-ställa margin och padding i body och se om det hjälper.

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#3

tanten skrev:

Tycker det ser ut som du har 10px för mycket om man räknar ihop de tre divarna som ligger bredvid varandra? Får det till 850px men ska väl vara 840px?

Nej, jag får det till totalt 840px över de tre divarna.

tanten skrev:

Innan jag börjar med hack så brukar jag först 0-ställa margin och padding i body och se om det hjälper.

Jag ska prova att sätta margin och padding till 0 i body i min layout-css.

tantenMedlem sedan nov. 20051 596 inlägg
#4

Inser att jag nog var lite kryptisk... utgick bara från IE när jag tänkte. Men nu när jag tittar närmare på din sida så ser jag att du vill att innehållet väl egentligen ska vara lika bred som loggabilden... 820px... eller ser jag fel?
Jag har en stund till övers nu... så jag ska skissa lite på den och se om jag ser någon lösning utan hack...

symbolisms avatarsymbolismMedlem sedan mars 2007522 inlägg
#5

hmm... det verkar inte som om den funkar som den ska här i FireFox=(

För övrigt verkar det som om du har alldeles för många boxar.

Såsom jag ser det nu behöver du enbart 6 boxar. Då skulle det vara såhär:

**<div id="topp"></div>

<div id="mittencontainer">** <---för att kunna lägga följande boxar bredvid varandra med float: left;.

**<div id="vanster"></div>
<div id="mitt"></div>
<div id="hoger"></div>

<div id="botten"></div>**

</div> <---Sluttagg för mittencontainern
Om du kortar ner koden på så sätt borde det lösa problemet. Jag tror nämligen att du slarvat till det i kodandet i och med att du kodar för så onödigt många boxar. Kom ur tabelltänkandet=)

Något hack ser jag absolut som någon lösning i detta läget... Det är bar aatt radera allt och koda om. Fick göra det många gånger i början innan jag kunde få detta resultat .

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#6

tanten skrev:

Inser att jag nog var lite kryptisk... utgick bara från IE när jag tänkte. Men nu när jag tittar närmare på din sida så ser jag att du vill att innehållet väl egentligen ska vara lika bred som loggabilden... 820px... eller ser jag fel?

Ja, de tre spalterna ska tillsammans vara lika bred som loggan.

tanten skrev:

Jag har en stund till övers nu... så jag ska skissa lite på den och se om jag ser någon lösning utan hack...

Ok, tack för att du tar dig tid! :D Jag ska också testa lite...

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#7

symbolism skrev:

hmm... det verkar inte som om den funkar som den ska här i FireFox=(

För övrigt verkar det som om du har alldeles för många boxar.

Ja, det går att göra färre divboxar. Ska fila på det.

symbolism skrev:

Om du kortar ner koden på så sätt borde det lösa problemet. Jag tror nämligen att du slarvat till det i kodandet i och med att du kodar för så onödigt många boxar. Kom ur tabelltänkandet=)

Ja, jag ska avvänja tabelltänket... :)

tantenMedlem sedan nov. 20051 596 inlägg
#8

Nu blir det en skiss, men jag håller med symbolism att det finns mycket du borde ändra.
H1 ska t.ex inte användas för layout. Ska bara finnas en gång per sida. Och i stället borde du göra en lista av alla p:na. En dl-lista skulle jag gjort med dt som rubriker... i stället för h1... Men jag har inte ändrat.
Eftersom du splittrat upp bilder så gjorde jag en extra div, men tog bort en hel hög andra. Principen har varit att inte få margin left och right på ställen där de lägger på extra pixlar...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head><title>hej</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
*{margin: 0px;
padding: 0px;}

body {
background: #ebebeb url(img/bodybg_1x768px.gif) repeat-x; 
font: 12px Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
color: #000;}

#wrapper{
width: 840px;
margin: 10px auto;
position: relative;}

#container {
background: url(img/logotype_820x100px.gif) no-repeat top;
width: 840px;
padding: 0px;
float: left;
height: auto;
background-color: #fff;
margin-bottom: 10px;}

#content {
width: 820px;
margin: 0 10px;
padding: 0px;
float: left;
height: auto;}	

* html #content{
width: 820px;
margin: 0 5px 0 5px;
padding: 0px;
float: left;
height: auto;}

#topedge {
height: 10px;
width: 840px;
float: left;}

#bottomedge {
height: 10px;
width: 840px;
float: left;
margin-bottom: 20px;}

#leftcontent {
background: url(img/header_bg_200.gif) no-repeat top;
margin:120px 10px 0 0;
float: left;
width: 200px;}

#centercontent {
background: url(img/header_bg_400.gif) no-repeat top;
width: 400px;
float: left;
margin:120px 0 0 0;}

#rightcontent {
background: url(img/header_bg_200.gif) no-repeat top;
width: 200px;
margin:120px 0 0 0;
float: right;}

#leftcontent h1, #rightcontent h1, #centercontent h1{
 margin-top: 20px;
width: 90%;
font-size: 18px;
color: #0066CC;}

p {
margin-bottom: 5px;}

</style>
</head>
<body>
<div id="wrapper">
<div id="topedge"><img src="img/topedge.gif" alt="" /></div>
<div id="container">
<div id="content">
<div id="leftcontent">
  <h1>Enoue.se</h1>
  <p>Bakgrund, syfte och mål</p>
  <p>Rei Trulsson</p>
  <p>Portofolio</p>
  <p>CV</p>
  <p>Länka hit</p>
  <p>Webbläsare</p>
  <p>Kontakt</p>
  <h1>Datorkunskap</h1>
  <p>Datorer</p>
  <p>Skärmar</p>
  <p>Pekdon</p>
  <p>Tangentbord</p>
  <p>Högtalare</p>
  <p>Skrivare</p>
  <p>Program</p>
  <p>USB-minne</p>
  <p>CD/DVD-skivor</p>
  <p>Datorbord</p>
  <p>Kontorsstol</p>
  <h1>Dokumenthantering</h1>
  <p>Microsoft Office-paket</p>
  <p>Dokumentformatet Adobe PDF</p>
  <p>E-post</p>
</div>
<div id="centercontent">
<h1>Lorem ipsum dolor</h1>
  <p>sit amet, consectetuer adipiscing elit. Sed sed metus. 
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque id mi. Lorem ipsum dolor.</p>
</div>
<div id="rightcontent">
<h1>Filhantering</h1>
  <p>Mappar</p>
  <p>Filer</p>
  <h1>Webbutveckling</h1>
  <p>Från idé till färdig hemsida</p>
  <p>HTML-kodning</p>
  <p>HTML-editorer</p>
  <p>CSS - för layout och format</p>
  <p>Grafisk produktion för webb</p>
  <p>Domännamn</p>
  <p>Webbhotell</p>
  <h1>Guider och forum</h1>
  <p>W3Schools</p>
  <p>IDG Webbstudio</p>
</div></div>
<div id="bottomedge"><img src="img/bottomedge.gif" alt="" width="840" height="10" /></div>
</div></div>
</body>
</html>

Nu centrerade jag sidan, men du kan ändra den som du vill och kanske får du några idéer... :)

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#9

tanten skrev:

Nu blir det en skiss, men jag håller med symbolism att det finns mycket du borde ändra. H1 ska t.ex inte användas för layout. Ska bara finnas en gång per sida. Och i stället borde du göra en lista av alla p:na. En dl-lista skulle jag gjort med dt som rubriker... i stället för h1... Men jag har inte ändrat. Eftersom du splittrat upp bilder så gjorde jag en extra div, men tog bort en hel hög andra. Principen har varit att inte få margin left och right på ställen där de lägger på extra pixlar... Nu centrerade jag sidan, men du kan ändra den som du vill och kanske får du några idéer... :)

Jag testade också att förbättra och minska antal div-boxar. Jag slog ihop den övre kanten och loggan, samt toningen under loggan, så att det är en enda bild. Och får då en div-box.

Sen gjorde jag en container-divbox som innehåller de tre spalt-divboxarna. Och slutligen en div-box för nederkanten.

Jag vet inte hur det ser ut i IE6 nu, eftersom jag har bara mac hemma. Jag kolla på din skiss och det såg bra ut. Ska kolla din skiss och min omgjorda i morgon med IE6. Och se vad jag kan kombinera och förbättra.

Ja, jag ska lägga alla kategorier/underkategorier i en lista.

Min omgjorda mallsida kan ses här .

Tack så hemskt mycket för att du tog dig tid och hjälpt mig! :D

tantenMedlem sedan nov. 20051 596 inlägg
#10

Ser helt OK ut i IE6 windows nu
Men du använder listan lite tokot...

<span class="menuheader">Enoue.se    </span>
    <dl>
    	<dt>Bakgrund, syfte och mål</dt>
        <dt>Rei Trulsson</dt>
        <dt>Portofolio</dt>
        <dt>CV</dt>
        <dt>Länka hit</dt>
        <dt>Webbläsare</dt>
        <dt>Kontakt</dt>
</dl>
Ska vara (tycker jag)
<dl>
<dt>Enoue.se</dt>
<dd>Bakgrund, syfte och mål</dd>
<dd>Rei Trulsson</dd>
osv.
</dl>
Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#11

tanten skrev:

Ser helt OK ut i IE6 windows nu
Men du använder listan lite tokot...
Ska vara (tycker jag)

<dl>
<dt>Enoue.se</dt>
<dd>Bakgrund, syfte och mål</dd>
<dd>Rei Trulsson</dd>
osv.
</dl>

Ah, ok, ska ändra. :D Tack än en gång.

tantenMedlem sedan nov. 20051 596 inlägg
#12

Ett litet tips till på vägen eftersom jag ser att du ger dina divar margin left och right, vilket tolkas olika av en del webläsare...
Tänk på dem som något som bara ska ha ett innehåll. Jag lägger dem precis bredvid varandra och utnyttjar så mycket av bredden på sidan jag kan. Under tiden jag jobbar så sätter jag olika bakgrundsfärger på dem för att se exakt hur de sträcker ut sig.
Om vi tittar på din <div id="center_content"> t.ex. som innehåller <p>. Då gör jag så att jag sätter bredden på p för att få marginaler. Nu använder jag själv oftast % men i ditt fall skulle du kunna t.ex ange 370px på den och margin-left 10px och då skulle du automatiskt få 20px till högerdiven. Och kanske behöver man då inte ge någon vänster marginal på den o.s.v.
Det skulle då bli

#center_content {
   	width: 400px;
	float: left;}
#center_content p{
   	width: 370px;
	margin-left:10px;}

Titta också på vad du kan använda body till. brödtexten är perfekt att lägga där och slippa undan en massa kod. Se hur jag gjorde som exempel.

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#13

tanten skrev:

Ett litet tips till på vägen eftersom jag ser att du ger dina divar margin left och right, vilket tolkas olika av en del webläsare...
Tänk på dem som något som bara ska ha ett innehåll. Jag lägger dem precis bredvid varandra och utnyttjar så mycket av bredden på sidan jag kan.

Ok, om jag förstår dig rätt, så är det bättre att sätta bredd på divarna som ska vara bredvid varann ihop. Och sedan sätta marginaler på <p>-taggen som omger texten.

Jag är lite förvirrad när det gäller padding och margin. Vilket är bäst när man ska ha mellanrum mellan text/bildinnehåll och själva div-väggen?

tanten skrev:

Under tiden jag jobbar så sätter jag olika bakgrundsfärger på dem för att se exakt hur de sträcker ut sig.

Ja, det är ett bra sätt att kolla hur saker beter sig i olika webbläsare. Ska ändra nu när jag bygger upp mallen.

tanten skrev:

Titta också på vad du kan använda body till. brödtexten är perfekt att lägga där och slippa undan en massa kod. Se hur jag gjorde som exempel.

Hm, här tappa jag bort mig... :D

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#14

symbolism skrev:

<div id="topp"></div>
<div id="mittencontainer"> <---för att kunna lägga följande boxar bredvid varandra med float: left;.

**<div id="vanster"></div>
<div id="mitt"></div>
<div id="hoger"></div>

<div id="topp"></div>**

</div> <---Sluttagg för mittencontainern

Jag hoppas du skojar med den koden.. två st "Topp" ID? ;)

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#15

Reisan skrev:

Ok, om jag förstår dig rätt, så är det bättre att sätta bredd på divarna som ska vara bredvid varann ihop. Och sedan sätta marginaler på <p>-taggen som omger texten.

Nu har jag färglagt bakgrunden på divarna för att se hur de placerar sig. Och jag har satt marginaler på textinnehållet iställt. Och nu ser det rätt ok ut i IE6 på windows och FF i OSX. :)

Kolla testsidan.

tantenMedlem sedan nov. 20051 596 inlägg
#16

Ok för att ge ännu mer idéer och funderingar så har jag lagt upp en färgglad sida också :)
Testa den med att förminska fönstret...
Tog bort länken, kändes överflödig nu :-)
Tycker det är skoj att försöka anpassa sidor ner till 640px bredd på fönstret utan att behöva scrolla.

Reisans avatarReisanMedlem sedan feb. 200732 inlägg
#17

tanten skrev:

Testa den med att förminska fönstret... Här Tycker det är skoj att försöka anpassa sidor ner till 640px bredd på fönstret utan att behöva scrolla.

Ja, jag har sett vissa hemsidor som anpassar sig till hur fönstret görs mindre. Men jag tycker det är onödigt. Normalt är ju en hemsidas bredd anpassat för att passa de lägre skärmupplösningarna. Men en kul grej ändå. :)

tanten skrev:

Ett av äpplena är det padding på... och så har jag tagit bort alla fonter utom i body.

Oki, då förstår jag bättre angående padding och margin. Är det både padding och margin som IE6 tolkar fel eller bara ett av dem? Aha, nu förstod jag det du syfta på med body-taggen. :)

Nu ska jag bara centrera hemsidan. Sen är jag nog nöjd. Och kan finslipa det hela. :D

tantenMedlem sedan nov. 20051 596 inlägg
#18

Är det både padding och margin som IE6 tolkar fel eller bara ett av dem?

Går att skriva hur mycket som helst om det och finns också många svar, men egentligen kan man kortfattat säga att det beror på vilken doctype man använder och om man lyckas få IEwebläsaren att tolka sidan i Standards-compliant mode. Transitional doctype använder quirks mode om jag inte missuppfattat det. Så får man då använda lite hack här och där eller nästla divar som jag föredrar eftersom man inte vet hur webläsarna hanterar hacks i framtiden.
Det är en av anledningarna till att jag alltid använder strict doctype. Då vet man att man gjort rätt så långt det går och får inga "förlåtande" tolkningar av sidan. Och det gäller både margin och padding.
Men så brukar jag alltid börja byggandet av sidan genom att 0-ställa webläsarna. De har lite olika defaultpixlar där också, som kan reta en till ilska om man kommit en bit på sidan och det börjar placera sig saker lite olika.
Men det finns andra här på forumet som är mycket mer insatta i detta än vad jag kommer bli, så det blir kanske fler svar...
Jag centrerade sidan också med en nästlad div :-)

symbolisms avatarsymbolismMedlem sedan mars 2007522 inlägg
#19

voigtann1 skrev:

Jag hoppas du skojar med den koden.. två st "Topp" ID? ;)

tack för att du uppmärksammade det. har ändrat det nu.

jag var antagligen trött eller stressad.

dAEks avatardAEkMedlem sedan feb. 20041 816 inlägg
#20

tanten skrev:

Transitional doctype använder quirks mode om jag inte missuppfattat det.

Nja, det stämmer inte helt riktigt utan det beror på vilken av doctyparna man kör med. Se http://hsivonen.iki.fi/doctype/#handling för mer info om vilka doctypes som triggar quirks resp. standards mode.

265 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
120 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)
125 ms — ändringar (db)