Solved

Background Image align in Firefox vs IE

Posted on 2007-12-06
4
562 Views
Last Modified: 2007-12-06
Hi,

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!


#navlist

{

	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;		

	text-decoration:none;

	display: block;

	float:left;

 	color: #999999;

	

	padding-top: 5px;

        /* For Testing ONLY */

	background-color:#0033FF;

}
 

#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;

	background-image:url(images/triangle.jpg);

	background-position:bottom;

	background-repeat:no-repeat;

	height: 20px;
 

}

Open in new window

0
Comment
Question by:jset_expert
  • 2
  • 2
4 Comments
 
LVL 29

Accepted Solution

by:
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...
0
 
LVL 1

Author Comment

by:jset_expert
ID: 20424586
but I do have display: block
0
 
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...
0
 
LVL 1

Author Comment

by:jset_expert
ID: 20424624
ooops sorry...my bad!

Thanks, that worked great!
0

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