link bottom border problem

in IE, bottom border extends beyond link

[Meigetsu]

I have a very simple style sheet, outlining the look for p, all links, and using span classes to nudge some links left and right:

p {
font-family: "Goudy", "Arial", Sans-Serif;
font-size: 14px;
font-weight: normal;

text-align: center;
color: #fff;
background: transparent;

margin-bottom: 0px;
padding: 0px;
}

span.previous {
font-family: "Goudy", "Arial", Sans-Serif;
font-size: 14px;
font-weight: normal;

text-align: left;
color: #fff;
background: transparent;

margin-left: 10px;
}

span.next {
font-family: "Goudy", "Arial", Sans-Serif;
font-size: 14px;
font-weight: normal;

text-align: right;
color: #fff;
background: transparent;

margin-right: 10px;
}

a:link {
font-weight: normal;
text-decoration: none;
background: transparent;
color: #A4562D;
border-bottom: 1px solid #A4562D;

}

In IE, the links that are surrounded in <p><span class="left"> or <p><span class="right"> have the bottom border underneath the link word traling off for a few pixels beyond the link:

Previous Next
--------- -----

I don't see this in Opera. How do I make it go away in IE?

Thanks!

[Meigetsu]

Er, the example should look like:

Previous
----------

Next
------

You get the idea. :)

[createErrorMsg]

Meigetsu, welcome to WebmasterWorld.

First, make sure there aren't any spaces in the source code that the browser is interpretting as part of the link text. This probably isn't the case, but check it anyway.

Two, you might try setting the margin and padding on the <a> element (in the stylesheet) to 0.

Three, you don't need to use a <span> tag to assign the class=left behavior to that <p> tag. You can change this: <p><span class="left">...to this: <p class=left"> and it will work fine. It might even fix your IE problem, who knows. Don't forget to get rid of the closing </span> tag, too.

[Meigetsu]

Thanks for the quick reply!

To respond to your points:

- There are no spaces in the HTML source. I've seen that cause this problem, too, but this doesn't seem to be the culprit this time.

- 0px margin and padding on all a: tags in the stylesheet doesn't seem to fix it.

- I use <span class="left"> and <span class="right"> because I want the two links to sit on the same line. If I used <p> in front of them, that would break them up; I want them next to each other, centered, above the next element in the page, which is an image. I suppose I could use <ul><li> tags for this like some navbars do - maybe that would solve the problem. But I welcome other suggestions!

Thanks!

[Meigetsu]

ahh, i solved my problem. thanks for the tips!