PDA

Click to See Complete Forum and Search --> : STYLE methods

Paco Zarabozo
02-16-2003, 05:10 PM
Hi. I already posted this on CSS, but i think it also applies to Javascript since i'm going to use it with Javascript too.

I'm having some problems with CSS. I'm using a mailserver which generates all the content for a web interface and i'm not able to change anything but CSS.

This program, uses "class" identifiers on everything, so you're supposed to be able to change the appearance of every element in the web page.

Now, there are a few things i don't know how to accomplish.

1. In the CSS file, i have all links in dark blue. BUT, i need one unique link to be white. This link is inside of a span:
<span class="small"><a href="/">Click here to return</a></span> Does anyone know how to make only this link to appear white?

2. The program generates all kind of form inputs. This form elements have not class parameter. They're supposed to be stylized from the CSS file too. And yes, it can be done with INPUT in the CSS file. BUT, what i want, is a different appearance to text inputs and button inputs. Does any one know how can i specify this in the CSS file?

Thank you very much.

Paco.
khalidali63
02-16-2003, 06:21 PM
Can you create another class item in css file?
if yes then just do this.

.anyName{
color:white;
}

and then use this classname in the span class attributes value.

this hsould do it.

I hope thats what you wanted.

Khalid
Paco Zarabozo
02-16-2003, 08:54 PM
No. I can't change the content. However, it already uses a class on that unique link: small. Anyway, i know know the answer for that:span.small a:link {color:white}Now, the second question is the one a haven't resolved. Anyone?

Thanks a lot.

Paco.
Paco Zarabozo
02-16-2003, 11:30 PM
By the way, someone suggested:input[type=text] {...}but it didn't work with Internet Explorer, it works with Mozilla. I think there should be some equivalent for IE. Anyone?

Paco.
khalidali63
02-17-2003, 12:33 AM
Here is an example of setting style for input fields text and button example.
<style type="text/css">
input.button{
border-top-width:1px;
border-bottom-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style:outset;
border-color:#93BEE2;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-top:2px;
padding-bottom:2px;
padding-right:2px;
padding-left:2px;
width:80px;
}
input.text{
border-top-width:1px;
border-bottom-width:1px;
border-right-width:1px;
border-left-width:1px;
border-style:outset;
border-color:#93BEE2;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
padding-top:2px;
padding-bottom:2px;
padding-right:2px;
padding-left:2px;
width:120px;
}
</style>
</head>
<body>
<form name="form1" action="">
<input type="Text" class="text"></input><br>
<input type="Text" class="text"></input><br>
<input type="Text" class="text"></input><br>
<input type="Button" class="button" value="Button"></input><br>
</form>

I hoe this helps you.


Khalid
Paco Zarabozo
02-17-2003, 01:03 AM
Thank you very much. But, like i said before, the content isn't editable and inputs have not class attribute.

So, i need to know a way to specify the appearance of text inputs and buttons in a global-default way, but different for text fields and different for buttons.

Paco.
madsere
03-24-2003, 04:28 AM
I am trying something similar - On a JS form I use a "camoflaged" input form field to put an error message next to empty form fields.

My form has fields like this:

<input name="orderError" class="listErr" style="border-style: outset; border-width: 0;" onFocus="this.blur();" onChange="undo();" value="" size="70">

And in my JS I set the value to this field to something appropriate to the error.

My problem is I don't understand what is the difference between the class and the style fields. It seems that there are certain things that only work in the style field, such as the border-style and border-width below - if I add those to the listErr class in my global stylesheet (separate .css file) it seems to be ignored.

Specifically I am trying to set the "text-decoration: blink" property in the style sheet (yes I know it's best to avoid blinks, but this is one place where I don't really have any option - without a blink users will not see the error and will not understand why the form didn't submit as expected)

TIA!
madsere
03-30-2003, 02:05 AM
Essentially the question kinda boils down to this:

What is the difference between "style" and "class" in an input form field? Obviously certain attributes only works in one, other attributes only in the other.

If the question is obvious I apologise and hope someone will direct me to a page or FAQ explaining it.