PDA

View Full Version : Duplicate css elements in diff css files, overwriting.


molotov
October 26th, 2005, 02:44 PM
Ok, let's hope i can explain this well. I'm working on a page that has a css for it. This page will be placed as an include within a larger frame of a page(which is basically a menu header and a footer). The frame has it's own css file associated with it that generally applies to included pages. This page has some special formatting needs and so it has it's own css file. Both files have body, div, html, ul and li formatting. Is there a way i can limit the included pages css to just affect the inluded page. The problem i'm running into is that it's messing with the header and footer of the main page. I know what elements are causing the problem. It's the html, body, div, ul and li; they are all given the same properties by the included pages css. When removed the included page gets funky.

Any help is greatly appreciated.
Ankou
October 26th, 2005, 05:16 PM
Are you really using frames? Because the frame and iframe tag won't inherit CSS properties.

What you could do is to set an ID for the body tag of your included page and then change the CSS to include the body#ID.


<html>
<body id="include">
<div>
<ul>
<li>Item One</li>
</ul>
</div>
</body>
</html>



body#include{
margin: 20px;
padding: 0;
background-color: #cde;
}

body#include div{
padding: 10px;
border: 1px solid #333;
}

body#include ul{
padding-left: 10px;
list-style: none;
}

body#include li{
background: #999;
padding-left: 5px;
}






Of course they may be an easier way.
molotov
October 27th, 2005, 08:54 AM
I'm not using frames. That looks like a solid work around tho, thanks for the reply.