PDA

View Full Version : style- Two different buttons?

Morgoth
08-16-2002, 01:16 PM
I have 2 different buttons in my style.css file. The only differance between them in the BGcolor.

Example:

<style type="text/css">
.submit {
background-color:#000000;
BLAH blah blah...
}

.clear {
background-color:#FFFFFF;
BLAH blah blah...
}
</style>


Now, I have a problem. When I include it to my page and I put this.
<input type="reset" value="Clear" class="clear">
<input type="submit" value="Submit" class="submit">

The only one that will change to it's propertise given is one that has it's propertise closes to the top. In this case ".submit".
How can I have differnt changes in both buttons?

Do you understand what I am looking for?
boxer_1
08-16-2002, 01:39 PM
As to styling the buttons the way you desired in your example, here's an example:

<html>
<head>
<title>Example</title>
<style type="text/css">
.one {
color: #ff0000;
background-color: #0000ff;
}

.two {
color: #0000ff;
background-color: #ff0000;
}
</style>
</head>
<body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="ff0000" vlink="#800080">
<form>
<input class="one" type="submit" value="Submit Form">
<br /><br />
<input class="two" type="reset" value="Reset">
</form>
</body>
</html>

In my example, the text color on the submit button is red and the button is blue. The reset button had blue text on a red button ;).
Morgoth
08-16-2002, 03:55 PM
That really doesn't help.

That's exactly what mine is, but It doesn't work.

style.css:

<style type=text/css>
.two {
background-color:#000000;
}

.one {
background-color:#FFFFFF;
}

</style>


page.asp:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<input type="reset" value="Clear" class="one">
<input type="submit" value="Submit" class="two">
</body>
</html>



As I just tested and have seen already... This is make my submit button not have it's style set! How can you help me now?
boxer_1
08-16-2002, 04:02 PM
Hmm...I noticed that your calling your CSS from an external style sheet, yet in the style code you posted you still have the <style></style> tags in place. If you have them in your external style sheet, take them out (or was that used just in your post for the sake of example?).

Just for kicks, try copy/pasting/previewing the code I posted earlier. Does that work or does the problem still appear if you use the exact code I posted? Just for the sake of isolating why the style only seems to be applied to one of your buttons.
boxer_1
08-16-2002, 04:10 PM
Update: I could have put this in my previous post as an edit, but I wanted to be sure you saw it ;). I just tested the code you posted in IE 6 and Mozilla. I'm guessing it must be because you have your <style></style> tags in your external style sheet because both worked in the below format:

<html>
<head>
<style type=text/css>
.two {
background-color:#000000;
}
.one {
background-color:#FFFFFF;
}
</style>
</head>
<body>
<input type="reset" value="Clear" class="one">
<input type="submit" value="Submit" class="two">
</body>
</html>

:confused:
BrainJar
08-16-2002, 04:10 PM
Morgoth, what you have should work but the "Blah, blah, blah" part may be causing the problem. If you have any syntax errors (like a missing semicolon) in there it can stop the browser from parsing all the style rules. IE has a real problem with that.

Give your page a run through the CSS validator at http://validator.w3.org/.
Morgoth
08-17-2002, 04:52 PM
Originally posted by boxer_1
Hmm...I noticed that your calling your CSS from an external style sheet, yet in the style code you posted you still have the <style></style> tags in place. If you have them in your external style sheet, take them out (or was that used just in your post for the sake of example?).

Just for kicks, try copy/pasting/previewing the code I posted earlier. Does that work or does the problem still appear if you use the exact code I posted? Just for the sake of isolating why the style only seems to be applied to one of your buttons.

The code you gave me before works, but I think that's because the style tags are on the page and not in a seperate file. Could that be the problem? And what about removing the style tags at the top and button on the css file, could that be the problem?


BrainJar, the syntax is not the problem. The syntax is the same for both buttons except for the bg colour.


I will now try and get rid of the Style tags in the css file. If that works then Thank you. If it doesn't work, you'll hear from me again.
Morgoth
08-17-2002, 05:10 PM
Well, I have a problem and it is with the syntax!

border-top-width:1px;
border-bottom-width:1px;
border-right-width:1px;
border-left-width:1px;"


The last 4 lines that I put in BOTH style tags... and when i add it it either one or both at the same time, the tag for number 2 doesn't work at all.

HELP?
Morgoth
08-17-2002, 05:11 PM
I'm a idiot.


border-top-width:1px;
border-bottom-width:1px;
border-right-width:1px;
border-left-width:1px;"
boxer_1
08-17-2002, 08:26 PM
You're not an idiot, we all make coding errors from time to time. In regard to the <style></style> tags, yes, remove them from your external style sheet. The style is defined here:

<link rel="stylesheet" href="style.css" type="text/css" />

So, just to calrify, is your issue resolved now?
Morgoth
08-17-2002, 09:51 PM
YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP YEP