Rule works inline but not in stylesheet? 4

[rockyroad]

I have this rule in my forms.css -

#horizontalForm input.submit
{
	margin-left:45px;
	color:#FFFFFF;
	background-color:#FF0000;
}

(the form id=horizontalForm)

which does not work...

I am trying to do this - which does...

<input type="submit" value="Submit" style="margin-left:45px; color:#FFFFFF; background-color:#FF0000; ">

I suspect my scope is wrong? Can anyone help, I am stumped...

 

[BabyJeffy]

The rule doesn't do what you think it does...

#horizontalForm input.submit

Talks about an element with ID=horizontalForm that has a child input element with a class called "submit". An immediate fix for you is to add a class="submit" to the <input>.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[BillyRayPreachersSon]

While some browsers support CSS attribute selectors, IE does not... so you'll have to use the method Jeff showed above, until this technique is better supported.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

[tt]#horizontalForm input.submit[/tt]

Talks about an element with ID=horizontalForm that has a child input element with a class called "submit".

Just to clarify Jeff's statement (which might otherwise be taken the wrong way round) - the rule will apply to an input element with a class called submit, that's inside some other element with an id of horizontalForm.

What the OP perhaps meant was

#horizontalForm input[type=submit]

This works just fine on modern browsers, but sadly not on IE.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[rockyroad]

Thanks. That worked. Now I have another question...

Right now I am using some .CSS like this...

#horizontalForm fieldset
{
display: block;
margin:0;
padding:0;
border:0;
margin-bottom:15px;
}

But I see a potential problem, if I want to use more than one form on a page, i would need to have 2 forms referencing id="horizontalForm".. a .CSS no-no...

So my question is could I refernce a class the same way, i.e. ...

use <form class ="horizontalForm">

and reference

.horizontalForm fieldset
{
display: block;
margin:0;
padding:0;
border:0;
margin-bottom:15px;
}

or

.horizontalForm fieldset.radio input

or

.horizontalForm input.submit
{
margin:0 0 0 10px;
padding:1px;
color:#FFFFFF;
background-color:#FF0000;
font-weight:bold;
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
border: 1px solid #CCCCCC;
}

will any of these work the same way?

Thanks

 

[Vragabond]

They will all work in the same way with a little less specifity as the ids. But I am pretty sure that will not be bothering your examples though.

 

[ChrisHunt]

So my question is could I refernce a class the same way...

Did you try doing it? You'd have got the answer to your question (which is "yes") in less time than it took to ask it here.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[rockyroad]

Thanks everyone for your help.