Simple hyperlink hover - border not showing in IE

Scam · 6 Apr 2006 at 18:09

http://www.tranquilmedia.co.uk/

You can view the source... the CSS is in the same file. On 'tranquilmedia' (bottom right) thats a link and it should show a bottom-border when you hover (check it in FF). In IE it's simply refusing to :confused:

Works fine in FF, but IE does the same thing on the links inside the popup as well. Whats the deal? :confused:

Oh, it's not border: 0; on the * selector thats causing it, i've tried removing that.. :confused:

iCraig · 6 Apr 2006 at 18:43

I don't know what you're doing wrong, I don't really have time to pick apart your site completely.

However, take solace in the fact that IE does support it, as I use a bottom border on my <a> links on my test site.

http://test.metrix.co.uk - You can see on the bottom navigation that it works in IE. Maybe double checking what I've done compared to yours might help?

Nim · 6 Apr 2006 at 18:50

This is pretty strange. It seems to be a problem with absolute positioning, and borders.

See the following, massively cutdown version

Code:

<html>
 <head>
 <style type="text/css">
  #copyright { position: absolute; right: 1%; bottom: 1%; text-align: right; }
  a:link { text-decoration: none; }
  a:hover { text-decoration: none; border-bottom: 1px solid #2ea8fe; }
 </style>
 </head>
 <body>
  <div id="copyright">
   <a href="mailto:[email protected]">tranquilmedia</a>
  </div>
 </body>
</html>

Take position: absolute; out of the #copyright definition, and it works, albeit with the element in the wrong place. Other attributes seem to be ok - color, background-color, etc.

And to really rub in the strangeness - border-left and border-right are fine. Just not top and bottom.

Is there any reason you can't use text-decoration: underline;, since you're keeping the colour the same?

Augmented · 6 Apr 2006 at 21:07

It's likely to be a layout issue related to the hasLayout property that IE gives to elements dependant on their style - which only then allows you to manipulate it in the ways you'd expect to be able to. The absolute positioning will be contributing to that.

Give the child <p> element of #copyright a position: relative property to give it hasLayout, and you should see it working

.

Code:

#copyright p {
position: relative;}

You can give hasLayout to an element in a variety of ways, but the position:relative property is safe enough and validates.

Scam · 10 Apr 2006 at 16:55

Thanks Augmented. I'm not really sure what you're on about but it does work

I've fixed the copyright underline on the splash by doing what you've said, and also on the popup's header by changing from position: absolute; to position: relative;, easy enough!

However, the hyperlink on the popup's footer don't seem to want to play nice. Any ideas?

HTML:

Code:

<div id="footer">
<p class="left">
<a href="about.html" title="About Tranquil Media" target="vidframe">about</a> | 
<a href="contact.html" title="Contact Tranquil Media" target="vidframe">contact</a> | 
<a href="clients" title="Client Login" target="vidframe">client login</a>
</p>

<p class="right">copyright &copy; <a href="mailto:[email protected]" title="Click to email Tranquil Media">tranquilmedia</a> 2006. all rights reserved.</p></div><!--/footer-->

CSS:

Code:

div#footer {	
	clear: both;
	width: 100%;
	height: 20px;
	overflow: hidden;
	text-align: center;
	color: #2ea8fe;
	background: #fff url(img/footer-bg.jpg) no-repeat scroll bottom;
	}
	
div#footer p.right { float: right; margin-right: 0.5em;}

div#footer p.left { float: left; margin-left: 0.5em; color: #4f4f4f;}

Thanks!

EDIT: I did a spot of reading and tried a number of things. Adding height: 100%; seems to work, and not effect the layout. Is this ok to use? :confused:

Code:

div#footer p.right { float: right; margin-right: 0.5em; height: 100%;}

div#footer p.left { float: left; margin-left: 0.5em; color: #4f4f4f; height: 100%;}