Forum Moderators: not2easy
In IE8, something weird is happening...
i get this extra 50px or so (not exactly sure how much) added to the right, that makes the page need to scroll to the right.....
and i can not figure out what the heck is wrong...
********************css***************************
html {
font-family: Arial, sans-serif;
height:100%;
}body{
margin: 0;
padding: 0;
font-size: 12px;
height:100%;
min-width:995px;
background:url(/_images/body-bg.jpg) top center no-repeat;}
#container {
width:995px;
margin: 0 auto;
padding: 0;
min-height:100%;
position:relative;
background:#fff;
}/* IE6 */
* html #container {
height:100%;
}#innerContainer {
width:985px;
min-height:100%;
padding:5px;
margin:0 0 50px 0;
float:left;
}.header {
clear:both;
}* a, * a:link, * a:active, * a:visited {
text-decoration: underline;
color: #002d4d;
}#nav{
width:985px;
height:150px;
padding:0;
margin: 0 auto;
margin-bottom:5px;
background:#fff url(/_images/nav-bg.jpg) top center no-repeat;}
.leftcol {
width: 190px;
float:left;
padding: 0 10px 0 0;
}
.centercol-home {
float: left;
width: 780px;
padding:0 0 50px 5px;
}#footer-wrap {
clear:both;
}.footer {
width:995px;
margin:0 auto;
text-align: center;
bottom:0;
padding:5px 0 5px 0;}
<body><div id="container">
<div id="innerContainer"><div class="leftcol">
</div><!--/leftcol-->
<div class="centercol-home">
</div><!--/maincol-->
</div><!--/centercolHome-->
</div><!--/innercontainer-->
<!--#include virtual="/_includes/home_footer.asp"-->
</div><!--/container-->
</body>
and sorry but there's not quite enough HTML there to recreate the issue.
There is a closing div for "maincol" which seems to be an orphan, where does the opening div go?.. and you should really give the generated HTML for the footer as opposed to the virtual include so we can see how the footerwrap and footer divs are laid out, though I guess it's .footer nested inside #footerwrap
Thanks
Suzy
the orphan tag is not there... disregard that.
<div id="footer-wrap">
<div class="footer">
<ul>
<li>stuff here</li>
</ul>
</div>
</div>
and if i didnt clarify, it seems to only happen in a 1024x768 resolution, when i set my monitor to 1280x1024 it looks just like the Mac, perfect.
happens in ie7 too.
first step. i have my monitor set to 1280x1024. check.
then i open a browser with this page on it. and minimize it to a size of about 500x500 centered on the page.
when i start to drag and expand it to stretch the width just as i start to get past 995px, the specified with of my main content area in the CSS, the content are stays in teh center....
as i would suspect, as i have it set to margin:0 auto; which if i am correct centers that conent area.
but the body background image does not. even though i have it set to top center no-repeat....
what i can see is the content area slide pas the center of the background image...
its like IE is adding the right scrolling becuase its taking into consideration the width of the background image on the body?
i dont know... .its weird... the background image, and container are not jiving when they shoudl be centered.
problem resolved.
