I've got a nav button, its a span inside an anchor tag, and im styling the span so that its got a red background with dark grey text, and when you hover over it, it goes to grey background with red text. You'll see in the css. The background for the content is grey too, so you get quite a nice effect. The only probelm is, there is a random little white dot next to the button. The anchor tag isnt styled at all, and when i inspected it with firebug, i found that the dot apeard to be inside the anchor tag, but outside of the span. There's nothing in my markup (a period or seomthing) that could be doing it.

I tried zooming in on it, but it doesn't zoom. At some zoom levels, it dissapears all together...

 

Heres the markup and styling.

 

<a class="none" href="index.html"><span class="back">Back</span></a>

a .back{
background-color: #FF3333;
color: #333333;
padding: 2px;
}
a:hover .back{
background-color: #333333;
color: #FF3333;
}

 

Whats the verdict?

Got a live example? could be anything.

 

 

btw - any reason why you can't just drop the SPAN element and style only the A?

A stab in the dark without a link... but sometimes if you leave a space in your text-editor between elements, it displays as a dot... make sure there's no white space between your <a class="none" href="index.html"><span class="back">Back</span></a> and the element next to it?

Got a live example? could be anything.

 

 

btw - any reason why you can't just drop the SPAN element and style only the A?

 

Thanking you muchly, works fine now. Can't remember why I nested them like that, probably laziness. Works fine now.