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

[Jukka K. Korpela]

Anze wrote:

Hmmm... anyone? :)

No. When you posted an attachment to Usenet, you excluded constructive
discussion - especially since you failed to provide a URL. Well, an absolute
URL, that is.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Anze]

>Hmmm... anyone? :)

>
No. When you posted an attachment to Usenet, you excluded constructive
discussion - especially since you failed to provide a URL. Well, an
absolute URL, that is.

Sorry, I thought the mail was clear enough and the image was just an added
bonus.

Here is the URL:
http://users.volja.net/anzesk/usenet/test.html

I would still appreciate any thoughts on this. I can find many workarounds
but not... The Right Way (tm). :)

Thanks,

Anze

[Grant]

On Wed, 08 Oct 2008 00:05:48 +0200, Anze <an******@volja .netwrote:

>>Hmmm... anyone? :)

No. When you posted an attachment to Usenet, you excluded constructive
discussion - especially since you failed to provide a URL. Well, an
absolute URL, that is.

Sorry, I thought the mail was clear enough and the image was just an added
bonus.

Not on usenet non-binary groups.

>
Here is the URL:
http://users.volja.net/anzesk/usenet/test.html

I would still appreciate any thoughts on this. I can find many workarounds
but not... The Right Way (tm). :)

I think it may be a case of not trying so hard to control the layout
when you stop using tables, and accept the compromise. Also check
how other major browsers are rendering the markup.

I was tempted to use table layout for a couple buttons here:
http://bugsplatter.id.au/cc2ip/

But didn't -- the form works, it renders cross-browser (I don't really
care about msie-6, not my target audience).

Grant.
--
http://bugsplatter.id.au/

[Anze]

First of all, thank you for the answer! I appreciate it!

>>Sorry, I thought the mail was clear enough and the image was just an added
bonus.

Not on usenet non-binary groups.

Thank you for clearing this up. I'll behave in the future. :)

I think it may be a case of not trying so hard to control the layout
when you stop using tables, and accept the compromise. Also check
how other major browsers are rendering the markup.

This is out of my hands - designer draws, I implement. :)

Seriously, I never meant to use tables - I just wanted to show what I wanted
done. If all else fails I will use a few CSS classes with fixed widths, but
it would be nicer if I didn't have to.

It just seems so limiting that there is no some way to tell a div to shrink
as much as it can.

Thanks,

Anze

[dorayme]

In article <v0************ *******@news.si ol.net>,
Anze <an******@volja .netwrote:

It just seems so limiting that there is no some way to tell a div to shrink
as much as it can.

Floating a div does this.

--
dorayme

[Anze]

>It just seems so limiting that there is no some way to tell a div to

>shrink as much as it can.

Floating a div does this.

It does indeed! :) Thank you!

My idea was to use "display: table;", but that doesn't work in IE.

The only remaining problem is padding in Opera, but I can solve that by
using spaces.

Also, IE doesn't allow to eliminate space left and right from text - setting
padding to 0 still shows some space left.

I'll go read about CSS float now... :)

Thank you again!

Anze

[Anze]

Also, IE doesn't allow to eliminate space left and right from text -

setting padding to 0 still shows some space left.

I have solved this by setting overflow to visible:
http://www.brandnewbox.co.uk/article...om_ie_buttons/

The site is updated with all the history, and the last result looks ok in
all the browsers I can get my hands on:
http://users.volja.net/anzesk/usenet/test.html

Thank you again!

Anze

[Anze]

For completeness:
http://css.maxdesign.com.au/floatuto...troduction.htm

Quote:
-----
Do floated items need a width?
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..."
http://www.w3.org/TR/CSS2/visuren.html#floats
If no width is set, the results can be unpredictable. Theoretically, a
floated element with an undefined width should shrink to the widest element
within it. This could be a word, a sentence or even a single character -
and results can vary from browser to browser.
-----

It looks like all major browsers shrink float elements to the widest element
within, but there is no guarantee. W3C certainly doesn't specify it.

By the way: what is the "proper" way to deal with the page that was used for
this question? I will leave it there for the time being, but sooner or
later I'll have to remove it. That's why I originally wanted to post
everything here...

Best,

Anze

[Ben C]

On 2008-10-08, Anze <an******@volja .netwrote:

>
For completeness:
http://css.maxdesign.com.au/floatuto...troduction.htm

Quote:
-----
Do floated items need a width?
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..."
http://www.w3.org/TR/CSS2/visuren.html#floats
If no width is set, the results can be unpredictable. Theoretically, a
floated element with an undefined width should shrink to the widest element
within it. This could be a word, a sentence or even a single character -
and results can vary from browser to browser.
-----

It looks like all major browsers shrink float elements to the widest element
within, but there is no guarantee. W3C certainly doesn't specify it.

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.

Floats get shrink-to-fit width which is clear most of the time, although
the spec does say it doesn't "define the exact algorithm".

I have seem some differences between browsers in cases where the auto
width float contains both a left and a right float or when it contains
pre-formatted text.

10.3.5:

If 'width' is computed as 'auto', the used value is the
"shrink-to-fit" width. Calculation of the shrink-to-fit width is
similar to calculating the width of a table cell using the automatic
table layout algorithm. Roughly: calculate the preferred width by
formatting the content without breaking lines other than where
explicit line breaks occur, and also calculate the preferred minimum
width, e.g., by trying all possible line breaks. CSS 2.1 does not
define the exact algorithm. Thirdly, find the available width: in
this case, this is the width of the containing block minus the used
values of 'margin-left', 'border-left-width', 'padding-left',
'padding-right', 'border-right-width', 'margin-right', and the
widths of any relevant scroll bars. Then the shrink-to-fit width is:
min(max(preferr ed minimum width, available width), preferred width).