Internet Explorer 6 layout probs

cubix · #1 Apr 9th, 2008, 23:24

I would be ever so grateful if you could take a look at a three column CSS template that I would like to use. I have noticed a problem with the layout when viewed in Internet Explorer 6. The right column is completely out of alignment and appears a long way down the page, on the far left hand side as opposed to the right. I have pasted the code below for you to see.

Is there any way that I can resolve this issue?

Thanks in advance,

Michael

Index.asp

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>3 column css template </title>
ttp-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrapper">  
   <div id="header">
   <div class="logo"><a href="#">newsdotcom</a></div>
      <div class="searchbox">
  <form action="" method="post" class="form">
   <input name="" type="text" />
   <input name="" type="submit" class="input" value="SEARCH" />
  </form>
   </div>
   <div class="breakingnews">breaking news scroll bar here</div>
   </div>
   <div id="leftcolumn">
   <h3>News</h3>
   <div class="menuleft">
 <ul>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">dolor sit</a></li>
  <li><a href="#">amet consectetuer</a></li>
  <li><a href="#">adipiscing elit</a></li>
  <li><a href="#">donec rutrum</a></li>
  <li><a href="#">neque eu nisl</a></li>
  <li class="last"><a href="#">morbi eget</a></li>
 </ul>
        <br/>
        <br/>
   <h3>Lifestyle</h3>
 <ul>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">dolor sit</a></li>
  <li><a href="#">amet consectetuer</a></li>
  <li><a href="#">adipiscing elit</a></li>
  <li><a href="#">donec rutrum</a></li>
  <li><a href="#">neque eu nisl</a></li>
  <li><a href="#">adipiscing elit</a></li>
  <li><a href="#">donec rutrum</a></li>
  <li><a href="#">neque eu nisl</a></li>
  <li class="last"><a href="#">morbi eget</a></li>
 </ul>
        <br/>
        <br/>
   <h3>Classified Ads</h3>
 <ul>
  <li><a href="#">lorem ipsum</a></li>
  <li><a href="#">dolor sit</a></li>
  <li><a href="#">amet consectetuer</a></li>
  <li><a href="#">adipiscing elit</a></li>
  <li><a href="#">donec rutrum</a></li>
  <li class="last"><a href="#">morbi eget</a></li>
 </ul>
</div>
   </div>
   
   <div id="centercolumn">
   <div id="boxes_I">
   <div class="box1">
  
   <img src="http://www.webforumz.com/images/sl1.jpg" width="200" height="139" alt="News 1" />
  
   </div>
   <div class="box2">
   <h4>Lorem ipsum dolor sit amet, consectetuer adipiscing</h4>
   <h3>Something Here</h3>
   <p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
   <a href="#">read more</a>
   </div>
   </div>
<div class="clear"></div>
<div id="threeboxes">
  <div class="boxone">
   <h2>Lorem ipsum</h2>
 <p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl.</p>
 <p class="more"><a href="#">more</a></p>
  </div>
  <div class="boxtwo">
   <h2>Dolor sit amet</h2>
 <p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl.</p>
 <p class="more"><a href="#">more</a></p>
  </div>
  <div class="boxthree">
   <h2>Donec rutrum</h2>
 <p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl.</p>
 <p class="more"><a href="#">more</a></p>
  </div>
</div>
<div class="clear"></div>
  <div class="onemorebox">
        <h2>Lorem ipsum dolor sit</h2>
                        <img src="http://www.webforumz.com/images/sl2.jpg" class="floatTL" alt="Image" />
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing id, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit... <a href="#">read more</a></p>
<br/>
       <h2>Lorem ipsum dolor sit</h2>
                        <img src="http://www.webforumz.com/images/sl3.jpg" class="floatTL" alt="Image" />
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquet elit id augue. Duis rutrum. Praesent massa lectus, malesuada ut, sollicitudin eu, adipiscing id, lacus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit... <a href="#">read more</a></p>
   </div>
