CSS & Float Problem

CSS and Float problem between IE and Firefox

[chenry]

I'm having a display issue between Firefox and IE when working with floats. I've looked into the bugs with IE but I cannot figure it out why this will not work, any help would be greatly welcomed! Below is some of the code. If you would like to view the site please head to [survey.gr-webdesigns.com ]

HTML Below:

<div id="site-outline">
 <div id="date-outline"><?php echo date('D j M Y',time()); ?></div>
 <div id="content-main-outline"> 
 <div id="top-middle-outline">Welcome!</div>
 <div id="content-top-outline"></div>
 <div id="content-middle-outline">
 <div id="news-outline">
 <div id="news-top-outline"></div>
 <div id="news-middle-outline"></div>
 <div id="news-bottom-outline"></div>
 </div>
 <div id="content-outline">
 </div>
 <div class="clear"></div>
 </div>
 <div id="content-bottom-outline"></div>
 </div>
</div>

CSS Below:

body {
background-color: #1D1E22;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(/images/header-bg.jpg);
background-repeat: repeat-x;
background-position: left top;
}
#site-outline {
width: 900px;
margin-right: auto;
margin-left: auto;
}
#date-outline {
float: right;
width: 150px;
margin-top: 35px;
font-size: 16px;
color: #CCCCCC;
margin-right: 100px;
}
#top-middle-outline {
float: left;
height: 252px;
background-image: url(/images/top-middle.jpg);
background-repeat: no-repeat;
margin-top: 50px;
font-size: 36px;
color: #FFFFFF;
padding-top: 20px;
padding-left: 200px;
width: 348px;
display: inline;
margin-left: 30px;
}
#news-outline {
float: right;
margin-right: 20px;
margin-top: 5px;
}
#news-top-outline {
background-image: url(/images/news-top.jpg);
background-repeat: no-repeat;
height: 15px;
width: 275px;
}
#news-middle-outline {
background-image: url(/images/news-middle.jpg);
background-repeat: repeat-y;
width: 267px;
padding-right: 4px;
padding-left: 4px;
}
#news-bottom-outline {
background-image: url(/images/news-bottom.jpg);
background-repeat: no-repeat;
height: 15px;
width: 275px;
}
#content-main-outline {
width: 900px;
margin-top: 75px;
display: inline;
}
#content-top-outline {
background-image: url(/images/main-top-bg.jpg);
background-repeat: no-repeat;
height: 20px;
margin-top: 80px;
width: 900px;
}
#content-middle-outline {
background-image: url(/images/main-middle-bg.jpg);
background-repeat: repeat-y;
padding-right: 7px;
padding-left: 7px;
}
#content-outline {
width: 575px;
margin-top: 15px;
float: left;
}
#content-bottom-outline {
background-image: url(/images/main-bottom-bg.jpg);
background-repeat: no-repeat;
height: 30px;
width: 900px;
}
.clear {
clear: both;
margin: 0px;
padding: 0px;
display: inline-block;
}
p {
margin: 0px;
padding: 0px;
}

[chenry]

Does anyone have any ideas about this? I am still not able to make this work on both Firefox and IE.

[csuguy]

Sorry to see that your post got buried :/

Anyways - your code sample shows the problem, but first you have to replace the images with colors so we can see it ;). But dont worry I did that myself - just keep it in mind next time you post. That might have been why people didn't respond. Oh - and you forgot a closing </div> tag in the HTML for site-outline.

It looks like your issue has to do with IE's Box Model. Its structured slightly differently so its a common issue with floats. I went around to any css id that had width:900px (the sites set width) and changed it to 100%. I then increased the width of the site-outline to 1000px. Suddenly - the page was outlined just like your current site (in IE). So to get IE to cooperate you simply need to adjust the paddings/margins of your elements so that they don't exceed 900px.

If you search for 'IE Box Model' I'm sure you'll find lots of information on the subject.

As for FireFox - its funny, your current page displays just like my now working IE page - but when I run the sample code it doesn't look anything like it... weird. Anyways, to adjust JUST IE, use the Holly Hack - which looks like so:

* html body (element or path to element)
{
  ...
}

In IE - there is an element above HTML, but not for any other browsers. So - any CSS starting with "* html body" is going to be automatically ignored by all except IE. So use that to adjust the paddings and margins for all of your elements. I suggest removing all paddings and margins for IE to begin with and then add them in one at a time - so you can see where any problems are.

By doing that - it will stay the same as it is in FF and other browsers and you'll be able to easily mold IE to look just like them.

Ryan