How to change css buttons only on certain ones

[NewBudda]

My Problem is with buttons that are controlled by css. I have installed a contribution which I liked (basic_design_pack_2.0) but ever since then my buttons are also css controlled.

That is ok for the most part except when the Butoon Label is too long for one line. What can I do there? If I change the default css button width value, it turns all buttons twice as big.

I only want the buttons to turn twice as big that need 2 lines.

 

Do you understand what I mean? How can I achieve this?

 

To show you my problem:

 

Any input would really be appreciated!

Thank you!

[lindsayanng]

You are basically saying that you need an "if two lines of text, expand border" type of text..

 

Can you post what your css for that button looks like> I'm not familiar with the css buttons.

[NewBudda]

Here is the relevant part os the stylesheet.css:

.cssButton {
 background: #f0f0ff;
 color: #000080;
 width: 100px;
 height: 20px;
 vertical-align: top;
 font-weight: normal;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 border: 1px;
 border-style: solid;
 border-color: #000080;
 border-spacing: 1px;
}

.cssButtonBig {
 background: #f0f0ff;
 color: #000080;
 width: 100px;
 height: 40px;
 vertical-align: top;
 font-weight: normal;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 border: 1px;
 border-style: solid;
 border-color: #000080;
 border-spacing: 1px;
}

The latter part was a try by me to solve the problem. I posted it merely as reference as to what doesnt work.

[sLaV-]

You can try setting height to auto:

 

  height: auto;

 

but then all your buttons are gonna have different sizes which wont look too good <_<

[germ]

The picture you posted only happens in Firefox.

 

View the same page in IE7 and the buttons grow to two lines on their own.

:blush:

[germ]

You can try setting height to auto:

 

  height: auto;

 

but then all your buttons are gonna have different sizes which wont look too good <_<

I did that on the page in question using the Web Developer plugin in Firefox and it didn't look bad to me.

 

At least it does what the OP wanted!

 

I only want the buttons to turn twice as big that need 2 lines.

[NewBudda]

hmm but "auto". i don#t know... I would prefer an option where I manuall add something everytime 2 lines are needed...

[germ]

It wouldn't hurt to try it.

 

If you don't like it, change it back.

:)

[NewBudda]

  height: auto;

worked like a charm.

I am always to hesitant trying things on a live shop, even though I do regular backups before any change...

Thank you guys and girls!

[arietis]

I am always to hesitant trying things on a live shop, even though I do regular backups before any change...

 

if you're hesitant to trying things on a live shop, you can run osc on your local computer. look up 'xampp'. it's an environment that allows you to run a web server, with php and mysql on your own computer. it's great for testing things and ensuring that it works before uploading to your site.

[NewBudda]

I tried something like that before but was unable to replicate the setup of my real webserver (i.e PHP 4, mysql5) all current distros are with php 5 and backdating didnt work. Then again i am not very good at stuff like that...