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?:confused:

[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.