View Full Version : Serious White Space Issues

03-09-2009, 06:21 AM
Seriously annoying the crap out of me!


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!

03-09-2009, 07:06 AM

03-09-2009, 08:31 AM
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?

03-09-2009, 08:39 AM

#nav li {/*default....anced.css (line 9)*/
#nav li ul {/*dropdown.css (line 24)*/
top:47px; /*height of img */

03-09-2009, 09:22 AM
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.

03-09-2009, 12:15 PM
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?

03-09-2009, 01:00 PM
Apply the required height on your anchor elements , and remove all other heights from <li> elements, to avoid the hasLayout issues (http://www.satzansatz.de/cssd/onhavinglayout.html). After that, You may trigger the haslayout by applying height:1%; to them, if necessary.

btw, have you updated your link?

03-09-2009, 01:46 PM
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,
#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
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?

03-09-2009, 02:19 PM
To remove the vertical spacing issue, add

#nav li img{
float: left;
}, see https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

After that follow the steps in my above post and then change

#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/

03-09-2009, 03:25 PM
ahh thanks, another useful link!

#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
#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?

03-09-2009, 04:17 PM
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.

03-09-2009, 06:31 PM
pm sent. Thanks for the help,