Margins on buttons

[joachim.feldt]

Hi,

I am having problem styling my asp:buttons.
I am using a background image, or several actually depending on what
the button should do.
On the left hand side of the image there is a small icon, for example a
"Save-icon" if it is a save button. Just to the right of the icon the
text "Save" comes.

To prevent that the Save-text displays over the icon I have set the
left padding to 25 pixels and also set the text align to Left.

What I have found out is that the longer text a button has, the larger
padding it gets.
This occurs if I do not style my button at all, so it seems to be a
standard behaviour.

I can just look at the three buttons below when I write this, "Cancel",
"Preview" and "Post message". The margins on "Post message" much larger
than the other two.

I do NOT want set manually set "WITH" on my buttons since my
application is multi language and all texts on labels, buttons etc is
set dynamically. So I do not really know how wide the button should be.

So:
If I have a button with padding-left: 25px, and a long text, "Click
here to do something", this button would look really funny. It takes a
lot of unneccesary space on my pages.

Do you see my problem and can someone please help me??

/Joachim

[S. Justin Gengo]

Joachim,

To get things just write I think you will want to specify an exact width
(even though you don't want to). If you're using .NET's built in
internationalization you may be able to store the various widths you need to
set as a parameter in the same file as each button's text. Then when you
retrieve the text retrieve the proper button width at the same time.

--
Sincerely,

S. Justin Gengo, MCP
Web Developer / Programmer

www.aboutfortunate.com

"Out of chaos comes order."
Nietzsche
<jo***********@astrazeneca.com> wrote in message
news:11*********************@g49g2000cwa.googlegro ups.com...

Hi,

I am having problem styling my asp:buttons.
I am using a background image, or several actually depending on what
the button should do.
On the left hand side of the image there is a small icon, for example a
"Save-icon" if it is a save button. Just to the right of the icon the
text "Save" comes.

To prevent that the Save-text displays over the icon I have set the
left padding to 25 pixels and also set the text align to Left.

What I have found out is that the longer text a button has, the larger
padding it gets.
This occurs if I do not style my button at all, so it seems to be a
standard behaviour.

I can just look at the three buttons below when I write this, "Cancel",
"Preview" and "Post message". The margins on "Post message" much larger
than the other two.

I do NOT want set manually set "WITH" on my buttons since my
application is multi language and all texts on labels, buttons etc is
set dynamically. So I do not really know how wide the button should be.

So:
If I have a button with padding-left: 25px, and a long text, "Click
here to do something", this button would look really funny. It takes a
lot of unneccesary space on my pages.

Do you see my problem and can someone please help me??

/Joachim

[Jason Kester]

I usually just set all the buttons on a page to a certain width. 75px
or 100px, depending on the length of the longest one.

For what it's worth, I'd recommend actually using <input type="submit"
runat=server> instead of <asp:button> if you want any control over the
actual HTML that gets rendered. Saves you the frustration of twiddling
options in a third syntax, while trying to convince ASP.NET to spit out
the HTML you want.
Jason Kester
Expat Software Consulting Services
http://www.expatsoftware.com/

---
Get your own Travel Blog, with itinerary maps and photos!
http://www.blogabond.com/

[joachim.feldt]

Thanks for your replies.

No, we do not use .Net´s built in internationalization. We are having
a textfile with all texts.

So I would have specify width then...Unfortunatally the application
becomes less dynamic.

But is´nt it strange that the margins increases the longer button text
you have? Wonder why...

/Joachim