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:
http://www.shootingblanks.net/TEMP/ie7.jpg

IE6:
http://www.shootingblanks.net/TEMP/ie6.jpg

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:
http://www.shootingblanks.net/TEMP/whitegap.jpg

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 :D

[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 :D

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 :D

[ShootingBlanks]

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

Here ya go, my man....thanks again!:
http://www.shootingblanks.net/TEMP/php/SalesRepository/categoryIndex.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.

[BLiZZaRD]

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.

is that like <! if !IE>comment stuff here<end if!> or what do you mean exactly?

I usually can find CSS stuff to make anything cross browser capable but this white space problem didn't turn up much for me.

[jscheuer1]

is that like <! if !IE>comment stuff here<end if!> or what do you mean exactly?

I usually can find CSS stuff to make anything cross browser capable but this white space problem didn't turn up much for me.

Two separate issues. The conditional comments have been a staple of documented IE browser code since version 5. Getting rid of unwanted white space is a specific issue. When I viewed the page in IE 6, it didn't have all that extra space though.

Getting back to the conditional comments. The most basic is:


<!--[if IE]>
Whatever is here, will only be parsed by IE 5+.
It can be text, style, javascript, anything.
All others see it only as a comment.
<![endif]-->

But, you can get version specific:


<!--[if IE 7]>
Only IE 7 will see this
<![endif]-->

Make an inclusive:


<!--[if gte IE 5.5]>
IE 5.5 and up will get this
<![endif]-->

or exclusive:


<!--[if lt IE 7]>
Must be less than IE 7 to get this,
greater than or equal to IE 5 is implied,
as it is with most conditionals
<![endif]-->

range. I will leave it here for now but, you might want to look into nesting the comments at some point and investigating the utility of 'down level' conditional comments as well. I have a post that touches on both of those in the tips section of the forum.

I even recently found a way to include a conditional comment conditionally, but I think that must be non-standard, as I've never seen it documented:


<!--[if gte IE 7]><![if !IE]><![endif]--><td class="sb_cont" colspan="2" rowspan="2">
<!--[if gte IE 7]><![endif]><td class="sb_cont" colspan="2"><![endif]-->

Guess what that does . . . you don't want to know.

[ShootingBlanks]

Make an inclusive:


<!--[if gte IE 5.5]>
IE 5.5 and up will get this
<![endif]-->

or exclusive:


<!--[if lt IE 7]>
Must be less than IE 7 to get this,
greater than or equal to IE 5 is implied,
as it is with most conditionals
<![endif]-->


I added the following above the </head> tag of the .php page:

<!--[if lt IE 7]>
<style type="text/css">
#main {
width: 490px;
}
</style>
<![endif]-->

And nothing changed in IE6 or IE7.

Any other ideas? Did I put this code in the wrong place?

[boogyman]

did you clear your cache? (temporary internet files)

[ShootingBlanks]

did you clear your cache? (temporary internet files)

Yeah. In fact, there were other (just text) changes to the page, and those all updated, so I know the page got refreshed.

Here's the link - you can view it on IE6 and IE7 (or IE6 and FireFox) to see the difference still:

http://www.shootingblanks.net/TEMP/php/SalesRepository/categoryIndex.php?catID=1

I got rid of the big white gap by using "display:inline;" on the #sidebar, but now on IE6 there's a white gap at the top right (like the last picture in my original post). It's fixed in IE6 by lowering the #main width, but it looks awkward in IE7/FireFox, so that's what I was trying to do.

[BLiZZaRD]

Guess what that does . . . you don't want to know.


Looking at it logically it seems to say "Hay if you are IE 7 or later read this, unless you are another browser all together, in which case you need to read this anyway, okay now that you read this, if you are IE 7+ do something else with it, otherwise do wat you need to do"

which I guess is more ill-logical than logical. :D




I got rid of the big white gap by using "display:inline;" on the #sidebar, but now on IE6 there's a white gap at the top right (like the last picture in my original post). It's fixed in IE6 by lowering the #main width, but it looks awkward in IE7/FireFox, so that's what I was trying to do.


I am not on a Windows machine, but it looks fine in FireFox now, the white gap in the top is gone. And you say it is fine in IE 6-, so now the only problem is white gap top right in IE7?

[ShootingBlanks]

I FOUND A FIX!!!

I added "display:inline;" to both the #main and the #sidebar, and everything seems to be okay!

Thanks for all the advice and help, though!!!
:p

[jscheuer1]

I even recently found a way to include a conditional comment conditionally, but I think that must be non-standard, as I've never seen it documented:


<!--[if gte IE 7]><![if !IE]><![endif]--><td class="sb_cont" colspan="2" rowspan="2">
<!--[if gte IE 7]><![endif]><td class="sb_cont" colspan="2"><![endif]-->

I don't know why I was so cryptic about this last one, what it does is, if you are IE 7 (and up, though there aren't any yet), you render:


<td class="sb_cont" colspan="2">

if you are any other browser:


<td class="sb_cont" colspan="2" rowspan="2">

The way this works is that the first <!--[if gte IE 7]> opens a zone where only IE 7 and up sees. All that's in there is <![if !IE]> which begins a zone that says no IE may read the following. The first <![endif]--> closes the IE 7 and up zone, leaving in force for that browser the 'don't read if you are IE' that was opened within it. Other IE's can therefore read <td class="sb_cont" colspan="2" rowspan="2">, as can all other browsers. The next <!--[if gte IE 7]> opens another zone of IE 7 and up only. Its first order of business is to close <![endif]> the 'no IE at all' zone that was previously opened only for IE 7 and up. Next, while still excluding others, we have the code <td class="sb_cont" colspan="2"> IE 7 and is meant to use. Then finally the closing of the second IE 7 only zone <![endif]-->. I told you that you didn't want to know.

This is all undocumented, so may not work in later IE versions, but it certainly works now for IE 7. I had thought though that even IE 7 might see the first <![endif]--> as only closing the no IE zone. Thankfully this was not the case, because I needed a way to do what I did that would also validate, the above fit both bills.

[BLiZZaRD]

That is still pretty cool though :D

[boogyman]

hey john thats a interesting solution.

I am going to assume that the IE7+ end IE7+ is mandatory for some reason only IE could possible explain? because to me that looks just like redundant code.

[jscheuer1]

I was wondering, maybe what really happens (for IE 7) is:


IE 7+ only zone is opened
no IE at all zone is opened
since IE isn't allowed to be looking, it doesn't see the first endif or td
another IE 7+ zone is opened, now it can look again
it sees an end to the no IE at all zone and the td it is meant to parse
the last endif closes one of the open IE 7+ only zones, but since this is IE 7+, it doesn't matter that the other one is still open, the browser keeps on parsing.


Still, I think it is:


IE 7+ only zone is opened
no IE at all zone is opened
IE 7+ only zone is closed, no IE at all is still in effect, the 1st td is ignored
IE 7+ only zone is opened
no IE at all zone is closed, td is parsed
IE 7+ only zone is closed, back to normal


The reason I think that is because in my page where this is taken from, I do it four times, if zones were being left open, I think things would have gotten messed up, maybe not. Testing may or may not be possible to determine which it actually is.