Layout problem with IE6

Dyfrig

12-01-2008, 08:21 PM

Hi,

Im having a few problems with the layout of my webpagehttp://www.perisandcorr.com.

Everything works fine in Firefox, IE7, Opera and Safari but on the homepage in IE6 the menu bar on the left and the news section float to the right.

This is what happens-http://www.htmlforums.com/attachment.php?attachmentid=9557&d=1227798207

I have no access to IE6 as I am on a Mac so can't play around and see what works.

I will post the HTML and CSS here to see if anyone can spot an obvious solution.

Thanks in advance.

Dyfrig
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eco friendly screen printing - Peris & Corr</title>
<meta name="keywords" content="screen printing ecofriendly tshirt cards textiles homeware north wales gifts presents water based inks ">
<meta name="description" content="We provide an eco friendly screen printing service, printing with water based ink onto ethically sourced garments">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8 ">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div class ="img"><img src="header.jpg" alt="eco friendly screen printing">
</div>
</div>
<div id="wrapper">
<div id="content3">
<img src="homepage.jpg" alt="eco friendly screen printing">

<br>
<br>
<p><strong>What we do.</strong></p>
<p>Located in Snowdonia, North Wales, we provide an <a href="screenprinting.html">eco friendly
screen printing service</a>, printing
only with water-based inks onto ethically sourced garments.</p>

<p>We also create a range of handmade <a href="textiles.html">textiles</a> and
<a href="cards.html">greeting cards</a>.</p>
<br>
<br>
<br>
<br>
</div>
</div>
<div id="navigation">
<ul>
<li><a class="nav" href="homepage.html"><strong>home page</strong></a></li>
<li><a class="nav" href="products.html"><strong>products</strong></a></li>
<li><a class="nav" href="screenprinting.html"><strong>screen printing</strong></a></li>
<li><a class="nav" href="aboutus.html"><strong>about us</strong></a></li>
<li><a class="nav" href="http://perisandcorr.blogspot.com/"><strong>blog</strong></a></li>
<li><a class="nav" href="contactus.html"><strong>contact us</strong></a></li>
</ul>
</div>

<div id="column2">
<p class="news"><strong>News.</strong></p>
<p>Our first range of products will be available at the Aberystwyth
Arts<br>Centre’s Christmas Crafts fair from October 24th 2008 to January 11th <br>2009.
The range will feature cards (including packs of Christmas <br>cards), organic tea towels,
purses,<br> bags and cushions.</p>
</div>

<div id="footer">
<hr>
<p><a href="hafan.html">Cymraeg</a> / <a href=sitemap.html>Site Map</a></p>
</div>
</div>
</body>
</html>

