A common issue in developing web applications is that styling between different browsers often looks different. This hurts many designers who are trying to make things look a certain way, and it hurts many developers who have to listen to those designers complain. I’ve run into this issue in the past, and the designer I was working with insisted that we use Flash buttons that look and act a certain way. Do I even have to explain the issues associated with Flash buttons throughout your entire site?
This is a quick and easy solution to having buttons that all look the same, and function the same way regardless of browser or OS. Now, as a disclaimer, I have to say that the best way to go about doing rounded corners is through CSS3, but Internet Explorer does not support CSS3 (thank you Microsoft, way to stay ahead of the curve). One alternative is to use JavaScript to generate DIVs that gradually create a rounded corner effect, but at times it can be glitchy; especially when using Ajax in IE.This leaves us with one choice: images. I am not a proponent of using images to do rounded corners, but when you have no other options, you have to do something. That being said, this little bit of code uses tiny PNG images that stretch horizontally.
I am not going to run through how the code itself works, but I will explain the requirements, usage, and available functionality.
Requirements
- jQuery 1.3.2+
- jQuery UI 1.7.2+
- Only uses “disableSelection()”. You can copy just this function if you don’t want to include the entire library.
- Minimum of the transitional DOCTYPE because Quirks mode is not supported
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “DTD/xhtml1-transitional.dtd”>
Usage
Place a
<div class=”cssButton” caption=”Button Label”></div>
anywhere on the page, and then call
StyleButtons()
after the page loads.To use different features of the buttons, simply add the appropriate attributes to the div, and they will be used accordingly.
Functionality
The following attributes are implemented:
- caption – The text on the button
- onclick – Javascript to execute on click
- width – Set an absolute, fixed width in px or pt
- align – Aligns the caption text within the button
- One of {“left”, “right”, “middle”}
- Defaults to “middle”
- padding – Padding for the text to the button border
- Works just like standard CSS syntax [top, right, bottom, left]
- Default values of “auto”
- fontSize – Font size to use in px or pt
- Defaults to the current font set on the page
Source Code
