How CSS code can interfere each other?

[wei]

I use the CSS layout code from this site along with other CSS code. They interfere each other. When they are include in a JSP file as the following:

<link rel="stylesheet" type="text/css" media="screen,projection" title="elements of form" href="<c:url value='/css/col2.css'/>"/>
<link rel="stylesheet" type="text/css" media="screen,projection" title="elements" href="<c:url value='/css/blocks.css'/>"/>

where the col2.css is the column CSS layout from this site.

In the above situation, the layout CSS code works, but not the result. If I reverse the order of the link tags, the layout code doesn't work, but the result does.

Any possible cause?

[forum_amnesiac]

People here will probably want to see the code and the CSS files can you post it here or give links

[boogyman]

wei, this is an issue of inheritance, hence "Cascading". If you have any other issues, please lemme know.

[wei]

People here will probably want to see the code and the CSS files can you post it here or give links

That is the second set of CSS layout code I try with the same issue. I think that is not related with the CSS code itself, but something else. Now, the question is what is the "something else".
The col2.css file which is from this site:

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-right: 200px; /*Set right margin to RightColumnWidth*/
}

#rightcolumn{
float: left;
width: 200px; /*Width of right column in pixels*/
margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
} 

And the block.css file: ...

[wei]

And the block.css file:

/******************************************************************************/
#signup table {
 background-color: #F9FBFD;
 color: #000000;
 width: 400px;
 border: 1px solid #D7E5F2;
 border-collapse: collapse;
}

#signup td {
 border: 1px solid #D7E5F2;
 padding-left: 4px;
}

.labelcell {
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: #3670A7;
 background-color: transparent;
 width: 220px;
}

.fieldcell {
 background-color: #F2F7FB;
 color: #000000;
 margin-right: 0px;
 padding-right: 0px;
}

.smalllabelcell {
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: transparent;
 color: #3670A7;
 width: 100px;
}

.smallfieldcell {
 background-color: #F2F7FB;
 color: #000000;
 text-align: right;
 
}

.fieldcell input {
 width: 200px;
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: #D7E5F2;
 color: #102132;
 border: 1px solid #284279;
 margin-right: 0px;
}

.smallfieldcell input {
 width: 100px;
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: #D7E5F2;
 color: #102132;
 border: 1px solid #284279;
}

.fieldcell select {
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: #D7E5F2;
 color: #102132;
 border: 1px solid #284279;
}


/* Design 5 */
table.Design5 {
    border-spacing: 0px;
    border-collapse: collapse;
    border-top: 4px solid #284279;
    border-bottom: 1px solid #284279;
}
table.Design5 th {
    text-align: left;
    font-weight: normal;
    padding: 0.2em 0.5em;
    border-top: 1px dotted #284279;
     color: Black;
}
table.Design5 td {
      font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-align: left;
    border-top: 1px dotted #284279;
    padding: 0.2em 0.5em;
     color: Black;
}
table.Design5 thead th {
      font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-align: center;
    border-bottom: 1px solid #284279;
}
table.Design5 td.Corner {
    text-align: right;
}
table.Design5 td a {
 text-decoration: none;
}

#summary {
    padding: 0.5em;
    margin: 0 0 2em 0;
    background: #F8F7EF;
    border-top: 1px dashed #B2B2B2;
    border-bottom: 1px dashed #B2B2B2;
}
#summary p {
    padding: 0; 
    margin: 1em;
}
#summary b {
    margin: 0 0.5em;
}
/* new item*/
.item {border-bottom: 1px dashed #B2B2B2;}

h3.title {
    margin: 1em 0 0;
    font-size: 1.5em;
    color: #BBBBBB;
    }
    
h3.title a
{
    font-weight: bold;
    color: #336;
    text-decoration: none;
}    

h3.title a:hover
{
    color: Silver;
    text-decoration: none;
}

h3.entry_title {
    margin: 1em 0 .5em;
    font-size: 1.5em;
    font-weight: bold;
    color: #336;
}    

h6.byline {
    margin: 0.25em 0 0.5em;
    font-size: .8em;
    font-weight: normal;
    }

h6.rightCorner {
    margin: 0.25em 0 0;
    font-size: .8em;
    font-weight: normal;
    float:     right;
}

h6.rightCorner a {
    color: #336;
    font-weight: normal;
    text-decoration: none;
}

h6.rightCorner a:hover
{
    text-decoration: underline;
}

#comment{
    margin: 0 0;
    border-top: 1px dashed;
    border-bottom: 1px solid Black;
    padding: 2em 0 1px 2em;
}    

