Page 1 of 3 123 LastLast
Results 1 to 10 of 21

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

  1. #1
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

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

    Code:
    /* Hide from IE6 \*/
    #main
    {
    	float: none
    }
    /* End hide */
    Or something similar.

    P.S. CWoT misses you
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    Something you will have to work with in the CSS, an IE hack of some sort.

    Code:
    /* 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?...

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    in the meantime I will do some more research to get a 100% working code for you.
    Thanks - much appreciated!!!

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Do you have a link to the page? Works better than asking you to post a ton of codes
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by BLiZZaRD View Post
    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

  8. #8
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  9. #9
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    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.
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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