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 1 of 1
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newbie Layout difficulties - ie & ff

    I am trying to teach myself css and have laid out a page as I want it to look in ff. After getting it more or less ok (ignore the colours used, they are to help me separate things), I then moved a div, by accident.

    When I look at the page in ff, its not too far away from what I want, but in ie it is useless. The middle 6 sections (boxes) are all over the place. What do I need to do to sort this out?

    view here

    Much of this is culled from others and I have tried to deconstruct it to find out which bit does what.

    Thanks in advance for your help

    Harlequeen

    Here is my page

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
    <html>
    <head>
    <title>Miss Scarlett Investigates...</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    
    <link rel="stylesheet" href="msi.css" />
    <link href="msi.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="menu.css">
    
    <style type="text/css">
    <!--
    .style1 {
    	color: #FF0000;
    	font-weight: bold;
    }
    .style2 {color: #FF0000}
    -->
    </style>
    </head>
    <body>
    <div id="pagewidth" >
    	
      <div id="header" > Miss Scarlett Investigates... </div>
    			<div id="wrapper" class="clearfix" > 
    		
        <div id="twocols" class="clearfix"> 
          
        <div id="maincol" > Combe Island off the Cornish coast has a bloodstained history of piracy and cruelty but now, privately owned, it offers respite to over-stressed men and women in positions of high authority who require privacy and guaranteed security. But the peace of Combe is violated when one of the distinguished visitors is bizarrely murdered.
    
    	<div id="container">
      	
    		<div id="left">
    		  <div align="center" class="navblock1">
    		<p class="navblockheader1">
    			New Releases
    		</p>
    		<p align="left" class="navblocktext1"><img src="Images/small_lighthouse.jpg" width="65" height="100" align="right"><span class="style1">P
    		  D James new work.</span><br>
    		  <br>
    		  The peace of Combe Island is violated when one of he distinguished
    		  visitors is bizarrely murdered..
    		<br>
    		</p>
    		</div>
      		</div>
      
      		<div id="middle"><div align="center" class="navblock1">
    		<p class="navblockheader1">
    			Miss Scarlett Selects...
    		</p>
    		<p align="left" class="navblocktext1"><span class="style1">Reading List</span><br> 
    		  <img src="Images/small_catchmewhenifall.jpg" width="66" height="100" align="right">An
    		  addition to our recommended reading list
    		  <span class="style1">Synopsis:</span>			You’re a whirlwind. A success. You live life on the edge. But who’ll catch you when you fall?<br>
    		</p>
    		</div>
    		</div>
    		
    		<div id="right">
    		  <div align="center" class="navblock1">
    		<p class="navblockheader1">
    			Featured Author
    		</p>
    		<p align="left" class="navblocktext1"><strong><img src="Images/small_danbrown.jpg" width="63" height="100" align="right"><span class="style2">Dan
    		  Brown</span></strong>, international best selling author of The DaVinci Code, Angels
    		  &amp;	Demons	and Digital Fortress<br>
    		</p>
    		</div>
      		</div>
    	</div> 
     
    	<div id="container">
      	<div id="left"><div align="center" class="navblock1">
    		<p class="navblockheader1">Featured Web Site </p>
    		<p align="left" class="navblocktext1"><span class="style1"><img src="Images/small_sforsilence.jpg" width="66" height="100" align="right">Sue Grafton</span><br>
    Each month, this section will feature an interesting book related web site.<a href="http://www.suegrafton.com"><br>
      suegrafton.com</a><br>
    		</p>
    		</div>
    		</div>
    		
      		<div id="middle"><div align="center" class="navblock1">
    		<p class="navblockheader1">
    			Watching the Detectives </p>
    		<p align="left" class="navblocktext1"><span class="style1">British TV detectives</span> are the best in
    		  the world! Catch up with your favourites here. <br>
    		  <br>
    		  </p>
    		</div>
      		</div>
    			
      		<div id="right"><div align="center" class="navblock1">
    		<p align="left" class="navblockheader1">
    			Competitions</p>
    		<p align="left" class="navblocktext1"><span class="style2"><strong>Enter our competition</strong></span> to win a novel.<br>
    		  Sign up to join the newsletter and get a free entry into our prize
    		    draw. <br>
    		</p>		
    		</div>
    		</div>
    	</div> 
     
    	</div>
    		
        <div id="rightcol" > 
            <ul id nav>
              Guardian Unlimited<br>
              Book Crossing<br>
              Amazon<br>
              List Books<br>
              Watching the Detectives<br>
              Female Heroines<br>
              American Authors<br>
            </ul>
          </div>
        </div> 
    			
        <div id="leftcol" > 
          <div id="vertmenu">
    <h1>Navigation</h1>
    <ul>
    <li><a href="#" tabindex="1">Home</a></li>
    <li><a href="#" tabindex="2">New Releases</a></li>
    <li><a href="#" tabindex="3">Miss Scarlett Selects...</a></li>
    <li><a href="#" tabindex="4">Featured Author</a></li>
    <li><a href="#" tabindex="5">Forum</a></li>
    <li><a href="#" tabindex="6">Featured Site</a></li>
    <li><a href="#" tabindex="7">Competition</a></li>
    </ul>
        </div>
    </div>
    	<div id="footer" > Copyright Miss Scarlett Investigates 2006</div>
    </div>
    </body>
    </html>

    and here is my css

    Code:
    html, body{ 
     margin:0; 
     padding:0; 
     text-align:center; 
     font-family: Verdana, sans-serif;
     font-size:90%;
    } 
     
    #pagewidth{ 
     width:98%; 
     text-align:left;  
    margin-left:auto; 
     margin-right:auto;  
    } 
     
    #header{
     position:relative; 
     height:20%; 
      background-color:#ffffff; 
     width:100%;
     font-family: "Poilet Taper", Verdana;
     color: Red;
     font-size:200%;
    } 
     
    #leftcol{
     width:20%; 
     float:left; 
     position:relative; 
     background-color:#D6FFFF; 
     }
     
    #twocols{
     width:80%; 
     float:right; 
     position:relative; 
      }
     
    #rightcol{
     width:24%; 
     float:right; 
     position:relative; 
     background-color:#9073A9;
     }
     
    #maincol{background-color: #e3e3e3;  
     float: left; 
     display:inline; 
     position: relative; 
     width:75%; 
     }
     
    #footer{
     height:10%; 
      background-color:#90FCA9; 
      font-size: 75%;
      text-align:center; 
     clear:both;
     } 
     
    
     .navblock1 { margin: 2px 4px 20px 8px; padding: 0px; border-color: #000000; border-width: 2px; border-style: solid; }
    .navblockheader1 { font-family: verdana, arial, Helvetica, sans-serif; font-size: 12px;  
    			margin: 0px 00px 0px 00px; padding: 4px 4px 4px 6px; 
    			background-color: #53a653; 
    			border-color: #000000; border-width: 0px 0px 2px 0px; border-style: solid; 
    			line-height: 1.0em; font-weight: bold; color: #ffff44; letter-spacing: 0.02em;} 
    .navblocktext1 { font-family: verdana, arial, Helvetica, sans-serif; font-size: 10px; 
    			margin: 0px 00px 0px 00px; padding: 4px 4px 4px 6px; 
    			background-color: #EBE8D8; 
    			border-color: #000000; border-width: 0px; border-style: solid; 
    			line-height: 1.4em; font-weight: 100%; color: 333333; letter-spacing: 0.01em;
    			height: 160px;} 
    A.navblocktext1:visited   {color: #111111; text-decoration: none }
    A.navblocktext1:link      {color: #111111; text-decoration: none }
    A.navblocktext1:active    {color: #111111; text-decoration: none }
    A.navblocktext1:hover     {color: #ffffff; font-weight: text-decoration: none}
    
     
    #container {
    position: relative;
    }
    #left {
    position: absolute;
    top: -2px;
    left: 0px;
    width: 180px;
    }
    #middle {
    margin: 0px 180px 0px 180px;
    height: 200px;
    }
    #right {
    	position: absolute;
    	top: -2px;
    	right: 0px;
    	width: 180px;
    	left: 419px;
    }
    
    ...
    
    
     
     /* *** Float containers fix:
     http://www.csscreator.com/attributes/containedfloat.php *** */ 
    .clearfix:after {
     content: "."; 
     display: block; 
    height: 0; 
     clear: both; 
     visibility: hidden;
     }
     
    .clearfix{display: inline-table;}
    
    /* Hides from IE-mac \*/
    * html .clearfix{height: 1%;}
    .clearfix{display: block;}
    /* End hide from IE-mac */  
    
    
     
     /*printer styles*/ 
     @media print{ 
    /*hide the left column when printing*/ 
    #leftcol{display:none;} 
    
    /*hide the right column when printing*/ 
    #rightcol{display:none;} 
    #twocols, #maincol{width:100%; float:none;}
    }
    Last edited by harlequeen; 12-28-2005 at 08:36 AM.


 

Posting Permissions

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