<div class="clear"></div>
   <div id="boxes_I">
   <div class="box1">
   <h4>Lorem ipsum dolor sit amet, consectetuer adipiscing</h4>
   <h3>Something Here</h3>
   <p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna. Ut interdum ipsum nec metus.</p>
   <a href="#">read more</a>
   </div>
   <div class="box2">
   <h4>Lorem ipsum dolor sit amet, consectetuer adipiscing</h4>
   <h3>Something Here</h3>
     <img src="http://www.webforumz.com/images/sl4.jpg" class="floatTL" alt="Image" />
   <p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl. Morbi eget felis. Vestibulum feugiat lectus ut magna.</p>
   <a href="#">read more</a>
   </div>
   </div>
<div class="clear"></div>
   </div>
   
   <div id="rightcolumn">
<h3>User Login</h3>
<form action="a" method="get" >
<p>
Username: <br /><input name="a" type="text" size="16" /><br />
Password: <br /><input name="a" type="password" size="16" /><br /><br />
<input name="a" type="submit" class="login" value="Login" />
</p>
</form>
<div class="reg">
<p>New User Register <a href="#">here</a>.</p>
</div>
<div class="textright1">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl. Morbi eget felis.</p>
   </div>
<div class="textright2">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl. Morbi eget felis.</p>
   </div>
<div class="textright3">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, elit. Donec rutrum neque eu nisl. Morbi eget felis.</p>
   </div>
   </div>
   
      
</body>
</html>

CSS
 