/******************************************************************************/
/* used in the entry page*/
#navigation {
 font-family: Arial, Helvetica, sans-serif;
 font-size: .9em;
}
#navigation ul {
 list-style: none;
 margin: 0;
 padding: 0;
 padding-top: 4px;
}
#navigation li {
 display: inline;
}
#navigation a:link, #navigation a:visited {  
 margin-right: 2px;
 padding: 3px 10px 2px 10px;  
 background-color: #D7E5F2;
 text-decoration: none;
 border-top: 1px solid #FFFFFF;
 border-left: 1px solid #FFFFFF;
 border-bottom: 1px solid #717171;
 border-right: 1px solid #717171;
}
#navigation a:hover {
 border-top: 1px solid #717171;
 border-left: 1px solid #717171;
 border-bottom: 1px solid #FFFFFF;
 border-right: 1px solid #FFFFFF;
}
/* used in the entry page*/
#navigation2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: .9em;
}
#navigation2 ul {
 list-style: none;
 margin: 0;
 padding: 0;
 padding-top: 4px;
}
#navigation2 li {
 display: inline;
}
#navigation2 a:link, #navigation2 a:visited {
    margin-right: 2px;
    padding: 3px 10px 2px 10px;
    background-color: Silver;
    text-decoration: none;
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #717171;
    border-right: 1px solid #717171;
}
#navigation2 a:hover {
 border-top: 1px solid #717171;
 border-left: 1px solid #717171;
 border-bottom: 1px solid #FFFFFF;
 border-right: 1px solid #FFFFFF;
}

/*  Eric Meyer's Simple Separators */
 ul.simpleSeparators
{
    padding-left: 0;
    margin-left: 0;
    border-bottom: 1px dotted #F60;
}

ul.simpleSeparators li
{
    list-style: none;
    margin: 0;
    padding: 0.25em;
    border-top: 1px dotted #F60;
    text-decoration: none;
}

ul.simpleSeparators li a
{
 text-decoration: none;
 font-weight: bold;
color: #000000;
}

ul.simpleSeparators li a:hover
{
    text-decoration: none;
    font-weight: lighter;
}

/* The holly Hack: Hides from IE5-Mac \*/
* html ul.simpleSeparators { height: 1%}
/* End hide from IE5 Mac*/

/* used in category and city */
 .LeftBorderList
{
/* container div set-up */
padding: 10px;
font-size: 1em;
/* Set font-size so theres no default */
line-height: 22px;
/* Set line-height because I think it looks better like this ;^) */
letter-spacing: .075em;
/* Set letter-spacing so text don't jump as much when it turns bold on hover */
}

.LeftBorderList a
{
/* Set text-decoration and color so there is no default */
text-decoration: none;
color: #000000;
}

.LeftBorderList a:hover
{
font-weight: bold;
    letter-spacing: .075em; /* Set letter-spacing back to 0 so text don't jump as much when it turns to bold on hover (Still jumps some though) */
}

.LeftBorderList ul
{
list-style-type: none;
padding-left: 0px;
margin: 0px;
}

.LeftBorderList ul li
{
padding-left: 5px;
margin-left: 2px;
color: #000000;
/* Set margin-left to set-up the left border */
}

.LeftBorderList li 
{
 border-left: 3px solid #BF9960; 
 }

/* used in column title */

h4.column {
    color: black; 
    background-color: #FFCC80;
    text-align: center;
}

h3.column {
    color: black; 
    background-color: #FFCC80;
    text-align: center;
}

/* rollover list used in the front page for new Ads */
#rollover_container { width: 160px; }

