CSS for Internet Explore And Mozilla

[fierdor]

I have two CSS files one for IE and other for Firefox...Coz the firefox one doesnt work with IE......But now the form i Have in IE has stopped working...i am posting the two files...

Loginmodule is for Mozilla

Loginmodule1 is for IE

 

loginmodule.css

body
{
font-style: normal;
line-height: normal;
font-variant: normal;
color: #FFFFFF;
background-color: #000000;
}
#Layer2 
{  

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #FFFFFF;
  	background-color: #000000;
	background-image: url(images/revo.jpg);
	width:"98" ;
height:"131"; 
background-repeat: no-repeat;
	background-position: left top;
	letter-spacing: normal;
	text-align: normal;
	vertical-align: top;
	word-spacing: normal;
	white-space: normal;
	overflow: visible;
	position: absolute; 
visibility: visible; 
z-index: 1;
height: 131px;
width: 98px;
	left: 11px;
	top: 11px;
}

#Layer1
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62px; 
font-weight: bold; 
text-transform: uppercase; 
color: #FF0000;
background-color: #000000;
position: absolute; 
visibility: visible; 
z-index: 1;
height: 72px;
width: 157px;
left: 115px;
top: 15px;
}

#Techno
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; 
font-weight: bold; 
color: #FFFFFF;
background-color: #000000;
position: absolute; 
visibility: visible; 
z-index: 2;
height: 22px;
width: 352px;
left: 125px;
top: 115px;
}


#Layer3 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-top: 90px; 
padding-left: 11px; 
margin-top: 90px; 
margin-left: -10px;
z-index: 3;
height: 377px;
width: 196px;

}


#Layer4 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 377px;
width: 405px;
padding-top: 90px; 
padding-left: 98px; 
margin-top: -467px; 
margin-left: 103px;

}

#Layer5 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 18px;
width: 805px;
padding-top: 90px; 
padding-left: 98px; 
margin-top: -499px; 
margin-left: -97px;

}

#Layer6 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 377px;
width: 196px;
padding-top: 90px; 
padding-left: 98px; 
margin-top: -467px; 
margin-left: 512px;
}

#score
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

table
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

 

 

loginmodule1.css

body
{
font-style: normal;
line-height: normal;
font-variant: normal;
color: #FFFFFF;
background-color: #000000;
}
#Layer2 
{  

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: uppercase;
	color: #FFFFFF;
  	background-color: #000000;
	background-image: url(images/revo.jpg);
	width:"98" ;
height:"131"; 
background-repeat: no-repeat;
	background-position: left top;
	letter-spacing: normal;
	text-align: normal;
	vertical-align: top;
	word-spacing: normal;
	white-space: normal;
	overflow: visible;
	position: absolute; 
visibility: visible; 
z-index: 1;
height: 131px;
width: 98px;
	left: 11px;
	top: 11px;
}

#Layer1
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62px; 
font-weight: bold; 
text-transform: uppercase; 
color: #FF0000;
background-color: #000000;
position: absolute; 
visibility: visible; 
z-index: 1;
height: 72px;
width: 157px;
left: 115px;
top: 15px;
}

#Techno
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px; 
font-weight: bold; 
color: #FFFFFF;
background-color: #000000;
position: absolute; 
visibility: visible; 
z-index: 2;
height: 22px;
width: 352px;
left: 125px;
top: 115px;
}


#Layer3 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-top: 185px; 
padding-left: 11px; 
margin-top: 120px; 
margin-left: -10px;
z-index: 3;
height: 377px;
width: 196px;

}


#Layer4 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 377px;

width: 405px;
padding-top: 90px; 
padding-left: 98px; 
margin-top: -467px; 
margin-left: 103px;

}

#Layer5 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 18px;
width: 805px;
padding-top: 90px; 
padding-left: 98px; 
margin-top: -469px; 
margin-left: -97px;

}

#Layer6 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 377px;
width: 196px;

padding-top: 90px; 
padding-left: 98px; 
margin-top: -467px; 
margin-left: 512px;
}

#Layer7 
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
height: 377px;
width: 196px;

padding-top: 90px; 
padding-left: 98px; 
margin-top: -467px; 
margin-left: 512px;
}


#score
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

table
{

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}

 

 

Also tell me wat I shud include in every page where i include the css files...

[dbrimlow]

We would need to see your actual html in order to even begin to debug why a form doesn't work. CSS has nothing to do with actual html tags or elements, but html does - particularly if it is wysiwyg editor generated, improperly hand coded, has html tag errors, no doctype or mistakes in tag rules.

 

Judging by your CSS itself, you're relatively new at css.  We've all been there. You may be new at using standards and/or a Doctype, as well. Another reason we need to see the actual html.

 

Only Dreamweaver calls "position:absolute" elements "layers"; few experienced coders use position:absolute at all anymore. It looks like you are using Dreamweaver and letting it create your css file; your CSS seems "editor or wysiwyg software coded" because it repeats unnecessary, duplicate declaration blocks and leaves out the most basic css short-hand, and some important things css coders first learn. 

 

By default, font-style, line-height, etc. ARE already "normal" ... you ONLY ever need to actually designate "normal" when you are embedded in a parent element, or spanning text, that is set to anything other than default (normal), like font-weight:bold.

 

Why repeat "font-family: Verdana, Arial, Helvetica, sans-serif;" in every element?

The beauty of CSS is to set it once somewhere (as your own default) and only actually designate it in any element where you want to change it.

 

It is recommended, for design and browser consistency, that you set a default font-size in your body; in your case obviously font-size:12px - so you never have to designate it in any other element - like all those "layers", because it is your default size.

 

If you do not designate a default size in your body, the browser will use its own default whenever it encounters an element with no font-size designated ... and almost every browser uses a different size - which can cause havoc with your design.

 

Think about "scalability". You may only have a few select elements in your CSS file now, but as it grows it can become a monster to handle.

 

Post the html and we can help you fix your form.

 

For CSS, everyone should have this link bookmarked - one of the best resources on the rules of CSS ever put out there. It's been around for a while, but still shows, in a few examples, the most important and basic css rules better than any book on CSS I ever read (with maybe Eric Myers as the only exception).

 

Max Design Selectutorial

 

The listutorial and floatutorials (along with listomatics) are well worth looking over AFTER you go over the "Selectutorial".