View Full Version : CSS doesn't work on I.E


scorpio_chick
01-03-2006, 10:22 AM
Well...not all of it. I'm just complaining about the textarea/input/buttons. I'm using Mozilla FireFox and i see the textarea/input/buttons right with the border/color correct but when i view it on I.E any input or textarea wouldn't come up.
I've then arranged the order of the CSS, the input/textarea/ are now showing on I.E and Mozilla FF but it doesn't seem to follow the CSS. There are no colors/borders on the textarea/input when i view it on both of the servers.

My Current CSS that works in I.E and Mozilla.

<style type="text/css"> { }
A:link {text-decoration: none; font-weight: bold; color:#3380C1;}
A:visited {text-decoration: none; font-weight: bold; color:#193E5D;}
A:hover {color:#FF4393; background: #000000; text-decoration: none;}

body{background-color: #FFFFFF;
font-family: arial;
letter-spacing: 1pt;
font-size: 9px;
color:#000000;
letter-spacing: 0pt;
line-height:9px;
font-weight:bold;
margin: 0;
padding: 0;
}

b
{ font-family: arial;
font-size: 9px;
line-height: 9px;
font-weight: bold;
color: #D60060;
}

h1
{color: #DF0073;
font-family: arial;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-align: left;
margin: 0;
margin-top: 1px;
margin-bottom: 1px;
padding: 0px;
padding-bottom: 0px;
border-bottom: 1px dashed #000000;
border-top: 0px;
letter-spacing: 3pt;
font-variant: caps;
}

td
{ font-family: Arial;
color: #000000;
background-color: #FFFFFF;
letter-spacing: 0pt;
font-weight: bold;
font-size: 9px;
line-height: 1;
text-align:center;
padding-left: 0cm;
padding-right: 0cm;
padding-top: 0cm;
padding-bottom: 0cm;
padding: 0cm;
padding: 0cm 0cm; }

.special
{font-family: arial;
letter-spacing: 4pt;
font-size: 10px;
color:#484848;
letter-spacing: 0pt;
line-height:10px;
font-weight:bold;
font-align: center;

textarea, input, button
{color:#C0DFFF;
background-color: #A1A1A1;
filter: alpha(style=0,opacity=0);
font-size: 7pt;
font-weight: bold;
text-decoration: none;
font-family: century gothic;
text-align: left;
border: 1px solid #5B5B5B
}

{
scrollbar-face-color: #858585;
scrollbar-highlight-color: #595959;
scrollbar-3dlight-color: #A9A9A9;
scrollbar-darkshadow-color: #595959;
scrollbar-shadow-color: #A9A9A9;
scrollbar-arrow-color: #4D9DFF;
scrollbar-track-color: #CACACA;
}

</style>


This one works in Mozila Firefox only.

<style type="text/css"> { }
A:link {text-decoration: none; font-weight: bold; color:#3380C1;}
A:visited {text-decoration: none; font-weight: bold; color:#193E5D;}
A:hover {color:#FF4393; background: #000000; text-decoration: none;}

body{background-color: #FFFFFF;
font-family: arial;
letter-spacing: 1pt;
font-size: 9px;
color:#000000;
letter-spacing: 0pt;
line-height:9px;
font-weight:bold;
margin: 0;
padding: 0;
}

b
{ font-family: arial;
font-size: 9px;
line-height: 9px;
font-weight: bold;
color: #D60060;
}

h1
{color: #DF0073;
font-family: arial;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-align: left;
margin: 0;
margin-top: 1px;
margin-bottom: 1px;
padding: 0px;
padding-bottom: 0px;
border-bottom: 1px dashed #000000;
border-top: 0px;
letter-spacing: 3pt;
font-variant: caps;
}

td
{ font-family: Arial;
color: #000000;
background-color: #FFFFFF;
letter-spacing: 0pt;
font-weight: bold;
font-size: 9px;
line-height: 1;
text-align:center;
padding-left: 0cm;
padding-right: 0cm;
padding-top: 0cm;
padding-bottom: 0cm;
padding: 0cm;
padding: 0cm 0cm; }

textarea, input, button
{color:#C0DFFF;
background-color: #A1A1A1;
filter: alpha(style=0,opacity=0);
font-size: 7pt;
font-weight: bold;
text-decoration: none;
font-family: century gothic;
text-align: left;
border: 1px solid #5B5B5B
}

.special
{font-family: arial;
letter-spacing: 4pt;
font-size: 10px;
color:#484848;
letter-spacing: 0pt;
line-height:10px;
font-weight:bold;
font-align: center;

{
scrollbar-face-color: #858585;
scrollbar-highlight-color: #595959;
scrollbar-3dlight-color: #A9A9A9;
scrollbar-darkshadow-color: #595959;
scrollbar-shadow-color: #A9A9A9;
scrollbar-arrow-color: #4D9DFF;
scrollbar-track-color: #CACACA;
}

</style>


what do you thinks the problem??

Monkey Bizzle
01-03-2006, 05:02 PM
Here is your first style sheet cleaned up a little bit:

<style type="text/css">

A:link
{text-decoration: none;
font-weight: bold;
color: #3380C1;}

A:visited
{text-decoration: none;
font-weight: bold;
color: #193E5D;}

A:hover
{color: #FF4393;
background-color: #000000;
text-decoration: none;}

body
{background-color: #FFFFFF;
font-family: Arial;
letter-spacing: 1pt;
font-size: 9px;
color: #000000;
line-height: 9px;
font-weight: bold;
margin: 0;
padding: 0;
scrollbar-face-color: #858585;
scrollbar-highlight-color: #595959;
scrollbar-3dlight-color: #A9A9A9;
scrollbar-darkshadow-color: #595959;
scrollbar-shadow-color: #A9A9A9;
scrollbar-arrow-color: #4D9DFF;
scrollbar-track-color: #CACACA;}

b
{font-family: Arial;
font-size: 9px;
line-height: 9px;
font-weight: bold;
color: #D60060;}

h1
{color: #DF0073;
font-family: Arial;
font-size: 12px;
line-height: 12px;
font-weight: bold;
text-align: left;
margin-top: 1px;
margin-bottom: 1px;
padding: 0px;
border-bottom: 1px dashed #000000;
letter-spacing: 3pt;
font-variant: caps;}

td
{font-family: Arial;
color: #000000;
background-color: #FFFFFF;
font-weight: bold;
font-size: 9px;
line-height: 1px;
text-align: center;
padding: 0cm;}

.special
{font-family: Arial;
letter-spacing: 4pt;
font-size: 10px;
color: #484848;
line-height: 10px;
font-weight: bold;
text-align: center;}

textarea, input, button
{color: #C0DFFF;
background-color: #A1A1A1;
filter: alpha(style=0,opacity=0);
font-size: 7pt;
font-weight: bold;
font-family: Century Gothic;
text-align: left;
border: 1px solid #5B5B5B}

</style>

I'm not sure if the filter: alpha even works on text areas but you might want to take it out. Opacity=0 would imply that it's completely transparent, meaning not there. Also, if this is an external style sheet, take out the <style></style> tags.

scorpio_chick
01-04-2006, 12:13 PM
that doesn't work either. it has the same effect as my current css.
thanks anyhow...

iTom
01-04-2006, 01:13 PM
Change you textarea, input, button ect to this:


textarea, input, button
{color: #C0DFFF;
background-color: #A1A1A1;
filter: alpha(opacity=70);
font-size: 7pt;
font-weight: bold;
font-family: Century Gothic;
border: 1px solid #5B5B5B}


You don't need style=0 because the default is 0. And the opacity is 70.... that works better. You also don't need text-align: left, the default is left.

Monkey Bizzle
01-04-2006, 06:59 PM
Please post a link to your site. Something else may be causing the problem.

scorpio_chick
01-06-2006, 11:51 AM
No. It worked now. Thaaaaaaank you!!!!!!!
:)