Opera and FF will typically display things similarly. IE is the only browser that is different. So if you include your stylesheets for FF/Opera, and then do the <!--[if IE]><![endif]--> switch, the last stylesheet loaded will overwrite the previous ones if the declarations are the same.
So what you'd want is something like what was previously posted. If IE is the browser, the IE stylesheet will override the other stylesheet.
Basically styles have precedence. Remote (<link rel="stylesheet">) stylesheets have the least precedence. Meaning they're loaded first, and give a base. Inline Head stylesheets (those in the <head> of the document) are loaded second. They override the remote stylesheets. The last is inline styles. These are the styles defined by the style tag of many HTML elements. They override all other styles. So graphically you have:
Inline Styles
|
+- Inline Head Styles
| |
| +- External (Remote) Stylesheets
The external (remote) stylesheets are loaded in a top-down fashion (listed first = first loaded) and each successive stylesheet overrides the previous. So if you have three stylesheets:
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
Stylesheet1 gives a base. Stylesheet2 is loaded and overrides those declarations that are duplicates in stylesheet1. Stylesheet3 is loaded and overrides those declarations that are duplicates in bothstylesheet1 AND stylesheet2.
Hope that helps. Also, moving to the correct forum.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test of CSS</title>
<style type="text/css">
#container
{
width: 500px;
height: 700px;
background-color: #000;
border: 2px dashed #900;
}
#box
{
width: 400px;
height: 400px;
margin: 50px;
border: 0;
background-color: #f90;
}
#box p
{
width: 400px;
height: 20px;
margin: 190px 0;
text-align: center;
text-decoration: underline;
}
</style>
<style type="text/css">
#container
{
width: 500px;
height: 700px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -350px;
margin-left: -250px;
background-color: #000;
border: 2px dashed #900;
}
#box
{
width: 400px;
height: 400px;
margin: 50px;
border: 0;
background-color: #abd;
}
#box p
{
width: 400px;
height: 20px;
margin: 190px 0;
text-align: left;
text-decoration: line-through;
}
</style>
<style type="text/css">
#container
{
width: 500px;
height: 700px;
background-color: #0c0;
border: 2px groove #060;
}
#box p
{
text-align: right;
font-variant: small-caps;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="box">
<p>Should be: Centered (v & h) to the right in caps!!</p>
</div>
</div>
</body>
</html>
There's an example of how 3 different stylesheets override eachother.