html,body{margin:0;padding:0}
body{font: 78% helvetica;text-align:center; }
h2{color:#7b7f82;}
h3{color:#7b7f82;}
p{margin:10px 10px; color:#000000;}
a{padding:0px; font-style:bold;color:#7b7f82; outline:none;}
.nav{padding:0px; font-style:bold;text-decoration:none; color:#7b7f82;}
a:hover{text-decoration:none; color: #000000;}
.a2{padding:0px; color:none; outline:none;}
hr{color:#7b7f82; background-color:#7b7f82; Height:1px;}
div#header {background-color:white}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left;}
div#content p{line-height:1.4;padding-right:40px;}
div#content2 p{line-height:1.4;padding-right:40px;}
div#content3 p{line-height:1.4;padding-right:30px;}
div#column2 p{line-height:1.4;padding-right:15px;}
.news{padding-top:315px}
div#navigation{background:white}
div#navigation ul{margin:0px 0; padding-left:15px;padding-top:0px; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#navigation sl{margin bottom:5px; padding-left:20px;}
li.sl {margin bottom:5px; padding-left:20px;}
div#table{padding-left:5px;}
.prices{width:350px; border-collapse:collapse;}
.images {border:0px;}
th{padding-left:5px; padding:3px;border-bottom:2px solid #DCDCDC;text-align:left;}
td{padding-left:5px; padding:3px;border-bottom:2px solid #DCDCDC;}
div.garment{width:450px;padding-left:5px; margin-left: auto; text-align:left; border-collapse:collapse;}
div#form{padding-left:5px;}
div.img {height:auto; width:auto; float:left; margin-top: 10px; margin-left: 0px; margin-bottom:20px}
.img2{padding:10px 10px; margin-top:10px; 10px margin-bottom:0px; display:inline; outline:0px; border:0px;}
div#extra{background:white;}
div#footer{background:white;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#content2{margin-left: 0 150px; padding-left:150px; padding-right:20px;}
div#content3{margin-left: 0 150px; padding-left:150px; padding-right:255px;}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#column2{float:right;width:265px;margin-left:-265px}
div#footer{clear:left;width:100%}

Excavator

12-01-2008, 10:27 PM

Hello Dyfrig,
Looks like a little div-itis there. If you don't mind, I cleaned it up a little...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>eco friendly screen printing - Peris & Corr</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8 ">
<style type="text/css">
html, body {
background: #fff;
font: 95% Helvetica;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container{
width: 705px;
margin: 0 auto;
text-align: left;
}
#container p{
margin: 10px 10px;
color: #000000;
}
#container .home {
float: left;
margin: 0 0 25px 0;
}
#header {
padding: 10px 0 20px 0;
background: #fff;
}
#header h1{height:80px;line-height:80px;margin:0;}
#navigation{
float: left;
width: 150px;
background: #fff;
}
#navigation ul{margin:0px 0; padding-left:15px;padding-top:0px; list-style-type:none;}
#navigation li{margin-bottom:5px;}
#navigation sl{margin bottom:5px; padding-left:20px;}
.nav{padding:0px; font-style:bold;text-decoration:none; color:#7b7f82;}
#l_column, #r_column {
width: 200px;
}
#l_column{
margin: 0 0 10px 150px;
float: left;
}
#r_column {
margin: 10xp 0 10px 0;
float: right;
}
#footer{
background:#fff;
padding: 5px 10px;
clear: both;
}
a{padding:0px; font-style:bold;color:#7b7f82; outline:none;}
a:hover{text-decoration:none; color: #000000;}
hr{color:#7b7f82; background-color:#7b7f82; Height:1px;}
h2{color:#7b7f82;}
h3{color:#7b7f82;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="http://www.perisandcorr.com/header.jpg" width="705" height="75" alt="eco friendly screen printing">
</div>
<div id="navigation">
<ul>
<li><a class="nav" href="http://www.perisandcorr.com/homepage.html"><strong>home page</strong></a></li>
<li><a class="nav" href="http://www.perisandcorr.com/products.html"><strong>products</strong></a></li>
<li><a class="nav" href="http://www.perisandcorr.com/screenprinting.html"><strong>screen printing</strong></a></li>
<li><a class="nav" href="http://www.perisandcorr.com/aboutus.html"><strong>about us</strong></a></li>
<li><a class="nav" href="http://perisandcorr.blogspot.com/"><strong>blog</strong></a></li>
<li><a class="nav" href="http://www.perisandcorr.com/contactus.html"><strong>contact us</strong></a></li>
</ul>
</div>
<img src="http://www.perisandcorr.com/homepage.jpg" alt="eco friendly screen printing" width="500" height="300" class="home">
<div id="l_column">
<h3>What we do.</h3>
<p>
Located in Snowdonia, North Wales, we provide an <a href="http://www.perisandcorr.com/screenprinting.html">
eco friendly screen printing service</a>, printing only with water-based inks onto ethically sourced garments.
</p>
<p>
We also create a range of handmade <a href="http://www.perisandcorr.com/textiles.html">textiles</a> and
<a href="http://www.perisandcorr.com/cards.html">greeting cards</a>.
</p>
</div>
<div id="r_column">
<h3>News.</h3>
<p>
Our first range of products will be available at the Aberystwyth Arts<br>
Centre’s Christmas Crafts fair from October 24th 2008 to January 11th <br>
2009. The range will feature cards (including packs of Christmas <br>
cards), organic tea towels, purses,<br> bags and cushions.
</p>
</div>
<div id="footer">
<hr>
<p><a href="http://www.perisandcorr.com/hafan.html">Cymraeg</a> / <a href="http://www.perisandcorr.com/sitemap.html">Site Map</a></p>
</div>
</div>
</body>
</html>

The full image paths and attached CSS are only to make it work by cut/paste that code to a new html document and not have to edit anything.

Dyfrig

12-04-2008, 09:07 AM

Thaks for that, looks like you have dome laods of work there.

Haven't had a chance to try it out yet, but will do over the weekend.

Thanks a lot for your help.

Dyfrig