Can't figure out this CSS "white gap" issue! HELP!

[ShootingBlanks]

Hello. My page looks fine in IE7 & FireFox, but in IE6 there's a big white gap on the page. Here's screenshots of how it should look (in IE7 & FireFox) and then how it shouldn't look (in IE6), and then below it is a description of the CSS code I'm using. Any help would be greatly appreciated. Thanks!!!

IE7/FireFox:


IE6:


That whole category on the right that has the "Business Management" heading and the table is in a div with the ID "main" like this:

#main {
	float: right;
	width: 535px;
	margin: 8px;
}

Then the navigation bar on the left side is in a div with the ID "sidebar" like this:

#sidebar p {
	margin: 15px;
}

Both the "sidebar" and "main" divs are in a div with the ID "container" like this:

#container {
	width: 698px;
	border: 4px double #095AA6;
	background-color: #FFF;
	text-align: center;
	margin: 0 auto;
}

Now, here's kind of another problem. At the top of the page (also within the "container" div) are two more divs with the IDs "header" and "nav". Here's those codes:

#header {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 55px;
	background: url(../images/header.jpg) no-repeat;
	color: #FFF;
}

#nav {
	padding: 0;
	margin: 0;
	height: 17px;
	border-width: 5px 0 5px 0;
	border-color: #FFCC00;
	border-style: solid;
	background-color: #9CBCDA;
	color: #330066;
}

Now, I tried decreasing the "width" attribute in the "main" ID from 535 to 525, and that cleared up the big white gap, but then it left a white gap on the top-right (next to the "header" and "nav"). This is only (again) in IE6, and can be seen in this screenshot:


Any ideas anyone??? Thanks!!!

[BLiZZaRD]

Something you will have to work with in the CSS, an IE hack of some sort.

/* Hide from IE6 \*/
#main
{
	float: none
}
/* End hide */

Or something similar.

P.S. CWoT misses you

[ShootingBlanks]

Something you will have to work with in the CSS, an IE hack of some sort.

/* Hide from IE6 \*/
#main
{
	float: none
}
/* End hide */

Or something similar.

P.S. CWoT misses you

Whoa - BigBLIZZ!!! Haha - funny meeting YOU here!...

Thanks for the tip. But I don't understand how the IE7 browser knows not to read that code? Like, wouldn't that override my default #main float to the right?...

[BLiZZaRD]

I don't know how it works either (and I am about 90% sure that is NOT the right code ) the snippet I posted is from one of CWoT's CSS sheets.

the how's and why's are unknown to me as far as an explanation, but I am sure John or Twey will be along shortly to correct me and explain the how's as well.

in the meantime I will do some more research to get a 100% working code for you.

[ShootingBlanks]

in the meantime I will do some more research to get a 100% working code for you.

Thanks - much appreciated!!!

[BLiZZaRD]

Do you have a link to the page? Works better than asking you to post a ton of codes

[ShootingBlanks]

Do you have a link to the page? Works better than asking you to post a ton of codes

Here ya go, my man....thanks again!:
http://www.shootingblanks.net/TEMP/p...ex.php?catID=1

[BLiZZaRD]

Okay brother not finding much at the moment, but I am also getting ready to go to our football game.

John will probably poke in here in a second and give you an off the top of his head fix that will work flawlessly and take him about 3 seconds to realize. (John and Twey shame me with their knowledge, LOL)

If not, when I get back tonight I will get you an answer.

If you're going to absolutely position something, you should set the
top, left, right and/or bottom properties as well. Suggest you start
with top:0 and left:0 then adjust to taste.

[BLiZZaRD]

Most of what I am coming up with is telling me to change from absolute sizes to percentages.

Container div from px to say 56%or 72%?

main div 85%
and sidebar to 15%

Try changing those and see what we get.

[jscheuer1]

Looks fine to me in IE 6, not like your screen shot. Maybe you fixed it. I can say that the best idea is something like BLiZZaRD's last suggestion, something that can work in all browsers. But, if you have to get browser specific with IE, it is far better to use IE conditional comments than any star (* html, or * with various / and \ characters) or !important hacks, as conditionals are standard, the behavior of hacks may change.