-2

I am trying to create buttons without using CSS3 "button". Float, height and width do not work.

a.reply {
    padding: 20px;
    background-color: #555;
    border-radius: 4px;
    margin-top: 10px;
    width: 100px;
    height: 50px;
}

a:hover.reply {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    width: 100px;
    height: 50px;
}
Joshua Dwire
  • 5,415
  • 5
  • 29
  • 50
user3219200
  • 43
  • 6

3 Answers3

0

use inline-block

a.reply {
display: inline-block;
padding: 20px;
background-color: #555;
border-radius: 4px;
margin-top: 10px;
width: 100px;
height: 50px;
}
ozgrozer
  • 1,824
  • 1
  • 23
  • 35
0

width, height, margin can only work on a element that has dimension, aka block level element.

So you need to add the display: block, or display: inline-block properties to your <a>

To have them next to each other, you could 2 things: (notice that i fix some CSS issues in your code)

Float:

<p class="clearfix">
  <a href="#" class="reply">foo</a>
  <a href="#" class="reply">bar</a>
</p>

CSS:

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both; 
  visibility: hidden;
}

a.reply {
    padding: 20px;
    background-color: #555;
    border-radius: 4px;
    margin-top: 10px;
    width: 100px;
    height: 50px;
    margin-right: 15px;
    float: left;
}

a.reply:hover {
    background-color: #fff;
}

Display inline-block

<p>
  <a href="#" class="reply">foo</a>
  <a href="#" class="reply">bar</a>
</p>

CSS:

a.reply {
  padding: 20px;
  background-color: #555;
  border-radius: 4px;
  margin-top: 10px;
  width: 100px;
  height: 50px;
  display: inline-block;
  margin-right: 15px;
}

a.reply:hover {
  background-color: #fff;
}
Mark
  • 6,762
  • 1
  • 33
  • 50
0

The problem might be in your HTML, make sure it looks something like this: 

<a class="reply">yes</a>
<a class="reply">yes</a>

Seems to work fine: http://jsfiddle.net/a6EQk/1/

Also, <a> elements usually need to be set to display: block or inline-block to have any dimensions.
By default <a> elements are set to display:inline;.
You might want to check out this explanation: display:inline vs display:block

Also, I see no reference to a float in your css. If you do use a float make sure you clear them properly.

Community
  • 1
  • 1
Ghost Echo
  • 1,997
  • 4
  • 31
  • 46
  • needs at least a href attribute to work (be recognised) in FireFox for example – Mark Feb 20 '14 at 14:45
  • @Mark, it should still work. Without the href it becomes a placeholder hyperlink. http://dev.w3.org/html5/markup/a.html#placeholder-hyperlink – Ghost Echo Feb 20 '14 at 14:51
  • check your fiddle in FireFox please, you will see that the "links" are not behaving as such, meaning no pointer on the mouse. – Mark Feb 20 '14 at 15:03
  • @Mark, they do the same thing in other browsers, it's not just Firefox. I just left out the `href`'s. Thanks though. – Ghost Echo Feb 20 '14 at 15:08