100% taking more then 100% per browser

[kwhubby]

Hello, I am scratching my head trying to figure out what is going on. I have a calandar page on a website that is malfunctioning either in internet explorer or mozilla firefox depending on a very small change. The page will fit properly in only one brower depending on a specific line (line 36 if i make width 100% in <div id="bod">) it will either properly take up the window size or it will take up a bit more and make an annoying horizontal scroll bar. The page is http://www.carmelyouth.com/cal2/ this is from a php calandar called ltw calandar, and it took a bit of tinkering to get my navigation bar to function properly with it. I had it working flawlessly earlier until something got corrupt and i had to completely reinstall the calandar and put the navigation code in. Any help is greatly appreciated.
Thanks

[kwhubby]

BUMP. yea its been a while since i posted this but it still is a problem I haven't solved yet.

[wickford]

Hi kwhubby,

Try changing the following rules in your CSS.

body, html {
height: 100%;
margin: 0px;
padding: 0px;
}

body {
background-image: url('background.gif');
background-repeat: repeat-y;
background-position: left top;
}

div#side {
background-color: #4AADAD;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
width: 170px;
}

div#bod {
height: 100%;
width: auto;
padding-left: 170px;
}

[kwhubby]

Thanks! that works. The "bod" div part was the key. It's interesting that the height has something to do with it, as without the height being 100% the padding change does nothing.

[mrruben5]

You should apply the universal selector hack here. The right way to give it 100% is feeding browsers a min-height of 100%. As IE interprets overflow:visible (wich is standard) wrong you can feed it with a height of 100%.body, html {
height: 100%;
margin: 0px;
padding: 0px;
}

body {
background-image: url('background.gif');
background-repeat: repeat-y;
background-position: left top;
}

div#side {
background-color: #4AADAD;
min-height: 100%;
position: absolute;
top: 0px;
left: 0px;
width: 170px;
}

/*IE win only. not mac \*/
* html div#side {
height: 100%
}
/*end for IE*/

div#bod {
min-height: 100%;
width: auto;
padding-left: 170px;
}

/*IE win only. not mac \*/
* html div#bod {
height: 100%
}
/*end for IE*/IE 7 is not going to read those properties and does support min-height.

[kwhubby]

thanks again :thumbsup: I just put in those further changes