#rollover_container ul
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
}

#rollover_container a
{
display: block;
padding: 3px;
background-color: #336;
border-bottom: 1px solid #eee;
}

#rollover_container a:link, #rolloverlist a:visited
{
color: #EEE;
text-decoration: none;
}

#rollover_container a:hover
{
background-color: #6078BF;
color: #fff;
}

* html #rollover_container { height: 1%; } /* for IE/Win */
*>html #rollover_container { he\ight: auto; } /* for IE5/Mac */

/* form */

.fieldset {
    width:300px; }
.fieldset .label {
    text-align:right;
    width:70px;
    float:left;
    padding:0.2em;
    margin:0;
    margin-top:0.3em; }
.fieldset .nobr {
    display:none; }  
.fieldset .textfield {
    margin:3px;
    height:20px;
    width:200px; }
.fieldset .textarea {
    margin:3px;
    height:165px;
    width:200px; }
    
 

.button {
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 background-color: #D7E5F2;
 color: #102132;
 margin-left: 12px;
 margin-top: 3px;
 margin-bottom: 2px;
}    

.indented {
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
  background-color: #D7E5F2;
 background-color: transparent;
 display: block;
 margin-right:0.5em;
 float: left;
 width: 150px;
 text-align:right;
}

/* ?? */
fieldset {
    border: 1px solid Navy;
    padding: 1em;
}

legend {
    padding: 0.2em 0.5em;
    border: 1px solid Navy;
    color: Navy;
    font-size: 90%;
    text-align: right;
} 

[wei]

con't

/*  */
form#general p {
   width: 35em;
   clear: both;
    margin: 1em;
}

form#general p label {
   display: inline;
   float: left;
   width: 10em;
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin-right:0.5em;
 text-align:left;    
}

form#general p input {
   display: inline;
   float: left;
   width: 24em;
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 text-align:left;    
}

form#general p input.text {
    border: #26a solid 1px
}

form#general p button {
margin-left: 25em;
clear: both;
color: #000;
background: #D7E5F2;
border: 2px #9cf outset
}

form#general p textarea {
   display: inline;
   float: left;
   width: 24em;
    height: 10em;
 font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
 text-align:left;    }

form#general fieldset {
    border: 1px solid Navy;
    padding: 1em;
}

form#general legend {
    padding: 0.2em 0.5em;
    border: 1px solid Navy;
    color: Navy;
    font-size: 90%;
    text-align: right;
}
/* used in the entry page*/
block {
    display: block;
   float: left;
 text-align:left;    
}

block label {
 background-color: transparent;
 display: block;
 margin-right:0.5em;
 width: 150px;
}

/* page bottom list  */
 #site_navigation ul
{
    margin: .7em 0 .7em;
    padding: 0;
    list-style-type: none;
    font-size: 1em;
}

#site_navigation ul li { display: inline; }

#site_navigation ul li a
{
    text-decoration: none;
    padding: 0 .4em 0 .4em;
    color: #000;
}

#site_navigation ul li a:hover, #site_navigation ul li a#current
{
color: #CCCCCC;
}

/* previous & next buttons  */
 ul#previous_next
{
    list-style-type: none;
    margin: 1em 0 1em;
    padding: .5em 0;
    border-top: 1px solid #666;
    font-size: .9em;
}

ul#previous_next li a
{
    display: block;
    width: 5em;
    color: #000;
    background-color: #DDDDDD;
    padding: .2em 0;
    text-align: center;
    text-decoration: none;
}

ul#previous_next li a:hover
{
color: #000;
background-color: #BBBBBB;
}

ul#previous_next .left { float: left; }
ul#previous_next .right { float: right; }

/* pre */
pre#content{
    font-size: 100%;
}
/* */
.pre {white-space:pre}
.nowrap {white-space:nowrap}

/* http://labs.silverorange.com/images/tabsupdate/tabs.css */

#main {
    border: 1px solid #666;
    clear: both;
    background: #FBFAF4;
    padding-top: 2em;
        min-width: 71.5em;
}

