Another IE vs Mozilla problem (simple fix?)

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

JonW - 27 Jul 2005 01:59 GMT

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

Signature

jw@nospamforme.com

Reply to this Message

pete@pwilson.net - 27 Jul 2005 11:33 GMT

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

Reply to this Message

Arne - 27 Jul 2005 11:46 GMT

> The gratuitous vert space that IE seems to insert if I mention either
> width or height explicitly has looked to me somehow related to
[quoted text clipped - 7 lines]
> 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!

Signature

/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.

Reply to this Message

kchayka - 27 Jul 2005 16:11 GMT

> 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.

Signature

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

Reply to this Message

JonW - 27 Jul 2005 18:41 GMT

>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

Reply to this Message

kchayka - 27 Jul 2005 23:37 GMT

>> 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
[quoted text clipped - 3 lines]
> 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.

Signature

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2005

Another IE vs Mozilla problem (simple fix?)