Hi,
Actually IE was rendering it the same as FF for me.
The problem you are having with your code is that anchors are inline elements by default. Inline elements (other than inline-block) can’t take on dimensions or vertical margins & paddings as you noticed.
You don’t have to restate every rule over for the pseudo classes, the only ones you need to reset are the ones that change. With your code you only need to address the :hover styles that are different.
You don’t have to use a ul & li but it is the most logical way to make your menus most of the time. The UL gives you a container for the li & a which can be styled and positioned just like a div.
The block level “li” will also allow you to eliminate the <br> tags you were using to drop each item to a new line.
Try this -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nav Test</title>
<style type="text/css">
#nav {
margin:0;
padding:0;
list-style:none;
width:165px;/*150px + "a" side paddings = 165px*/
border:1px solid #FFF;
border-bottom:none;
}
#nav li,#nav li a {
display:block; /*fill the ul's entire width*/
}
#nav li a {
height:20px;
padding:5px 5px 8px 10px;
border-bottom:1px solid #FFF;
background:#3CC;
color:#FFF;
text-decoration:none;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
#nav li a:hover {
background:#A7E9E9;
text-decoration:underline;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="spoint.htm">link1</a></li>
<li><a href="spoint.htm">link2</a></li>
<li><a href="spoint.htm">link3</a></li>
</ul>
</body>
</html>
…is an inline element and doesn’t accept widths/heights.
This being the case, I’m labeling the nav bar with a graphic at the top, and so FF stretches the links below wider than the graphic while IE matches widths between the graphic and links.
I already set the “li” & “a” as blocks in my example. You can hook your BG image to the anchor.
Set the anchor’s height the same as the image height and remove the vertical paddings. Then set your line-height the same as the anchor height to center the text vertically.
You can set the image’s BG repeat as x,y, or no-repeat
You can just set the width on the anchors to match that of the image can’t you? Provided of course you set display:block (or if you need them on the same line, float:left)
Hi,
You really need to post a link to your page so we can see the images you are working with. Then we can give you the best solution for your situation.
Just set the anchors width and height the same as the visible part of your images. You should not need to use padding to position text since your images contain type.
If the text in the html is just for SEO then you can hide it off-screen with text-indent:-999em.
You will need to give classes or ID’s to your anchors so you can hook different BG images on them. You will be better off using the Sprite method so your hover states will be preloaded.
Sprites are just images that have all states of the anchor in one image. Then it is shifted on hover via background-position.
… my bad