Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Background Image align in Firefox vs IE

Posted on 2007-12-06
Medium Priority
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
LVL 29

Accepted Solution

Göran Andersson earned 1000 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 sorry...my bad!

Thanks, that worked great!

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

604 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