webForumDet fria alternativet

Problem med DIV-layout

5 svar · 266 visningar · startad av K@llen

K@llenMedlem sedan mars 20032 667 inlägg
#1

Denna sida funkar fint i Opera, FF, Safari men inte i IE (allt på Mac). Den fungerade bra i IE också tidigare, sedan gjorde jag något så flippade den ut. Hittar dock inte vad jag gjort för fel. Hela content-divven hamnar till höger om container-divven. Ser ni något fel:

<!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" lang="en" xml:lang="en">
<head>
<title>En snygg titel</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
<!--

body {
	margin-top: 25px;
	padding: 0;
	text-align: center;
	background-color: #e4e4e4;
}

#container {
	width: 750px;
	margin: 0px;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffcc;
	border: 1px solid #cccccc;
	text-align: left;
}

#content {
	width: 749px;
	border: 0px solid #000;
	padding: 0;
	background-color: #ffffcc;
}

#leftcol {
	float:left;
	width:170px;
}

#rightcol {
	float:left;
	width:579px;
}

#leftheader {
	float:left;
	width:170px;
	text-align: left;
}
#rightheader {
	float:left;
	width:579px;
	text-align: left;
}

#leftcontent {
	float:left;
	width:390px;

}
#rightcontent {
	float:left;
	width:189px;

}

#header, #footer {
	background:#FFFFCC;
	text-align:left;
}

p {

	font-family: verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 0.7em; 
	color: black; background-color:transparent;

}

li {
	font-family: verdana, Tahoma, Arial, Helvetica, sans-serif;
	font-size: 0.7em; 
	color: black; background-color:transparent;
	margin: 0px; 
	line-height: 18px;
}

.circle li {  
	list-style: circle; 
} 

-->
</style>
</head>
<body>
<div id="container"> 

  <div id="header">
    <div id="leftheader"><p>Logotype</p></div>
    <div id="rightheader"><p style="margin:0; padding:0;"><img src="images/header.gif" width="570" /></p>
    <span style="float: right; color: #000099; font-family: Trebuchet MS; margin:0; padding:0;">Bokning och priser&nbsp;&nbsp;</span></div>
  </div>

  <div id="content"> 
    <div id="leftcol"> 
    
    <ul class="circle">
		<li>Alternativ 1</li>
		<li>Alternativ 1</li>
		<li>Alternativ 1</li>
		<li>Alternativ 1</li>
		<li>Alternativ 1</li>
		<li>Alternativ 1</li>
	</ul>
    
    </div>
    <div id="rightcol"> 
    
    	<div id="leftcontent">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec dictum blandit erat. Ut nec ipsum sit amet pede pretium lobortis. Integer consectetuer congue ante. Nam iaculis. In tempus porttitor odio. Suspendisse vitae orci in dolor blandit tempor. Quisque tempor. Sed tincidunt sodales diam. Etiam a leo et justo semper placerat. Pellentesque enim lorem, pellentesque sit amet, mollis sed, pulvinar ut, ante. Ut id dolor. Sed ipsum. In hac habitasse platea dictumst. Quisque quam nulla, interdum nec, tristique vitae, bibendum at, sem. Maecenas eu eros in justo auctor aliquam. Nunc condimentum, risus id tristique sollicitudin, mauris pede aliquam metus, sit amet consequat ipsum magna eget magna.</p>
			
<p>Cras in ipsum. Duis porttitor dapibus nulla. Nunc eleifend eleifend dui. Cras sagittis lectus nec neque. Sed est sem, varius a, congue ut, luctus eu, dui. In tempor faucibus dolor. Etiam a nunc eget massa tincidunt vulputate. Praesent elementum. Vivamus rutrum, mi vitae lacinia elementum, orci quam eleifend lorem, sed tempus velit lectus eu enim. Praesent fermentum sem at arcu.</p>

		</div>

		<div id="rightcontent"><p><img src="images/testbild.jpg" height="180" width="180"><br /><br / ><img src="images/testbild.jpg" height="180" width="180"></p></div>

    </div>
    <div style="clear:both"></div>
  </div>
  <div id="footer"> 
    <p>&copy; Jag 2005-2006</p>
  </div>
</div>
</body>
</html>
K@llenMedlem sedan mars 20032 667 inlägg
#2

Märkligt. Tar jag bort:

width: 749px;

från #content så fungerar det även i IE. Vad beror detta på?

webbebbaMedlem sedan juni 200573 inlägg
#3

Jag kan inte komma på något konstigt har försökt att räkna pixlar och allt verkar stämma. Du kan ju kanske ge contentet 1 px extra så du får samma mått som på din container och se om det gör någon skillnad. Såg bra ut i FF, IE och opera på pc, dvs content-diven låg på plats.

K@llenMedlem sedan mars 20032 667 inlägg
#4

Ahh, tack. Anledningen till att #content är 1px mindre än #container är för borderns skull. Kvittar vad jag sätter width till så ballar IE ut. Å andra sidan behövs den inte eftersom innehållet har en width som fyller upp.

zcorpanMedlem sedan dec. 20042 245 inlägg
#5

Ballar IE också ur om du sätter zoom:1 på #content? I så fall hänger det ihop med hasLayout... :)

K@llenMedlem sedan mars 20032 667 inlägg
#6

zcorpan skrev:

Ballar IE också ur om du sätter zoom:1 på #content? I så fall hänger det ihop med hasLayout... :)

Ska jag ha både zoom: 1 och width på #content när jag testar?

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