Another IE vs Mozilla problem (simple fix?)

[JonW]

Having a hard time getting a navigation bar looking the same in IE and Firefox.

The test html file:

http://jonathanwayne.com/navbar/testnav.html

Main style sheet: http://jonathanwayne.com/navbar/testnav.css

To override properties that are handled differently in IE, I use
http://jonathanwayne.com/navbar/testnav_ie.css

Note how thick the "navspacer" (solid line dividing categories) is in IE. I
can't seem to get it any thinner. The height is defined as 3px, but even if I
make it 1px in the IE css file, it doesn't get any thinner. (I can make it
thicker.)

Easy fix? Dumb mistake? Help greatly appreciated!

jon
--
[e-mail]

[pete]

The gratuitous vert space that IE seems to insert if I mention either
width or height explicitly has looked to me somehow related to
font-size. So to get around the problem, I say:

..navspacer
{
width: 215px;
height: 3px;
font-size: 0;
background-color: #000099;
}

hth -- pete

[Arne]

Once upon a time *p***@pwilson.net* wrote:

The gratuitous vert space that IE seems to insert if I mention either
width or height explicitly has looked to me somehow related to
font-size. So to get around the problem, I say:

.navspacer
{
width: 215px;
height: 3px;
font-size: 0;
background-color: #000099;
}

Why are you writing a new message with the "Re:" in front of the
subject? If you are responding to an other, please read my sig!

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

[kchayka]

pe**@pwilson.net wrote:

The gratuitous vert space that IE seems to insert if I mention either
width or height explicitly has looked to me somehow related to
font-size.

font-size is not the problem. line-height is, combined with IE's broken
default overflow behavior. For example, to set an element height to 1px,
you need to set overflow:hidden to prevent the automatic height
expansion to one full line.

However, you should reconsider the need to define such elements in the
first place. A 1px high element might be better off set via a top or
bottom border property instead. There is always more than one way to
accomplish something. Why code extra elements in HTML when they aren't
really needed?

BTW, either get yourself a real newsreader and dump google groups for
posting to usenet, or learn how to enable quoted replies. Either way,
use accepted posting practices or you may just end up in killfiles
everywhere.
<URL:http://allmyfaqs.com/faq.pl?How_to_post>

Your best bet is to dump google because lots of people already killfile
anything that comes out of it.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[JonW]

On Wed, 27 Jul 2005 10:11:15 -0500, kchayka <us****@c-net.us> wrote:

font-size is not the problem. line-height is, combined with IE's broken
default overflow behavior. For example, to set an element height to 1px,
you need to set overflow:hidden to prevent the automatic height
expansion to one full line.
Thanks. Both the font-size and the overflow suggestions work. I'm using
kchayka's overflow suggestion as it seems more syntactically correct.

http://jonathanwayne.com/navbar/testnav.html
However, you should reconsider the need to define such elements in the
first place. A 1px high element might be better off set via a top or
bottom border property instead. There is always more than one way to
accomplish something. Why code extra elements in HTML when they aren't
really needed?

Using the navspacer class seems more straightforward since as a bottom
border it is sometimes below a category header and sometimes below an item.
Or as a top border it is always above a category except for the top
category, but it's also a bottom border below the bottom category. (In this
example.) So at a minimum, I'd still have to setup additional category
header classes, no?

jon

[kchayka]

JonW wrote:

On Wed, 27 Jul 2005 10:11:15 -0500, kchayka <us****@c-net.us> wrote:

A 1px high element might be better off set via a top or
bottom border property instead. There is always more than one way to
accomplish something. Why code extra elements in HTML when they aren't
really needed?

Using the navspacer class seems more straightforward since as a bottom
border it is sometimes below a category header and sometimes below an item.

FYI, the accepted norm for semantic navigation menu markup, especially
those menus styled via CSS, is a (nested) list. There are plenty of
sites that show how to do it. Google for listamatic or list-o-matic for
several examples. One of those sites even generates some sample code for
you.

In nested list markup you'd likely use a bottom border on the parent
list item, but not the child lists. It's not hard.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.