underline extends to padding:right in Firefox and Safari

Forum Moderators: not2easy

Message Too Old, No Replies

underline extends to padding:right in Firefox and Safari

underline issue in Firefox

Diane Ferguson

4:11 pm on Aug 19, 2009 (gmt 0)

I have a navbar that is in list format. To centre it properly I had to add padding to the right of the last menu item. I've set my CSS to underline when you hover over the link. However, because this one title has padding, the underline goes to the right of the text under the padding. This doesn't happen in IE7, but is happening in Firefox and Safari. Does anyone know of a fix?

Thanks.

D_Blackwell

7:18 pm on Aug 19, 2009 (gmt 0)

Can you provide enough code to replicate the problem (preferably ready to drop into a file so that we don't have to move everything around just to prepare for testing)?

A quick markup doesn't show me a problem in Firefox. Vertical list, horizontal list, display: inline, block, or inline-block; on the <li> and or <a>. I'm just not able to create the problem - at least not in quick hack attempt to do so.

Diane Ferguson

1:45 am on Aug 20, 2009 (gmt 0)

This is my navbar:

<div id="nav">
<ul>
<li><a href="index.html"><span class="active2">Home</span></a></li>
<li><a href="siteplan.html">Site Plan</a></li>
<li><a href="collection.html">The Collection</a></li>
<li><a href="countryhouse.html">Country House</a></li>
<li><a href="signatureinteriors.html">Signature Interiors</a></li>
<li><a href="thestables.html">The Stables</a></li>
<li><a href="ideallocation.html">Ideal Location</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="builder.html">Builder</a></li>
<li><a href="contact.html"><span class="last_nav">Lot Sales</span></a></li>
</ul>
</div>

This is the css formatting:

a:hover {
color: black;
text-decoration: underline;
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}

#nav {
height: 30px;
padding-bottom: 0px;
background-image: url(navbar/navbar2_03.jpg);
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
padding-top: 0px;
text-align: center;
white-space: nowrap;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

.last_nav {
padding-left: 0px;
padding-right: 45px;
overflow: hidden;
}

I hope that's enough.

Thanks--Diane

Diane Ferguson

1:47 am on Aug 20, 2009 (gmt 0)

Oops, here is more of the css that applies:

#nav ul {
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 30px;
color: #000;
white-space: nowrap;
padding-bottom: 10px;
text-align: center;
}
#nav li {
list-style-type: none;
display: inline;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}

D_Blackwell

2:51 am on Aug 20, 2009 (gmt 0)

This is not a complete solution, just a few steps towards what you want.

1) I organized your code so that I could actually test it.

2) To centre it properly I had to add padding to the right of the last menu item. This has the sound of a hacked fix. Maybe better to get the navbar to center properly without hacking in 45px;.

3) I've set my CSS to underline when you hover over the link By default <a> is underlined. I have added the CSS to remove the underline, so that it will then 'pop up' on hover.

4) I have short-handed some of the code to tighten it up, and organized some so that it will be easier to work with in the future. For example, #nav has padding-bottom: as the second item in the declaration block and padding-top: as the seventh item in this block. It will be easier to work with your code in the future if you establish a system that keeps very similar declarations together and if you follow a general pattern or system.

5) Do you really intend the 'POP' and movement of the entire navbar on hover? The declaration of padding: 10px; to a:hover is the cause of this effect. Fine it it is what you want. Not so fine if it irritates users.

6) I have added comments to several items that may not be needed. Just something to look at.
/*?*/ I have not tested any of these comments.

7) To actually answer your question. I have commented out the 45px; hack. The <ul> has, depending upon the browser, X amount of default margin-left: and/or padding-left. (Suzy_UK or swa66 can probably tell you exactly how much in every version of every browser:)) This is causing the <ul> to shift right. The hack is pushing it back left, approximately centering the navbar.

I have removed this default, which removes the need for the 45px; hack.
#nav ul {
margin: 0;
padding: 0;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body {
margin: 0; padding: 0;
}
a {
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
padding: 10px;
}
#nav {
width: 100%;/*?*/
height: 30px;
padding-top: 0px;
padding-bottom: 0px;
background: url(navbar/navbar2_03.jpg) repeat-x;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
white-space: nowrap;/*?*/
margin: 0;
}
.last_nav {
padding-left: 0px;
/*padding-right: 45px;*/
overflow: hidden;/*?*/
}
#nav ul {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
line-height: 30px;
color: #000;
white-space: nowrap;/*?*/
padding-bottom: 10px;
text-align: center;/*?*/
}
#nav li {
list-style-type: none;
display: inline;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;/*?*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="index.html"><span class="active2">Home</span></a></li>
<li><a href="siteplan.html">Site Plan</a></li>
<li><a href="collection.html">The Collection</a></li>
<li><a href="countryhouse.html">Country House</a></li>
<li><a href="signatureinteriors.html">Signature Interiors</a></li>
<li><a href="thestables.html">The Stables</a></li>
<li><a href="ideallocation.html">Ideal Location</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="builder.html">Builder</a></li>
<li><a href="contact.html"><span class="last_nav">Lot Sales</span></a></li>
</ul>
</div>

</body>
</html>

<edit>Tested in FF, Opera, IE7 - not tested in Safari (though not really worried).</edit>

Diane Ferguson

2:23 pm on Aug 20, 2009 (gmt 0)

Hi there, You're right, it is a hack. I was having a lot of problem getting my website centred in all browsers. I added some padding and then had to hack it to show different in IE7 and Safari/Firefox. Hmmm, it doesn't Pop when I hover, so I'm wondering what gave this effect. I do want the underline on hover. I'll work with what you gave me with just trying to centre without the padding.

Thanks,

Diane

Diane Ferguson

2:50 pm on Aug 20, 2009 (gmt 0)

I realized why you're getting the "pop". I'll give you the rest of the link formatting:

a:link {
color: black;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}

a:visited {
color:black;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
a:hover {
color: black;
text-decoration: underline;
padding-bottom: 10px;
padding-top: 10px;
padding-right: 10px;
padding-left: 10px;
}
a:active {
color: #000;
text-decoration: none;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
}

But this is all irrelevant now! You fixed my problem. setting the margin and padding to 0 centred my navbar without the hack. Thank you!

The code you said was not necessary was me struggling to get things centred. You're very good!

Cheers, diane

D_Blackwell

4:50 pm on Aug 20, 2009 (gmt 0)

Yes, I was getting the pop because I didn't have the a:link declarations. BTW - once you set {padding: 10px;} (shorthand for 10px top, right, bottom, center) on a{ or a:link{, that is then the default for :visited, :hover, and :active. The padding declarations can be removed from all three.
............................

The code you said was not necessary

I said may not be needed. I didn't check. They just had the look of junk code about them and I thought you should check them out. You want this to be streamlined as close to perfect as possible. Then you've got a nice 'template' block of code that can be reused in other places or pretty easily customized for other use. Fixed code is can be reused, customized..... Hacked code leads to more hacks with every use until it is unusable.