Background Image align in Firefox vs IE

Posted on 2007-12-06
Last Modified: 2007-12-06

It's a very simple text based menu, but when a menu item is active, I want to display a little triangle under the text.

I have the following CSS, which works perfectly fine in IE but fails in Firefox. In firefox, the image leaves about 5px at the bottom as well.

Pleeeeeeease Help!



	border: 0;

	margin: 0;

	padding: 0;

	list-style-type: none;


#navlist li


	width: 90px;

	height: 20px;

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	text-align: center;		


	display: block;


 	color: #999999;


	padding-top: 5px;

        /* For Testing ONLY */



#navlist a:link, #navlist a:visited


	color: #999999;

	text-decoration: none;


#navlist a:hover


	color: #99CCFF;

	text-decoration: none;


body#home a#homeActive,

body#products a#prodActive,

body#sizing a#sizeActive,

body#myAccount a#accActive,

body#about a#aboutActive,

body#contact a#contActive


	text-decoration: none;




	height: 20px;


Open in new window

Question by:jset_expert
  • 2
  • 2
LVL 29

Accepted Solution

Göran Andersson earned 250 total points
ID: 20424572
As always, if the page renders differently in Firefox and IE, Firefox is correct...

If you don't put display:block on the links, they are inline elements. Inline elements doesn't have a specific size, so setting a height on them has no effect.

Except in IE, which applies the height to them anyway...

Author Comment

ID: 20424586
but I do have display: block
LVL 29

Expert Comment

by:Göran Andersson
ID: 20424619
You have display:block on the li element, but not on the a element. Unless you have more css somewhere else...

Author Comment

ID: 20424624
ooops bad!

Thanks, that worked great!

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

929 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now