Different <ul><li> behaviours between browsers

[Syl]

Hello experts!!

The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html

For some reason the non-IE browers are forcing the top navigation menu
to dislpay "staggered" after the the first <ul><lielemen t.
Can anyone see why this is happening ?

Any guidance is very appreciated.

HTML :
<div id="theheader" >
<div id="topbutton" >
<ul>
<li id="current">< a href="">Home</a></li>
<li><a href="">About the SCC</a></li>
<li><a href="">NSS</a></li>
<li><a href="">News & Events</a></li>
<li><a href="">Partici pate</a></li>
<li><a href="">Program s & Services</a></li>
<li><a href="">Publica tions</a></li><li><a
href="">Standar dsStore.ca</a></li>
</ul>
</div<!-- end top button -->
</div<!-- end the header -->

CSS :

#theheader{
height: 142px;
background:tran sparent;
background: url('singlehead er.gif') no-repeat;
width: 744px;
border: none;
}

#topbutton {
width: 620px;
height: 40px;
padding-left: 160px;
padding-top:30px;
margin-bottom: 0.5em;
margin-left: 0em;
font-family: 'Geneva', 'Arial', sans-serif;
font-variant: small-caps;
font-size: 10px;
text-align: center;
border: none;
}

#topbutton ul {
margin: 0;
padding: 0;
border: none;
list-style: none;
}

#topbutton li {
color: #000;
background: transparent;
display: inline;
border: none;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}

#topbutton li a {
float: left;
width: 70px;
height: 25px;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
color: #000;
background-color: transparent;
text-decoration: none;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}

html>body #topbutton li a {
float: left;
width: 70px;
height: 25px;
}

#topbutton li a:hover {
border: 1px solid rgb(224,224,224 );
color: #000;
background: transparent;
display: inline;
padding-right: 1px;
padding-left: 1px;
padding-top: 2px;
padding-bottom: 20px;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}

#topbutton li a:current {
border: 1px solid #ccc;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
background-color: transparent;
color: #000;
font-variant: small-caps;
font-size: 10px;
font-style: bold;
font-family: 'Geneva', 'Arial', sans-serif;
}

[mbstevens]

On Tue, 28 Nov 2006 12:17:41 -0800, Syl wrote:

Hello experts!!

The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html

For some reason the non-IE browers are forcing the top navigation menu
to dislpay "staggered" after the the first <ul><lielemen t.
Can anyone see why this is happening ?

<li id="current">< a href="">Home</a></li>

#topbutton li a:current {
border: 1px solid #ccc;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
background-color: transparent;
color: #000;
font-variant: small-caps;
font-size: 10px;
font-style: bold;
font-family: 'Geneva', 'Arial', sans-serif;
}
Is there any reason you feel you need to style 'Home' separately from the
other list members? Except for its position it looks exactly the same to
me on the page in Firefox. If you _must_, let it inherit or default
everything except the specific things you want to make different from the
other <lielements. You can more easily tell you didn't change something
that would alter the position it displays from the way the other <li>'s
display.

[mbstevens]

On Tue, 28 Nov 2006 20:56:20 +0000, mbstevens wrote:

On Tue, 28 Nov 2006 12:17:41 -0800, Syl wrote:

>Hello experts!!

The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html

For some reason the non-IE browers are forcing the top navigation menu
to dislpay "staggered" after the the first <ul><lielemen t.
Can anyone see why this is happening ?

<li id="current">< a href="">Home</a></li>

#topbutton li a:current {
border: 1px solid #ccc;
padding-right: 2px;
padding-left: 2px;
padding-top: 2px;
padding-bottom: 20px;
background-color: transparent;
color: #000;
font-variant: small-caps;
font-size: 10px;
font-style: bold;
font-family: 'Geneva', 'Arial', sans-serif;
}
Is there any reason you feel you need to style 'Home' separately from the
other list members? Except for its position it looks exactly the same to
me on the page in Firefox. If you _must_, let it inherit or default
everything except the specific things you want to make different from the
other <lielements. You can more easily tell you didn't change something
that would alter the position it displays from the way the other <li>'s
display.

Well, that, and the fact that you have given the li the id 'current', but
only have a style for 'li a current' -- unless I've missed it somewhere in
my quick reading.

[GreyWyvern]

And lo, Syl didst speak in
comp.infosystem s.www.authoring.stylesheets,alt.www.webmaster:

Hello experts!!

Don't be cute; you already know you'll find naught but layabouts here.

The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html

For some reason the non-IE browers are forcing the top navigation menu
to dislpay "staggered" after the the first <ul><lielemen t.
Can anyone see why this is happening ?

Any guidance is very appreciated.

First off, I will say that I found your problem. However, before I get to
that, I'll also say that correcting it is just putting a patch on the
greater problem of your CSS margin/padding addiction.

Margins and paddings are nice, but they must be used *sparingly*. A basic
example: if you are going to enclose one block within another, don't half
the padding and give half to each block. Instead, apply *all* of the
required padding to just one block. This keeps inline-element padding and
margin-collapse inconsistancies across platforms to a minimum.

You need to review this stylesheet and start minimising. Keeping things
simple will not only help you edit the code easily in the future, but will
also assist those whom you ask to debug for you.

With that said, the answer:

#topbutton li {
color: #000;
background: transparent;
display: inline;
border: none;
padding-right: 2px; /* Remove this or set to 0px; */
padding-left: 2px; /* Remove this or set to 0px; */
padding-top: 2px;
padding-bottom: 20px;
font-size: 10px;
font-style: bold;
font-variant: small-caps;
font-family: 'Geneva', 'Arial', sans-serif;
}

Why is the left and right padding causing this strange error in Firefox?
Who can say with all the other mish-mashed paddings and margins in there.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com/orca#search - Orca Search: Full-featured
spider and site-search engine

[Beauregard T. Shagnasty]

Syl wrote:

The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html

I would debate "perfectly" . The text is so small, there is no chance I
can read it.

Drop the 0.6em and the 10px stuff, and use percentages - 100% - for font
size. In Firefox, I need to press Control-Plus about three times, and in
IE, to adjust to Larger, and when I do you layout falls apart.

Since you've not assigned a background color to body, I see my default
purple...

--
-bts
-Motorcycles defy gravity; cars just suck

[One]

Beauregard T. Shagnasty wrote:

Syl wrote:

The top menu navigation bar displays perfectly in IE, but does not
display properly in Mozilla or Netscape :
http://checkeredshirt.com/textonly.html

I would debate "perfectly" . The text is so small, there is no chance I
can read it.

Drop the 0.6em and the 10px stuff, and use percentages - 100% - for font
size. In Firefox, I need to press Control-Plus about three times, and in
IE, to adjust to Larger, and when I do you layout falls apart.

Since you've not assigned a background color to body, I see my default
purple...

Thank you very much for your comments and advice.

It is appreciated.