CSS - Why is this invisible margin being applied to my <a> tag css-button?
- by Kenny Bones
I was having trouble with two types of buttons.
It was a form button and a css button basically. And I was advised that the css button whould use display:inline-block;
This made the whole a href tag actually look like a button.
But this invisible margin seems to be screwing up something. I tried separating them into separate css classes, but oddly, applying a real margin to the css button gives an additional margin as well. What's causing this?
You can easily see it here (low graphics):
www.matkalenderen.no
Basically, code looks like this:
<input type="submit" value="Logg inn" class="button_blue" alt="ready to login">
<a class="button_css_red" href="access.php">Glemt passord</a>
CSS
.button_red, .button_blue, .button_css_red, .button_css_blue {
background-image:url("../img/sprite_buttons.png");
background-repeat:no-repeat;
border: none;
color:#FFFFFF;
display:inline-block;
display:inline-block;
font-size:12px;
height:27px;
width:98px;
}
.button_css_red, .button_css_blue {
margin-top:20px;
}