* { 
padding : 0;
margin : 0;
} 
body { 
margin: 0px;
height: 100%;
font-family : Arial, Helvetica, sans-serif;
color : #666666;
font-size : 12px;
} 
img { 
padding : 3px;
border : 1px solid #888f3d;
} 
img.floatTL { 
float : left;
margin-right : 7px;
margin-bottom : 3px;
margin-top : 2px;
margin-left : 10px;
} 
img.floatTR { 
float : right;
margin-left : 7px;
margin-bottom : 3px;
margin-top : 2px;
margin-right : 10px;
} 
.clear{
clear: both;}
#wrapper { 
width : 870px;
margin : 0 auto;
} 
#header { 
border : 1px solid #ccc;
margin : 5px 5px 5px 5px;
height : 115px;
background-color : #847ec8;
} 
.logo { 
width : 160px;
height : 40px;
background-image : url(images/buttonone.gif);
margin-top : 20px;
margin-left : 5px;
} 
.logo a { 
color : #686b43;
font-size : 2em;
text-decoration : none;
padding-left : 12px;
line-height : 1.7em;
} 
.advertisement { 
position : relative;
left : 200px;
top : -45px;
width : 468px;
height : 60px;
background-image : url(images/adbg.gif);
background-repeat : no-repeat;
} 
.advertisement p { 
color : #f9f9f9;
font-size : 2.3em;
padding-left : 90px;
padding-top : 10px;
} 
.searchbox { 
float : right;
margin-top : -120px;
margin-right : 20px;
} 
.searchbox { 
width : 127px;
height : 60px;
background : #847ec8;
color : #574a22;
} 
.searchbox form.form { 
width : 127px;
height : 60px;
} 
.searchbox form.form .input { 
width : 61px;
height : 16px;
color : #666;
border : none;
font : 10px Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
text-align : center;
text-transform : uppercase;
} 
.searchbox input { 
width : 104px;
height : 16px;
display : block;
background : #fff;
color : #000;
font : 11px Verdana, Arial, Helvetica, sans-serif;
margin : 14px 0 0 10px;
} 
.breakingnews { 
width : 842px;
height : 20px;
border : 1px solid;
margin-top : -33px;
margin-left : 6px;
background-color : #ffffff;
padding-left : 3px;
padding-top : 5px;
} 
#leftcolumn { 
margin : 0 5px 5px 5px;
display : inline;
width : 170px;
float : left;
min-height : 300px;
border : 1px solid #ccc;
} 
* html #leftcolumn { 
height : 300px;
} 
#leftcolumn h3 { 
background-color : #847ec8;
font-size : 1em;
padding-left : 7px;
padding-top : 2px;
padding-bottom : 2px;
color : #fff;
font-weight : bolder;
} 
.menuleft ul { 
margin : 10px 0 0 0;
list-style-type : none;
margin-left : 5px;
} 
.menuleft ul li { 
width : 155px;
height : 15px;
border-bottom : 1px dashed #868686;
} 
.menuleft ul li a { 
display : block;
height : 12px;
background : url(images/arrow1.gif) no-repeat 0 50%;
color : #888f3d;
font : 400 11px Arial, Helvetica, sans-serif;
padding : 0 0 0 10px;
} 
.menuleft ul li a:hover { 
background : url(images/arrow2.gif) no-repeat 0 50%;
text-decoration : none;
color : #7e9dc8;
} 
.menuleft ul li.last { 
border : none;
} 
#centercolumn { 
border : 1px solid #ccc;
margin : 0 5px 0 0;
padding-bottom: 10px;
display : inline;
width : 504px;
float : left;
min-height : 300px;
} 
* html #centercolumn { 
height : 300px;
} 
#boxes_I { 
width : 500px;
margin-left : 10px;
} 
.box1 { 
width : 240px;
float : left;
margin-top : 5px;
margin-right : 10px;
} 
.box1 img { 
margin-top : 15px;
} 
.box1 h3 { 
background-image : url(images/hbg1.gif);
background-repeat : no-repeat;
padding-top : 5px;
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
color : #686b43;
font-size : 1.5em;
padding-bottom : 10px;
} 
.box1 h4 { 
padding-right : 10px;
padding-top : 15px;
font-family : Times, "Times New Roman", serif;
color : #333;
font-weight : lighter;
font-weight : bolder;
} 
.box2 { 
width : 240px;
float : right;
margin-top : 5px;
margin-right : 10px;
} 
.box2 h3 { 
background-image : url(images/hbg1.gif);
background-repeat : no-repeat;
padding-top : 5px;
font-family : Times, "Times New Roman", serif;
font-weight : lighter;
color : #686b43;
font-size : 1.5em;
padding-bottom : 10px;
} 
.box2 h4 { 
padding-right : 10px;
padding-top : 15px;
font-family : Times, "Times New Roman", serif;
color : #333;
font-weight : lighter;
font-weight : bolder;
} 
#threeboxes { 
width : 480px;
position : relative;
margin : 15px auto 10px auto;
padding : 4px 0 0 5px;
border : 1px solid #ffe;
} 
.boxone { 
width : 150px;
float : left;
margin : 0 7px 0 0;
color : #524201;
font : 11px Verdana, Arial, Helvetica, sans-serif;
border : 1px solid #fff;
} 
.boxone h2 { 
color : #333;
font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight : bolder;
padding : 0 0 0 0;
} 
.boxone p { 
padding : 0 0 0 0;
line-height : 12px;
} 
.boxone p.more { 
width : 66px;
height : 18px;
padding : 10px 0 0 24px;
} 
.boxone p.more a { 
width : 66px;
height : 18px;
display : block;
background : #7e9dc8;
color : #fff;
font : 11px Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
text-align : center;
text-decoration : none;
} 
.boxtwo { 
width : 150px;
color : #212121;
float : left;
margin : 0 7px 0 0;
font : 11px Verdana, Arial, Helvetica, sans-serif;
border : 1px solid #fff;
} 
.boxtwo h2 { 
color : #333;
font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight : bolder;
padding : 0 0 0 0;
} 
.boxtwo p { 
padding : 0 0 0 0;
line-height : 12px;
} 
.boxtwo p.more { 
width : 66px;
height : 18px;
padding : 10px 0 0 24px;
} 
.boxtwo p.more a { 
width : 66px;
height : 18px;
display : block;
background : #7e9dc8;
color : #fff;
font : 11px Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
text-align : center;
text-decoration : none;
} 
.boxthree { 
width : 150px;
color : #333;
float : left;
margin : 0 7px 0 0;
font : 11px Verdana, Arial, Helvetica, sans-serif;
border : 1px solid #fff;
} 
.boxthree h2 { 
color : #333;
font : 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight : bolder;
padding : 0 0 0 0;
} 
.boxthree p { 
padding : 0 0 0 0;
line-height : 12px;
} 
.boxthree p.more { 
width : 66px;
height : 18px;
padding : 10px 0 0 24px;
} 
.boxthree p.more a { 
width : 66px;
height : 18px;
display : block;
background : #7e9dc8;
color : #fff;
font : 11px Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
text-align : center;
text-decoration : none;
} 
.onemorebox { 
padding-top : 15px;
padding-bottom : 15px;
} 
.onemorebox h2 { 
font-family : Times, "Times New Roman", serif;
font-size : 1.6em;
color : #7e9dc8;
padding-top : 10px;
margin-left : 10px;
} 
.onemorebox p { 
margin-right : 10px;
text-align : justify;
} 
#rightcolumn { 
margin : 0 5px 0 0;
display : inline;
width : 170px;
float : left;
border : 1px solid #ccc;
min-height : 300px;
padding-bottom : 5px;
} 
* html #rightcolumn { 
height : 300px;
} 
#rightcolumn h3 { 
background-color : #847ec8;
font-size : 1em;
padding-left : 7px;
padding-top : 2px;
padding-bottom : 2px;
color : #fff;
font-weight : bolder;
} 
form { 
margin-top : 0;
width : 150px;
margin-left : 9px;
margin-right : 5px;
margin-bottom : 15px;
} 
form p { 
padding-top : 10px;
padding-left : 5px;
padding-bottom : 5px;
color : #847ec8;
} 
.reg p { 
padding-left : 5px;
} 
.textright1 h2 { 
background-image : url(images/buttonyellow.jpg);
background-repeat : no-repeat;
margin-left : 10px;
font-size : 17px;
font-weight : lighter;
padding-left : 5px;
padding-top : 8px;
padding-bottom : 7px;
margin-top : 15px;
} 
.textright1 p, .textright2 p, .textright3 p, .textright4 p, .textright5 p { 
margin-top : -4px;
margin-left : 11px;
margin-right : 10px;
border-left : 1px solid #ccc;
border-right : 1px solid #ccc;
padding-left : 3px;
padding-top : 5px;
padding-bottom : 5px;
border-bottom : 1px solid #ccc;
} 
.textright2 h2 { 
background-image : url(images/buttongreen.jpg);
background-repeat : no-repeat;
margin-left : 10px;
font-size : 17px;
font-weight : lighter;
padding-left : 5px;
padding-top : 8px;
padding-bottom : 7px;
margin-top : 15px;
} 
.textright3 h2, .textright4 h2, .textright5 h2 { 
background-image : url(images/buttonorange.jpg);
background-repeat : no-repeat;
margin-left : 10px;
font-size : 17px;
font-weight : lighter;
padding-left : 5px;
padding-top : 8px;
padding-bottom : 7px;
margin-top : 15px;
} 

#footer { 
margin-top : 5px;
display : inline;
float : left;
width : 870px;
text-align : center;
padding-top : 10px;
padding-bottom : 10px;
} 
#footer p { 
color : #a8bcf6;
} 
#footer a { 
color : #a8bcf6;
}

saltedm8 · #2 Apr 9th, 2008, 23:36

i had a very quick look, and at a glance i think this might be the solution

if you add a </div> at the very bottom ( just above </body> ), your wrapper will kick in, looks like that might be what is missing - possibly messing up ie6

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Internet Explorer 6.0 & 5.5 don't like me	bodgit	Web Page Design	0	May 10th, 2008 17:40
Internet Explorer 8	CloudedVision	Webforumz Cafe	9	Feb 20th, 2008 23:05
CSS Internet Explorer only	Kropotkin	Web Page Design	8	Sep 5th, 2007 12:34
3 column layout issue in internet explorer	JulianRead101	Web Page Design	3	May 31st, 2007 14:22
Problem with three column layout in Internet Explorer	Aleksandersen	Web Page Design	12	Mar 19th, 2007 06:09

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Internet Explorer 6 layout probs