Different <ul><li> behaviours between browsers

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Syl - 28 Nov 2006 20:17 GMT

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><li> element.
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="">Participate</a></li>
                    <li><a href="">Programs & Services</a></li>
                    <li><a href="">Publications</a></li><li><a
href="">StandardsStore.ca</a></li>
                    </ul>
            </div> 
        </div> 

CSS :

#theheader{
    height: 142px;
    background:transparent;
    background: url('singleheader.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;
}

Reply to this Message

mbstevens - 28 Nov 2006 20:56 GMT

> Hello experts!!
>
[quoted text clipped - 5 lines]
> to dislpay "staggered" after the the first <ul><li> element.
> 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 <li> elements. 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.

Reply to this Message

mbstevens - 28 Nov 2006 21:17 GMT

>> Hello experts!!
>>
[quoted text clipped - 29 lines]
> 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.

Reply to this Message

GreyWyvern - 28 Nov 2006 21:29 GMT

And lo, Syl didst speak in
comp.infosystems.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 :
[quoted text clipped - 5 lines]
>
> 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;
[quoted text clipped - 10 lines]
> 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

Signature

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

Reply to this Message

Beauregard T. Shagnasty - 29 Nov 2006 03:27 GMT

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

Signature

-bts
-Motorcycles defy gravity; cars just suck

Reply to this Message

One - 30 Nov 2006 20:20 GMT

> > The top menu navigation bar displays perfectly in IE, but does not
> > display properly in Mozilla or Netscape :
[quoted text clipped - 9 lines]
> 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.

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006

Different <ul><li> behaviours between browsers