1px bottom gap with unordered list (firefox 2.0.0.9)

JuergenRiemer

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

Subscribe Post Reply

2246

dorayme

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

JuergenRiemer

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

Similar topics

bottom padding or margin in ul?

by: A.Translator | last post by:

I have an unordered list as menu and want some space at the bottom, underneath the last <li>. I have tried: setting bottom-margin to ul setting bottom-margin to containing <div> setting padding...

HTML / CSS

Unordered lists - indentation woes in MSIE Mac

by: Steve Dorsey | last post by:

Hello I'm creating an unordered list which will be used as a nav element on my page. I am using the following CSS: #nav { position:relative; left:10px;

HTML / CSS

Unwanted red line, margins, bottom page margin, em sizes bad, menu item grouping

by: Edward | last post by:

I created a simple CSS layout (code and example below) for bloggin/writing but ran into five issues that I need help with: 1. How do I get rid of the right-margin red line on the last three...

HTML / CSS

customizing unordered lists

by: laredotornado | last post by:

Hi, On both Firefox and IE, how can I replace the bullets before unordered list items, with double arrows ">>" throughout my site? Thanks, - Dave

HTML / CSS

keeping unordered list items on the same line

by: laredotornado | last post by:

Hi, Is there a cross-browser way to keep the items of an unordered list on the same line (horizontal plane)? This is the code I'm working with <ul class="tabs-nav"> <li class=""...

HTML / CSS

Space between bullet and text in li tag (unordered list)

by: knkk | last post by:

Hi, I need to be able to reduce the default space between a bullet and the text that follows it. After searching all and sundry, I came up with the following CSS, that unfortunately does not work...

HTML / CSS

IE problem with unordered list

by: webhead | last post by:

I have a website at This Link which contains some unordered lists at the right. The news headlines list has the first item appearing normally, but all the other items are pushed over to the right....

HTML / CSS

Margin-bottom of last child in overflowed block is not rendered

by: GTalbot | last post by:

Hello fellow authoring.stylesheets colleagues, Can someone please explain why the bottom margin of the last inflow block-level child in an overflowed parent should not have its margin reachable....

HTML / CSS

unordered list

by: asc4john | last post by:

When including an unordered list in an unordered list: Should it be included as a "list" item as in: <ul><liitem</ li><ul.... </ul<liitem</li</ul> or included in the LI element as in:...

HTML / CSS

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General