Nav button showing differently in Browsers

[Romuba]

I have set up some navigation buttons use CSS but when I check in the various browsers they display very differently and I can't fathom why. Everyone loves Firefox but for me it is a pain in this instance.

This is the CSS I have coded:

#leftside ul.topics {
list-style: none;
color: #ffffff;
text-decoration: none;
margin-left: 10px;
margin-right: 10px;
line-height: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#leftside ul.topics li {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: url(../images/nav_buttons_1.gif) no-repeat;
text-align: left;
display: block;
color: #FFFFFF;
text-decoration: none;
padding-left: 15px;
padding-top: 0px;
}
#leftside ul.topics li a:link {
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
margin-top: 5px;
}
#leftside ul.topics li a:visited {
color: #C0DCC0;
text-decoration: none;
}
#leftside ul.topics li a:active {
color: #000000;
text-decoration: none;
background: url(../images/nav_buttons_1_active.gif) no-repeat;
display: block;
}
#leftside ul.topics li a:hover {
font-size: 100%;
color: #FFFF00;
text-decoration: none;
}

I have attached pics of what I have. First is what it looks like in Dreamweaver, then in IE7, then Firefox, then Firefox with text enlarged and lastly Netscape.

[karinne]

Your attachments are pending approval so ... in the meantime ... could you provide a link so we can actually see what's going on?

[Romuba]

Sure - http://www.denvor.bartwebsites.com/

It is still very much in development but I am frustrated with the look of these buttons in Firefox and Netscape. Also shows correctly in Maxthon.

[karinne]

Try adding a height: 36px; to #leftside ul.topics li

You'll have to play with padding to center your text vertically an adjust the height to compensate to that but ... that should get your bubble background to show up..

[Romuba]

Great stuff - problem solved immediately.

You can see how green I am with CSS - but I love it. I really think it is the way to go and not table for websites.

I must admit for a "little" girl (your avatar) you are very good. You will be the world's best developer when you grow up

Thank you again for the prompt solution.

[karinne]

Thank for the compliment

Problems like this are very common when starting out with CSS ... I make them even now sometimes

[SRD]

In your <h4>Denvor has been writing songs since 1983</h4> the text doesn't drop a line as the screen reduces widthways making the first words impossible to read.

[Romuba]

Thank you very much SRD I was so focussed on the buttons that I never noticed it. I will now have to fugure out why and what to do to solve the problem.