Re: "simple" buttons - possible without tables?

[Anze]

Hmmm... anyone? :)

Anze
Anze wrote:

Hi!

I am looking for a cleaner solution that would display sth. like this, but
I simply ran out of ideas:
-----
<table border="0" cellpadding="0" cellspacing="0" style="border: 1px solid
#d4d4d4;">
<tr>
<td style="padding: 1px; background-color: #ffffff;">
<input type="submit" value="test 123" style="height: 18px;
background: #e9eaea url(gradient.gi f) left top repeat-x; width: auto;
border: none; padding: 0px 10px;" />
</td>
</tr>
</table>
-----

(I have attached an image - a button of height 18px and auto width that
has a white border of 1px and around it a dark-gray border of 1px. The
background of the button must be a gradient image)

I have tried this:
-----
<div class="button">
<input type="submit" class="button" value="test 123" />
</div>
-----
CSS:
-----
div.button {
display: inline;
border: 1px solid #d4d4d4;
background-color: #ffffff;
padding: 1px;
}
input.button {
background: #e9eaea url(gradient.gi f) left top repeat-x;
padding: 0px;
margin: 0px 10px;
border: none;
height: 18px;
line-height: 18px;
}
-----

If div.button is display:block; then I can't set width to auto. On the
other hand if it is inline I can't specify height.

Of course, I am looking for cross-browser no-hacks solution. Otherwise I'd
rather resort to tables. ;)

Is this possible?

I would appreciate some help.

Thanks,

Anze

[Anze]

> You should always set a width on floated items (except if applied

> directly to an image - which has implicit width). W3C's Cascading Style
Sheets, level 2, CSS2 Specifications states:
"A floated box must have an explicit width..."

They do specify it in CSS 2.1. You're looking at CSS 2. The recent
generation of browsers (Firefox, Opera, WebKit) are all aiming for CSS
2.1 plus bits of CSS 3 where they feel like it.

Ben, thank you! I would have used the auto width float DIVs anyway, but I'll
sleep a bit better now. :)

Enjoy,

Anze