SillyDog701

by **StandardAI** » Wed 26 Nov, 2003 11:59 am

well i here's what i did

Code: Select all: <Button STYLE='background:silver' STYLE='font-weight:bold' STYLE='font-weight:bold' STYLE='font-size:10px' STYLE='color:333333' STYLE='font-family:Verdana' onclick='javascript:history.back(1)'>Go Back</Button>

it looks just how i want it on IE, but on netscape and opera it just looks like a normal button and ignores my css styling, anyone know how to make it look the same on all browsers?

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]

by **Edward** » Wed 26 Nov, 2003 6:20 pm

Topic moved from Opera to General Area.

UserAgent: Opera/7.23 (X11; Linux i586; U) [en]

by **DJGM** » Wed 26 Nov, 2003 7:57 pm

Is the code you're using proprietary, or standards compliant?

UserAgent: Mozilla/5.0 (Macintosh; U; PPC; en-US; rv:1.3.1) Gecko/20030621

by **Wolfey** » Wed 26 Nov, 2003 9:23 pm

I just tried it out here, and nothing in that code appears to be proprietary - There's just too many "styles" in use :lol:

Seriously, though...I'm not sure why the "style" attribute (or is it "property"? I'm getting those terms mixed up right now...

) is being repeated so many times in a single tag...But I found two different methods that get it working not only in IE, but also in Mozilla/Netscape (they should also work in Opera, although I don't have a copy of it available to test and confirm that).

(For both of these cases, I removed a duplicate "font-weight:bold" attribute/property that was present in the original code, changed "background" to "background-color", and for the hexadecimal color value, I added the "#" sign before it.)

Method #1 - Consolidation of "style" Attributes/Properties

Replace the current "button" coding with this:

Code: Select all: <button STYLE='background-color:silver;font-weight:bold;font-size:10px;color:#333333;font-family:Verdana' onclick='javascript:history.back(1)'>Go Back</button>

The above was achieved by combining all the separate values for the multiple "style" attributes/properties into a single value. It's a bit messy, but it works

Method #2 (My preference): Separate CSS coding from the button

Add this between the <HEAD> and </HEAD> tags of your page:

Code: Select all: <STYLE type="text/css"> button { background-color:silver; font-weight:bold; font-size:10px; color:#333333; font-family:Verdana } </STYLE>

and

Replace the current "button" coding with this:

Code: Select all: <button onclick='javascript:history.back(1)'>Go Back</button>

The above puts the CSS coding outside of the button, and into the page's coding. It will be easier to fix if something gets messed up, and will also allow all buttons to inherit those colors/sizes/etc.

Of course, you may want it to affect specific buttons only...In that case, make sure you've defined a specific "class" for the tag coding in the CSS, as well as any tags in the actual page that use it. In other words, if you wanted to only have the coding affect buttons whose class is called "sample", you'd change:

Code: Select all: button {

to

Code: Select all: button.sample {

(Add a period, followed by the class name, for that specific tag.)

and

Code: Select all: <button onclick='javascript:history.back(1)'>Go Back</button>

to

Code: Select all: <button class="sample" onclick='javascript:history.back(1)'>Go Back</button>

(Add the attribute/property "class", and set its value to the class name you coded in the <STYLE> tags at the top of the page)

That's not the only way to have CSS coding affect only certain elements - You could also set it up to affect buttons that are used in a table, but not if they're used anywhere else, for example

I hope this helps

UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.5) Gecko/20031007

by **StandardAI** » Wed 26 Nov, 2003 9:31 pm

yeah thanks alot, sorry i'm such a loser

UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.23 [en]

SillyDog701

HTML help?

HTML help?

Who is online