Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts

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

    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:
    Code:
    #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:
    Code:
    #sidebar p {
    	margin: 15px;
    }
    Both the "sidebar" and "main" divs are in a div with the ID "container" like this:
    Code:
    #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:
    Code:
    #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!!!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    just a quick suggestion, try this ai ur css

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

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    just a quick suggestion, try this ai ur css
    Code:
    * {
    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!...

  • #4
    Banned
    Join Date
    Apr 2007
    Posts
    428
    Thanks
    29
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by ShootingBlanks View Post
    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.

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    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):


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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Images are useless. We need to see your complete HTML and CSS. A link to the site would be better.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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/p...ex.php?catID=1

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Nevermind - I think I may have fixed it. I just changed the #sidebar margin from
    Code:
    margin: 8px 0 8px 8px;
    to

    Code:
    margin: 8px 0 8px 4px;
    Thanks anyway, though!!!

  • #9
    Banned
    Join Date
    Apr 2007
    Posts
    428
    Thanks
    29
    Thanked 5 Times in 5 Posts
    jup! margins are worst nigtmare for IE//FFox issues. Have fun


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •