Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout problem with IE6

    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-

    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
    Code:
    <!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>
    Code:
    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%}
    Last edited by Dyfrig; 12-01-2008 at 08:44 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Dyfrig,
    Looks like a little div-itis there. If you don't mind, I cleaned it up a little...
    Code:
    <!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 &amp; 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>
    <!--end navigation--></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>
            <!--end l_column--></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>
            <!--end r_column--></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>
    <!--end container--></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.
    Last edited by Excavator; 12-02-2008 at 01:39 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •