...

View Full Version : Serious White Space Issues



jpolo9
03-09-2009, 05:21 AM
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!

twodayslate
03-09-2009, 06:06 AM
Validate

jpolo9
03-09-2009, 07: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?

abduraooft
03-09-2009, 07:39 AM
Try

#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;
}

jpolo9
03-09-2009, 08: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.
-Jesse

jpolo9
03-09-2009, 11:15 AM
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?

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

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

abduraooft
03-09-2009, 01: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/

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

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

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

jpolo9
03-09-2009, 05:31 PM
pm sent. Thanks for the help,
-Jesse



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum