Extra space appearing below DIV element

Brad Bansner
Brad Bansner used Ask the Experts™
on
On this page:
http://beta.rasdalestamps.com/

...I am seeing a small vertical space between the top row of buttons at the photo. It is a DIV with #nav1wrap

I cannot figure out why that space is appearing. Why would it not be flush with the photo below it?

Thank you.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Consultant & Challenge Subduer
Top Expert 2009
Commented:
That's a side-effect from using "display:inline-block" (which is often so very useful). That space is being preserved for descending characters even though there are only white-space characters around that element. Give "vertical-align:top" to "#nav1" to correct that.
Brad BansnerWeb Developer

Author

Commented:
Indeed, that fixes it. Thank you!

I couldn't find a better way to center a <ul> element on the screen, without specifying a width. "display:inline-block" took care of it. "display:inline" didn't do the trick. Unless there is a better way that I'm not aware of.

Thanks again.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial