...

View Full Version : Newbie Layout difficulties - ie & ff



harlequeen
12-27-2005, 03:45 PM
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 (http://www.harlequeen.org.uk/MSI/index.html)

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


<!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


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;}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum