Problem with DIVs in IE and FF

[dohmen]

Hi y’ll

Have been working on a CSS (where I have not much experience in used to tables) template for a design today, and have been testing it in FF 3 and IE 7, and so far have been struggling to get one thing to work correctly in both (actually IE 7 is doing what I want to happen). Here are some screens

IE 7 how I want it: http://img247.imageshack.us/my.php?image=ie7vb9.jpg

FF how I don’t want it: http://img300.imageshack.us/my.php?image=ffwm8.jpg

And here is to code that is screwing me over :P

The HTML file

Code:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pellentesque, ligula in eleifend faucibus, felis risus hendrerit nisl, sed posuere dolor felis ornare dui. Nullam blandit risus feugiat mi. Quisque euismod leo eget arcu. Nullam dictum odio vel augue. Vivamus nulla massa, porttitor vel, faucibus a, sagittis facilisis, nisl. Sed adipiscing molestie nisi. Suspendisse tempus sodales turpis. Nunc varius adipiscing felis. Fusce volutpat rhoncus est. Donec nulla dui, gravida et, malesuada eu, vulputate vel, urna. Sed sem arcu, dignissim id, lobortis nec, eleifend vel, libero. Donec egestas, ligula quis vulputate lacinia, enim eros varius tortor, a hendrerit nunc nibh et nisi. Sed dignissim aliquam lectus. Ut enim. Praesent enim metus, mollis ac, sollicitudin ac, vestibulum eu, velit. Nunc dapibus neque eu lorem. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin pellentesque, ligula in eleifend faucibus, felis risus hendrerit nisl, sed posuere dolor felis ornare dui. Nullam blandit risus feugiat mi. Quisque euismod leo eget arcu. Nullam dictum odio vel augue. Vivamus nulla massa, porttitor vel, faucibus a, sagittis facilisis, nisl. Sed adipiscing molestie nisi. Suspendisse tempus sodales turpis. Nunc varius adipiscing felis. Fusce volutpat rhoncus est. Donec nulla dui, gravida et, malesuada eu, vulputate vel, urna. Sed sem arcu, dignissim id, lobortis nec, eleifend vel, libero. Donec egestas, ligula quis vulputate lacinia, enim eros varius tortor, a hendrerit nunc nibh et nisi. Sed dignissim aliquam lectus. Ut enim. Praesent enim metus, mollis ac, sollicitudin ac, vestibulum eu, velit. Nunc dapibus neque eu lorem. Aliquam erat volutpat.

The CSS file

Code:

@charset “utf-8”;
/* CSS Document */

* {
margin: 0;
padding: 0;
border: 0;
}

html, body {
background: url(img/background.jpg) repeat-x;
background: #3d4959;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
height: 100%;
}

div#sitewrap {
margin: 0 auto;
background: #FFFFFF;
padding: 0px;
width: 1000px;
z-index: 1;
}

div#header {
height: 200px;
width: 1000px;
background:#666666;
}

div#content {
background:#FFFFFF;
width:980px;
padding: 10px;
position: relative;
}
div#content p{
font-size:12px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
color:#666666;
padding:5px;
}

div#left_part{
background: #CCCCCC;
position: relative;
float:left;
padding: 5px;
width: 760px;
}

div#right_part{
background: #999999;
position: relative;
float: right;
padding: 5px;
width: 200px;
}

div#bottom {
width: 1000px;
height: 50px;
background:url(img/bottom.png) no-repeat;
margin: 0px auto;
}

div#bottom_fade {
width: 100%;
height: 50px;
z-index: 99;
position: fixed;
bottom: 0%;
background:url(img/fadebottom.png) repeat-x;
}

Anyone know how I can make it work correctly in FF to (meaning getting the white background behind the floated divs and the round bottom under them)?

[dohmen]

Got it fixed with someone else’s help added a div after them that does a clear :)

[Author]

Posts