CSS Buttons and fixed width

[kobra]

You might also look to the css sliding door code to create a fluid button style.

[paulm]

You might also look to the css sliding door code to create a fluid button style.

Interesting :-)

If that technique works in the Zen Cart case, it will enable us to have cool graphical css buttons, without adding (too much) markup.

[paulm]

Funny,

the article I just read about the css sliding door technique might also contain a solution to the automatic width problem.

In most browsers, floating an element will act sort of like shrink-wrapping it — it gets shrunk to the smallest possible size of the contents it contains. If a floated element contains (or is) an image, the float will shrink to the width of the image. If it contains only text, the float will shrink to the width of the longest non-wrapping line of text.

I am quite sure I did not try that the time, so it might be a better solution than the current calculated width.

Source: http://alistapart.com/articles/slidingdoors/

(under "One Hack for Consistency")

[paulm]

It works! I removed the width setting

Not using the float, because of course that did not help setting the input width in IE correctly. IE adds some magic padding to every input which is not over ridable setting the padding using css.

But it inpired me to look into it further and I found a trick to fix the input width in IE after all.

It does require a IE specific stylesheet or a a little hack to be added. Both are *very* easy to implement though (maybe the hack is a little easier because IE specific stylesheet probably needs some code changes in the zen core).

Here is a (temporary!) example online which uses the hack: http://www.beterelektro.nl/test/css-button/index.html

edit:
found the idea here: http://www.brownbatterystudios.com/s...x/#comment-196

[CzechBoy]

I have started to modify css according to sliding door method and til now I succeded with link buttons but input buttons are still messy.. if you see what is wrong there please let me know ;)

http://www.mozaika.org/index.php?mai...roducts_id=195

[paulm]

Hi CzechBoy,

your link css-buttons indeed look great now in Firefox! When I look in IE though the link buttons are as messy as the input buttons (well at least IE seems more consistant in this case ;-) ).

But I am afraid I can't help you with that right now I do see however that you added the css code which should make the inline css obsolete, but the inline width setting is stil there.

To remove this inline style you can look for (in includes/html_output.php):

$style = ' style="width: ' . $width . 'px;"';

And change it to:

$style = ' style="width: ' . $width . 'px;"';
$style = ''; // remove inline style

(this way it is easy to revert if needed)