CSS Buttons and fixed width

Here:

http://www.zen-cart.com/wiki/index.p..._-_CSS_Buttons

you can find this:

Style
For an unknown reason, Zen Cart™ appears to calculate the number of characters in a button's value and then generates a length in pixels based on the size of the value. Would it not be wiser to allow the button to choose its own size?
If you know why a width is applied to CSS Buttons please share, it would also be great to be able to disable this feature.

Does anyone know how to make fixed width of a button? I want to make background image (see atachment) but I dont know how to... another way would be to stretch the background image but I guess it is not possible either...

Hi CzechBoy,

the Zen css-buttons code is based on some code I wrote as a contribution. The reason I added the automatic width calculation is because I could not find any other (practicle) way to create buttons that adjusted automaticly to the width of the text. (one way that works across browsers is wrapping each button in a table, but that would obviously (?) not be an improvement).

If anyone knows a better way to create css buttons (i.c.w. the current Zen Code of course) that adjust automaticly to the containing text please tell! It would not suprise me if a better solution exists, and I just overlooked it at the time i wrote it.

The change all buttons to the same fixed width you can add this at the bottom of the stylesheet_css_buttons.css file:

Code:

---

.cssButton, .cssButtonHover{
width: 200px !important;
}

---

Or, depending on the way you defined other sizes, maybe better use em's:

Code:

---

.cssButton, .cssButtonHover{
width: 15em !important;
}

---

(of course you need to change the value toyour needs).

And another note about the automatic width problem: please don't forget that it needs to work for the links as well as the inputs (and needs to work in the different major browsers too of course). In the past, several people suggested solutions that worked on the links, to find out later that it did not work for the inputs.

I see.. quite problematic task (better to have variable width ;) )... from what I see, the best solution for now would be image buttons :huh: To have an image for each border as it is in case of vertical boxes it is not possible, right? It would be solution as well...

Well with the border image it is nonsense right?:) But anyway is there a way how to create a similar CSS button to mine from the previous message?

I am afraid I do not have an "out of the box" solution for you. But I think there are lots of ways to achieve what you want.

*You could revert to graphical buttons and create individual graphical buttuns for each case.

*Or you can use fixed sized css buttons and use your image as background.

*Or you can split the image in three parts and modify the button code so that you have: a fixed sized left box+left part(background)image, and a fluid middle box with text+repeating background middleimage and fixed sized right box with the right part of your image. All glued together of course so that it looks like one.

hth

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

Quote:

---

Originally Posted by kobra

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.

Funny,

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

Quote:

---

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")

It works! I removed the width setting :blink:

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

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

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):

Code:

---

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

---

And change it to:

Code:

---

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

---

(this way it is easy to revert if needed)