Layout problem on IE

[nhezito]

Hi there,

I'm having a problem with my layout on IE. The scrolling bars are always there even when you resize the window to fit all content. On firefox it doesn't happen.

At the moment have height: 130% which isn't correct but just for testing purposes so on longer pages the side blue bars don't disapear.

Here is the code:

body {
background: #fff;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}

#main1 {
background: #9bafd4;
left: 50%;
margin-left: -400px;
width: 800px;
position: absolute;
top: 0px;
height: 130%;
}

#main2 {
background: #5275b5;
left: 10px;
width: 780px;
position: absolute;
top: 0px;
height: 100%;
}

And you can preview on http://www.rpaguilar.com/webtest/

Thanks

Ric

[HelloRicky]

I don't think that you should use "height: 100%;". IE and FF use it in different ways.

[pfmac]

I think I have found the solution to your problem. Basically you are positioning your divs absolutely, while not strictly wrong, is causing a few problems.

You need to make a few changes to your stylesheet as follows:
/**/ : are to explain what the changes are doing.

html {height:100%;} /* for FF to stretch the whole page*/
body {
margin:0 auto; /* centers the page*/
background: #fff;
font:normal 11px Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}

#main1 {
background: #9bafd4;
margin:0 auto; /* centers the div*/
width: 800px;
height: 100%;
}

#main2 {
background: #5275b5;
width: 780px;
margin:0 auto; /* centers the div*/
height: 100%;
}

#header {
position:relative; /* helps position logo and add_on divs*/
background: #ffffff;
width: 780px;
margin:0 auto;
height: 91px;
}

#logo {
left: 22px;
top: 30px;
position: absolute;
}

#add1 {
right: 140px;
top: 30px;
position: absolute;
color: #808080;
}

#add2 {
right: 32px;
top: 42px;
position: absolute;
color: #808080;
}

#topnav {
/* no styles needed*/
}

#content {
background: #fff;
width: 780px;
color: #fff;
top: 91px;
/* removed position:relative and top/right values */
}

This solves the scrollbar and cleans up the css a bit.
Let me know if there is anything you don't understand

[Game Makker]

wow someone's in a helpful mood :D

[pfmac]

it was a slow day at work yesterday ;)

[nhezito]

Thanks for the tips pfmac.

Works much better and the absolute positioning was just desnecessary.

Still find that the blue side bars on long pages on Firefox break, not sure why cause on IE it's fine.

[pfmac]

Looking again at your problem I led you down the wrong path. Adding the 100% height to the elements limits their height to the viewport in FF which is why it was cutting off.

To get around this you need to use a background image on the body which will flow the whole length of the browser. Doing this also means you can remove the main2 div.

The background image should be 800px by 5px total colored #5275b5, with 10px on the left and right colored #9bafd4.

Here is the snippet of css:
body {
background:#fff url(main1bg.gif) center top repeat-y;
margin:0 auto; /* centers the page*/
font:normal 11px Verdana, Arial, Helvetica, sans-serif;
}

#main1 {
margin:0 auto; /* centers the div*/
width: 780px;
padding:0 10px;
}

[nhezito]

Thanks pfmac it does work a lot better, even than a temp solution that I came up with which was basicaly a single div wrapping everything.

#main1 {
background-color: white;
width: 800px;
height: auto;
margin: 0 auto 0 auto;
padding: 0;
border-left: 5px #9bafd4 solid;
border-right: 5px #9bafd4 solid;
}

[Game Makker]

I always use at least one div to wrap the site. I find in some cases it can proove to be useful whilst others i don't even touch it besides centralizing designs