Forum Moderators: not2easy
Problem is, in firefox it's only showing the top ~15px of the background, aligned at the bottom of the image. It works fine in IE, but not FF and safari.
You can see it at <edited>
The link, hover and active styles for the button are all aligned vertically in one image, and I tried it with 3 separate images, and that's not it.
The HTML and CSS both validate, so that's also not it..
Please help!
Here's the relevant code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link REL=stylesheet HREF="spiral.css" TYPE="text/css">
</head>
<body>
<div class="links">
<a class="button_round" href="index.html"><img src="images/link-home.png" width="109" height="48" alt="Home"/></a>
</div>
</body>
</html>
div.links{
margin-right:-26px;
margin-top:0px;
height:48px;
}
a.button_round:link{
background:url(images/button_round.gif) 0px 0px no-repeat;
}
a.button_round:visited{
background:url(images/button_round.gif) 0px 0px no-repeat;
}
a.button_round:hover{
background:url(images/button_round.gif) 0px -48px no-repeat;
}
a.button_round:active{
background:url(images/button_round.gif) 0px -96px no-repeat;
}
[edited by: tedster at 7:16 pm (utc) on Nov. 28, 2007]
[edit reason] no personal urls, thanks [/edit]
Note there's no img, no space.
Then add this as a general button_round selector, in addition to your :link,:hover,:active pseudo-classes:
a.button_round {
width:109px;
height:48px;
display: block;
margin:0;
padding:0;
}
<aside> You are using XML style syntax on your img tag, /> this is not valid 4.01 markup. :-) </aside>
a.button_round {
font-size:100pt;
}
this makes the buttons right size in all browsers. I only noticed it when I took out the images, and it was only showing the alt text, and they were the exact height of the part of the background image that was showing up, and a simple font size adjust fixes it, but it won't make it bigger than the background image. It wasn't happening in IE because, even when it just shows the alt text it displays a box the size of the total image.
Hope this helps anyone who has the same problem!
