Topic: CSS issues (browser related)

I started work on a site afew days ago, and have ran into a couple issues related to CSS.

span.button {
    border:1px solid #000000;

span.button:hover, span.selected {

.inbutton {
    margin:3px 9px 3px 9px;
<span class="button" title="Come join our IRC server"><a href="irc://" class="inbutton">IRC</a></span>

This is some code I have, which displays 1 "button" in my menu header. It should be dark red with a 1px black border, have a 9px margin either side, and change to black when hovered over.

This all works perfectly in firefox.

In Internet Explorer 6, I see no top or bottom border on the box, and it does not change colour when hovered over. Yet IE6 obviously supports :hover, since A:hover works? And I see no reason for the border to half work when it works fine on the rest of the page.

In Opera the span does not stretch across the full text, but seems to stop around halfway. The only explination for this I can guess at is that it is being positioned right by the .inbutton's margin, but it's length is being determined soley by the text length, rather than the margin and the text?

Ideally I would like a way to fix this without needing to write any messy script to altar code based on the browser (assuming thats possible?), so help would be much appreciated.


Re: CSS issues (browser related)

IE only supports :hover on links not on anything else. You should be trying to apply the styles to the <a> tag not the span. In fact I can't see what useful purpose the span tag serves. If you need two tags for fancy style effects then put the span inside the <a> tag. To get hover effects, padding, borders etc you then need to apply display:block to the tag you are trying to style.

3 (edited by Reines 2006-03-19 00:53)

Re: CSS issues (browser related)

Thanks Paul, will fix that up later and see how it works.

Edit: Got it all fixed up, except for the top and bottom borders in IE. Display:block works as you said, but I want the buttons inline :\