...

View Full Version : Can't figure out this CSS "white gap" issue! HELP!



ShootingBlanks
11-02-2007, 06:15 PM
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!!!

jcdevelopment
11-02-2007, 06:57 PM
just a quick suggestion, try this ai ur css




* {
margin:0
padding:0
}



See what that does....

ShootingBlanks
11-02-2007, 08:30 PM
just a quick suggestion, try this ai ur css

* {
margin:0
padding:0
}
See what that does....

I don't understand what you're suggesting. You want me to add the code above just to the end of my CSS document code? What does that do? Thanks!...

matak
11-02-2007, 08:41 PM
I don't understand what you're suggesting. You want me to add the code above just to the end of my CSS document code? What does that do? Thanks!...

it sets all margins and paddings in your document to 0.
every HTML tag has predefined margins and paddings and with *{margin: 0; padding: 0;} you reset it. you can use it to change the default font, list-style or any other value too. very useful option.

ShootingBlanks
11-02-2007, 09:01 PM
Okay, I added that code to the very end of my CSS document, and here's what it looks like now on IE6 (the big white gap is gone, but that gap on the top-right is still there):
http://www.shootingblanks.net/TEMP/ie6-2.jpg

On IE7 & FireFox, it looks the same as in IE6, except without the white gap on the top-right...

_Aerospace_Eng_
11-02-2007, 10:10 PM
Images are useless. We need to see your complete HTML and CSS. A link to the site would be better.

ShootingBlanks
11-02-2007, 10:13 PM
Images are useless. We need to see your complete HTML and CSS. A link to the site would be better.

Here you go - this is to the page of the site that I've been posting screencaps of, but you can go around all you want. If you need more code or links to the CSS or whatever, just let me know. Thanks!!!:

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

ShootingBlanks
11-02-2007, 10:19 PM
Nevermind - I think I may have fixed it. I just changed the #sidebar margin from

margin: 8px 0 8px 8px;

to


margin: 8px 0 8px 4px;

Thanks anyway, though!!!

matak
11-03-2007, 02:28 AM
jup! margins are worst nigtmare for IE//FFox issues. Have fun :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum