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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Serious White Space Issues

    Seriously annoying the crap out of me!

    http://norcaldesigns.com/sundance/default.html

    My problem is that under the main navigation bar there is 3px of space that should not be there and I cannot figure out why.

    Any ideas would be awesome!
    Last edited by jpolo9; 03-09-2009 at 11:52 AM.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Validate
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts
    lol, thats what i get after spending hours to solve some annoying white space issue, an alt attribute in my link element. But that did not solve my problem. Any ideas?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #nav li {/*default....anced.css (line 9)*/
    margin:0;
    padding:0;
    position:relative;
    }
    #nav li ul {/*dropdown.css (line 24)*/
    background-image:url(../images/dropDown.jpg);
    left:-999em;
    margin:0;
    padding:0;
    position:absolute;
    top:47px; /*height of img */
    width:170px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jpolo9 (03-09-2009)

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts
    When I fixed the header image from floating under the flash i found out that the white space problem was consistent across all browsers.
    @ abduraooft: Thanks, your code helped me to get rid of the white space! I just wish I knew why it was present in the first place. I can not find out what forced the issue, but nonetheless I am more than happy that it is finally gone.
    -Jesse

  • #6
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts
    There still seems to be a problem with the positioning in IE.

    I think the extra white space is created by the span dropdown. In IE there is a 4 px gap when you roll over the drop down menu.

    Also when i remove the height of #nav li the white space is only an issue in IE now and not in FF or chrome.

    Any ideas?

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Apply the required height on your anchor elements , and remove all other heights from <li> elements, to avoid the hasLayout issues. After that, You may trigger the haslayout by applying height:1%; to them, if necessary.

    btw, have you updated your link?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jpolo9 (03-09-2009)

  • #8
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks, I am still a bit confused on the whole haslayout issue, I will have to reread the link you sent a few times but now at least I know what it is in my IE developers toolbar!

    I fixed my white space issue by removing,
    Code:
    #nav li {vertical-align: midddle;}
    Any idea why vertical-align would cause white space? or is this still part of the haslayout issue with IE?

    I removed all of the set heights and it works great except in IE where my dropdown has gone 'wheres waldo' and does not show up. The link is updated.

    If I add
    Code:
    span.nav1:hover,
    span.nav1.sfhover {
    	color: #ffffff;
    	font-style: italic;
    	background-color: #38ad78;
    	font-size: 14px;
    	line-height: 16px;
    	height: 47px;
    }
    then my nav shows up in IE but it is pushed halfway to the right of the <li> that it should be directly under. My <li> elements haslayout looks to be true (set to -1 in IE developer toolbar) but my <span> & <a> elements haslayout does not seem to be set to true. Any ideas?
    Last edited by jpolo9; 03-09-2009 at 01:00 PM.

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    To remove the vertical spacing issue, add
    Code:
    #nav li img{
    float: left;
    }
    , see https://developer.mozilla.org/en/Ima...ysterious_Gaps

    After that follow the steps in my above post and then change
    Code:
    #nav li:hover ul,
    #nav li li:hover ul,
    #nav li.sfhover ul,
    #nav li li.sfhover ul{ /* lists nested under hovered list items */
    	left: 0;
    }
    PS: to make your drop down work in IE6, add the small javascript snippet provided in http://htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    jpolo9 (03-09-2009)

  • #10
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts
    ahh thanks, another useful link!

    changing
    Code:
    #nav li:hover ul,
    #nav li li:hover ul,
    #nav li.sfhover ul,
    #nav li li.sfhover ul {left:0;}
    fixed the alignment.

    I added back in
    Code:
    #nav li ul{ top:47px;}
    which I forgot I removed whilst testing on accident.

    Thanks for all of your help! BTW are you a mod here or do you get any sort of monetary reimbursement for all of your help or do you help people because you like to and are very knowledgeable?

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Haha... none of the above. Helping others help me to learn a lot of things everyday, which really helps me to improve my quality of work. In fact I learned a lot from the posts and links provided by other knowledgeable/senior members of CF. With that said you can donate a few bucks to my paypal account, if you are interested

    PS: You need to add some good alt attributes to your images, to help people who blocked/-have no way to get- images in their browser.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Regular Coder
    Join Date
    Apr 2005
    Posts
    114
    Thanks
    14
    Thanked 0 Times in 0 Posts
    pm sent. Thanks for the help,
    -Jesse


  •  

    Posting Permissions

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