I'm making a CSS menu and I have a problem (yet another "Gecko/IE
different behaviour with the same code" problem).
This menu uses unordered lists, with li elements that contain
hyperlinks. The width of the ul is fixed, and I've set the width of
the li and a elements to 100%. I've also set a 10px left and right
padding to the links, and here is the problem: in Gecko, the hyperlink
sticks out from the li element that contains it, because of the
padding, whereas in Explorer it doesn't. If I remove the "width: 100%"
from the hyperlink style, then the problem is solved but only
partially, because IE treats as a link only the text inside the
<a></a> tags, but I want all the "bar" to be clickable. I've put a
simple code snip below.
Any help to overcome this problem would be appreciated.
<html>
<head>
<STYLE type=text/css>
..listyle{
float: left;
display: block;
width: 100%;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #0000FF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #0000FF;
}
..ulstyle {
width: 100px;
}
..astyle {
background: #FF0000;
display: block;
width: 100%;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
}
</STYLE>
</head>
<body>
</body>
In IE the hyperlink doesn't stick out from the <li> element. In
Gecko, it does.<P>
<ul class="ulstyle">
<li class="listyle"><a class="astyle"
href="http://www.google.com">test</a></li>
</ul>
</html>