#contents {
    padding: 1.5em;
    background: White;
    min-height: 300px;
    border-top-color: #CCC;
}

* html #contents  {height: 1%;}
*>html #contents  {he\ight: auto;}

#header {
    position: relative;
    width: 100%;
    height: 3em;
    width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    min-width: 71.5em;
}

#header ul#primary {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1px;
    width: 45em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
    min-width: 71.5em;
}

#header ul#primary li  {
    display: inline;
    list-style: none;
}

#header ul#primary a,#header ul#primary span,#header ul#primary a.current {
    width: 8em;
    display: block;
    float: left;
    padding: 4px 0;
    margin: 1px 2px 0 0;
    text-align: center;
    font-family: tahoma, verdana, sans-serif;
    font-size: 85%;
    text-decoration: none;
    color: #333;
}

#header ul#primary span,#header ul#primary a.current,#header ul#primary a.current:hover {
    border: 1px solid #666;
    border-bottom: none;
    background: #FBFAF4;
    padding-bottom: 6px;
    margin-top: 0;
}

#header ul#primary a {
    background: white;
    border: 1px solid #AAA;
    border-bottom: none;
}

#header ul#primary a:hover {
    margin-top: 0;
    border-color: #666;
    background: #FBFAF4;
    padding-bottom: 5px;
}

#header ul#secondary {
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: -1.4em;
    left: 1px;
    width: 50em; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
}

#header ul#secondary li a,#header ul#secondary li span {
    width: auto;
    display: block;
    float: left;
    padding: 0 10px;
    margin: 0;
    text-align: justify;
    border: none;
    border-right: 1px dotted #AAA;
    background: none;
}

#header ul#secondary li a {
    color: #06C;
    text-decoration: underline;
}

#header ul#secondary li a:hover {
    color: #333;
    background: transparent;
    padding: 0 10px;
    border: none;
    border-right: 1px dotted #AAA;
}

#header ul#secondary li a:active {
    color: #000;
    background: transparent;
}

#header ul#secondary li:last-child a { border: none; }

/* */

ul#navbar{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap;
font: 18px Georgia, Times, serif; 
overflow: hidden;
min-width: 750px;
background: #FBFAF4;
border-top: 1px solid #333;
}
ul#navbar li{
display: inline;
margin: 0 .3em
}
ul#navbar a{
    text-decoration: none;
    padding: 0 0 3px;
    border-bottom: 4px solid #FBFAF4;
    color: #666;
    text-transform: uppercase;
}
ul#navbar a#active{
border-color: #F60;
color:#06F
}
ul#navbar a:hover{
border-color: #F60;
color: #999
}

/* */
.vnav{
width: 160px;
padding: 0 0 1em 0;
margin: 1em 0 1em;
font-family: Georgia, Times, serif;
font-size: 1.2em; 
font-weight: bold;
color: #333;
background: #FBFAF4;
}
.vnav ul
{
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #000;
}
.vnav li
{
border-bottom: 1px solid #fff;
margin: 0;
}
.vnav li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 4px solid #FBFAF4;
color: #000;
text-decoration: none;
width: 100%;
}
html>body .vnav li a { 
    width: auto;
    text-decoration: none;
}
.vnav ul a#current{
border-color: #F60;
color:#06F;
text-decoration: none;
}
.vnav li a:hover
{
border-left: 4px solid #F60;
color: #999;
background-color: #FFF;
}
/* */
p.note {
    background: #EEE;
    padding: 4px;
    font-family: tahoma;
    font-size: 85%;
    line-height: 130%;
    margin-top: 0;
}

/* account bar */
#account {
    margin: .4em 2em 0 0;
    padding: 0 0 0 0;
    float: right;
    z-index: auto;
    font-size: .9em;
}

#account a:link {
    text-decoration: none;
    color: Black;
}
#account a:visited {
    text-decoration: none;
    color: Black;
}
#account a:active {
    text-decoration: none;
    color: Black;
}
#account a:hover {
    text-decoration: none; 
    color: Black;
    font-weight: bolder;
} 

I don't think it is an inheritance issue since two set of layout code with different class/id names lead to the same problem.