PDA

View Full Version : Float pushing down content in IE


opel
February 14th, 2006, 06:11 AM
I have encountered a problem in IE where my right hand navigation is pushing the content down to below it, my code works in safari and in Firefox.

Live Page: http://drafts.1stclassmedia.com/mph

I've stripped out all my margins and padding but I cant see what else it owuld be,can anyone help?

XHTML:


<body>
<div id="container">
<div id="sidebar">
<ul>
<h2>Navigation</h2>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Home</a></li>
<li><a href="#" title="home">Home</a></li>
</ul>
</div>
<div id="bodyblock">
<div id="header"><img src="image1.gif" alt="header" /></div>
<div id="navbar">&nbsp;</div>
<div id="advert"><img src="image2.gif" alt="castle" /></div>
<div id="main">
<h1>Header</h1>
<p>Content here</p>
</ul>
</div><!--main-->
</div>
<!--bodyblock-->
<div id="footer"><p>footer her</a></div>
</div><!--container-->
</body>


CSS:

body {
margin:0px;
background:url(../gifs/back.gif) repeat-x #333333;
font-size:62.5%;
text-align:center;
}

#container {
margin-left:auto;
margin-right:auto;
text-align:left;
background:url(../gifs/backctr.gif) repeat-y;
width:800px;
}

#bodyblock {
margin-top:0px;
width:600px;
}

#header {
width:580px;
height:117px;
margin:0px 10px;
padding:0px;
background:url(../gifs/header.gif) no-repeat;
}

#header span {
display:none;
}

/*sidebar*/
#sidebar {
float:right;
margin-top:0px;
text-align:left;
width:200px;
}

#sidebar ul {
padding:0px 5px;
margin-bottom:10px;
}

#sidebar li {
padding: 0px 5px;
list-style-type:none;
}

#sidebar p {
font:1.1em Arial, Helvetica, sans-serif;
padding:0px 10px;
color:#fff;
}

#sidebar a {
font:1.0em Arial, Helvetica, sans-serif;
color:#CCCC99;
text-decoration:underline;
}

#sidebar a:hover {
color:#FFFFFF;
background-color:#CCCC99;
text-decoration:none;
}

#sidebar li a {
font:1.2em Verdana, Arial, Helvetica, sans-serif;
padding:3px;
color:#fff;
border-bottom:1px #CCCC99 solid;
text-align:right;
text-decoration:none;
display:block;
}

# html body #sidebar li a {
width:154px;
padding:2px;
}

#sidebar li a:hover {
background-color:#CCCC99;
color:#000;
text-decoration:none;
}

/*main styling*/

h1 {
font:1.4em Arial, Helvetica, sans-serif;
font-weight:bold;
color:#000;
padding-bottom:2px;
border-bottom:1px dotted #CCCC99;
}

h2 {
font:1.2em Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333;
background:url(../gifs/sidenav.gif) repeat-x;
height:24px;
width:180px;
padding:0.5em 0.2em;
margin:0px 10px;
}

#advert {
width:560px;
height:276px;
padding:0px 20px;
}

#navbar {
width:580px;
height:8px;
border:1px solid #333;
background:url(../gifs/nav.gif) repeat-x;
margin:2px 10px;
}

#main {
width:560px;
margin:5px 0px;
padding:20px;
}

#main p {
font:1.2em Arial, Helvetica, sans-serif;
line-height:1.3em;
color:#333;
text-align:left;
}

#main ul {
font:1.2em Arial, Helvetica, sans-serif;
list-style-type:disc;
}

#main li {
padding:1px 0;
}

#main a {
font:1.2em Arial, Helvetica, sans-serif;
color:#CCCC66;
text-decoration:underline;
}

#main a:hover {
color:#333;
background-color:#cccc99;
text-decoration:underline;
}

#footer {
height:18px;
background:url(../gifs/footer.gif) no-repeat;
clear:right;
width:800px;
}

#footer p {
padding:0px 20px;
font:1.1em Arial, Helvetica, sans-serif;
color:#CCCC99;
}

#footer a {
font:1.0em Arial, Helvetica, sans-serif;
color:#CCCC99;
text-decoration:underline;
}

#footer a:hover {
font:1.0em Arial, Helvetica, sans-serif;
color:#333;
}
thebloodpoolkid
February 14th, 2006, 11:09 AM
Have you validated your code?

http://validator.w3.org/check?uri=http%3A%2F%2Fdrafts.1stclassmedia.com%2F mph

For you CSS, try setting all margins and padding to 0 that way only margins and adding you specify are added.

* {margin: 0; padding:0;}
body {margin: 0; padding:0;}
opel
February 14th, 2006, 11:14 AM
I have done as you suggested but if you look at my page in IE there is still a gap at the top.

Its driving me nuts I've built loads of sites before with this layout, usually they have a header so I just removed the DIV and it doesnt work. THink I've missed something daft!
adman_9000
February 14th, 2006, 11:40 AM
if you put borders around the bodyblock & sidebar divs it helps you see the problem. They are too big (in ie) to fit side by side. You'll have to shrink one or other then you should be fine.
thebloodpoolkid
February 14th, 2006, 11:54 AM
Try as adman suggested. uasually I define inner DIVs width by percentages. so the mainblock and rightbar would occupy percentage of the full 100% of the container.