ie not displaying link right

[snowboardr]

Can someone tell me why IE doesn't show the top and bottom lines on this link? Any ideas?

a.dl2:link{
font-weight:normal;
text-decoration:none;
color:#000000; 
font-size:90%;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
letter-spacing:1px; 
background-color:#FFFFCC;
margin-right:4px;
border:1px #000000 solid;
}
a.dl2:visited{
font-weight:normal;
text-decoration:none;
color:#000000; 
font-size:90%;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
letter-spacing:1px; 
background-color:#FFFFCC;
margin-right:4px;
border:1px #000000 solid;
}
a.dl2:hover {
font-weight:normal;
text-decoration:none; 
color:#003399; 
font-size:90%;
padding-left:6px; 
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
letter-spacing:1px;
background-color:#FFF;
margin-right:4px;
border:1px #0066CC solid;
}

Jason

[red]Army[/red] : [white]Combat Engineer[/white] : [blue]21B[/blue]

 

[traingamer]

It's one of those IE oddities - not sure if it has a name.

You can get around it by either:

reducing the top and bottom padding (in your link) to 0

or

put a top and bottom margin on the containing element (div, p, li, whatever)

e.g.

<p style="padding: 1px;"><a href="[URL unfurl="true"]http://www.wherever.com/"[/URL] class="dl2">Your link text</a> etc. etc.</p>

or

by having content above and below the link within the containing element (obviously not the case in your example or you would not be perceiving a problem).

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[traingamer]

And this would have been a lot easier to track down if you had included enought html with your css to easily duplicate the problem.

(I never saw the disapperaing top border until I eliminated content from one of my test html files.)


Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

 

[Vragabond]

Also note that you don't have to repeat values that don't change. CSS will inherit the values from the previous states.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

You could write the same rules more succinctly, and with less unnecessary duplication like this:

a.dl2:link, a.dl2:visited {
font-weight:normal;
text-decoration:none;
color:#000; 
font-size:90%;
padding: 3px 6px;
letter-spacing:1px; 
background-color:#FFC;
margin-right:4px; /* <- probably won't do anything */
border:1px #000 solid;
}

a.dl2:hover {
color:#039; 
background-color:#FFF;
border-color: #06C;
}

Not only will this save you bandwidth, but it makes it easier to maintain your code - when you change something, you only have to change it in one place, not many. It also flags up what it is that changes in the :hover state, rather than hiding it amidst all the things that stay the same.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd