PDA

View Full Version : IE a href problem



docock
Mar 18th, 2009, 07:12 PM
Im trying to set up a html page which includes a hrefs with a fixed width.
Since width: 185px didn't work at firefox, I included the lines:

display:inline-block;
display:-moz-inline-block;

That solved the problem, though I'm still having some problems with it when using Internet Explorer. When the user scrolls over the 'a hrefs' the link sometimes doesn't light up, probally due to some space between the hrefs. Thats why I added the height: 15px; line. Though it doesn't solve the problem. Does anyone know how to fix this code so that it will work smoothly in most common browsers?

Thanks Mike




A.hero:link {color: #000; width:185px;height:15px;display:inline-block; display:-moz-inline-block;background: #fff;font-size:13px;text-decoration: none;margin-top:3px;margin-left:5px;}
A.hero:visited {color: #000; width:185px;height:15px;display:inline-block; display:-moz-inline-block;background: #fff;font-size:13px;text-decoration: none;margin-top:3px;margin-left:5px;}
A.hero:active {color: #000; width:185px;height:15px;display:inline-block; display:-moz-inline-block;background: #fff;font-size:13px;text-decoration: none;margin-top:3px;margin-left:5px;}
A.hero:hover {color: #000;width:185px;height:15px;display:inline-block; display:-moz-inline-block;background: #cdffc1;font-size:13px;margin-top:3px; margin-left:5px;}




<a class="hero" href="">&nbsp;Hero 1</a><br>
<a class="hero" href="">&nbsp;Hero 2</a><br>
<a class="hero" href="">&nbsp;Hero 3</a><br>
<a class="hero" href="">&nbsp;Hero 4</a><br>

Excavator
Mar 18th, 2009, 07:53 PM
Hello docock,
Try this and see if it helps, should at least be more cross browser compatable. I'm not sure what your wanting to do with these links so I just left the inline-block on them...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
height: 400px;
margin: 30px auto;
background: #999;
}
a.hero:link,
a.hero:visited,
a.hero:active {
width:185px;
height:15px;
margin: 3px 0 0 5px;
display:inline-block;
display:-moz-inline-block;
background: #fff;
color: #000;
font-size:13px;
text-decoration: none;
}
a.hero:hover {background: #cdffc1;}

</style>
</head>
<body>
<div id="wrap">
<a class="hero" href="">Hero 1</a><br>
<a class="hero" href="">Hero 2</a><br>
<a class="hero" href="">Hero 3</a><br>
<a class="hero" href="">Hero 4</a><br>
<!--end wrap--></div>
</body>
</html>