Can someone tell me why my <div> buttons won't resize?

Question

No matter what I set them to my DIVs I use for buttons don't resize. I'm uploading the correct file, and it has the change on the server, but nothing is happening no matter how much I refresh. I'll delete the URL so this can't be used as advertising once I get an answer.

[removed url]

Answer 1

The issue here is that you're trying to resize inline elements, which cannot be explicitly controlled. In order to set the height and width of the element, you need to set it's display mode to "block" and use float to align the elements horizontally.

div .button {
   display: block;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border: 3px double #F1A631;
   background-color: #FCFF68;
   float: left;
   width: 150px;
   height: 30px;
}

Also, you'll need to rearrange your DIVs in the reverse order you'd like them to be displayed left-to-right. There is display property in CSS2 called "inline-block" which is designed to correct this, but it's not universally supported.

Answer 2

In CSS, elements with display: inline cannot have width or height applied to them. You need display: inline-block for that. IE will incorrectly convert any inline element to inline-block if you give them a width or height. Fortunatley, since the release of Firefox 3 you can use inline-block with only minimal hacking.

no Firefox 2 compatibility:

.ib { display: inline-block; zoom: 1; *display: inline; }

Example HTML

<div class="ib button">My button</div>

Firefox 2 compatibilty

.ib{ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
.button { display: block; }

Example HTML

<div class="ib"><div class="button">My button</div></div>

In your .button implementation you would need to remove the display: inline portion.