471,599 Members | 1,359 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,599 software developers and data experts.

1px bottom gap with unordered list (firefox 2.0.0.9)

Hi all,

I have a problem with the following _simple_ markup/css. Firefox
(2.0.0.9) renders a one pixel gab underneath the li/a tags. It seems
as if Firefox expands the ul element for that reason.
IE7 and Opera 9.24 have no problems with that.

Any idea how to solve this problem?

thx a lot

Juergen

--- doctype ---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
--- here the style ---
<style>
#masthead{ background: blue; margin:0 ; padding:0 ; }
#masthead ul { list-style:none ; margin:0 ; padding:0 ; text-align:
center;background: red;}
#masthead li { display:inline; background: yellow;}
#masthead a:link,
#masthead a:visited { background: green; text-decoration:none;}
</style>

--- here the markup ---

<div id="masthead">
<ul>
<li><a href='#'><span class='l14'>LADEN</span></a></li>
<li><a href='#'><span class='l15'>EVENTS</span></a></li>
</ul>
</div>
Nov 19 '07 #1
2 2165
In article
<b9**********************************@f13g2000hsa. googlegroups.co
m>,
JuergenRiemer <ju************@gmail.comwrote:
Hi all,

I have a problem with the following _simple_ markup/css. Firefox
(2.0.0.9) renders a one pixel gab underneath the li/a tags. It seems
as if Firefox expands the ul element for that reason.
IE7 and Opera 9.24 have no problems with that.

Any idea how to solve this problem?
Take a look at the essentials (simpler than your markup and css
but shows the "pixel-perfection" problem you perceive. Different
browsers assign slightly different line height instructions. So
fiddle about with the line height at:

http://netweaver.com.au/alt/juergen.html

I have made your containing div have a function (to exhibit its
background) whereas in your code it was not clear what it was
there for. Your spans were not obviously functional either. But
try the above to give you a lead.

Without a line height instruction by the author, different
browsers give quite a few different results. Anyway, play about
and tell me what you decide.

--
dorayme
Nov 19 '07 #2
On 19 Nov., 22:59, dorayme <doraymeRidT...@optusnet.com.auwrote:
In article
<b9c6bd1f-d8bb-4beb-a822-484f10e6d...@f13g2000hsa.googlegroups.co
m>,
[..]
http://netweaver.com.au/alt/juergen.html

Without a line height instruction by the author, different
browsers give quite a few different results. Anyway, play about
and tell me what you decide.
dorayme,

thanks for your hint concerning the line-height attribute.
my tabs now work like a charm!!
thank you a lot!

Juergen

Nov 19 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

19 posts views Thread by A.Translator | last post: by
reply views Thread by Steve Dorsey | last post: by
3 posts views Thread by laredotornado | last post: by
1 post views Thread by laredotornado | last post: by
2 posts views Thread by asc4john | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.