Replacing CSS with CSS

[Chrisj]

I have been replacing my web's square boxes with round-cornered boxes using this CSS:

 

.t {background: url(images/dot_B76E62.gif) 0 0 repeat-x; width: 53em}
.l {background: url(images/dot_B76E62.gif) 0 0 repeat-y; height: 15em}
.r {background: url(images/dot_B76E62.gif) 100% 0 repeat-y; height: 15em}
.b {background: url(images/dot_B76E62.gif) 0 100% repeat-x;}
.bl {background: url(images/box_bottom_left.gif) 0 100% no-repeat;border:none;height: 15em}
.br {background: url(images/box_bottom_right.gif) 100% 100% no-repeat;height: 15em}
.tl {background: url(images/box_top_left.gif) 0 0 no-repeat;height: 15em}
.tr {background: url(images/box_top_right.gif) 100% 0 no-repeat;padding:10px;height: 15em}

 

And it works fine, along with this html:

 

<div class="t"><div class="b"><div class="l"><div class="r"><div class="b"><div class="br"><div class="tl"><div class="tr">
</div></div></div></div></div></div></div></div>

 

I tried replacing this content-list box, css (below), with the above css, but it didn't work correctly, can you assist me?

 

/*--Content List Container--*/
#content-list {
  width: 640px;
  display: inline-block;
  list-style-type: none;
  border: 6px solid #960000;
  margin-bottom: 5px;
  float: left;
}

#content-list li {
  list-style-type: none;
}

.content-list-narrow {
  width: 256px;
  padding: 5px 4px;
}

#content-list-narrow li {
  margin: 5px 0px;
}

#content-list a:link { color: #000000; text-decoration: none; }
#content-list a:visited { color: #5798ca; text-decoration: none; }
#content-list a:hover { color: #a9ceea; }

.content-list-thumb {
  width: 102px;

[jasonc]

please supply the images.

 

just to understand, you are wanting to replace

 

/*--Content List Container--*/
#content-list {
  width: 640px;
  display: inline-block;
  list-style-type: none;
  border: 6px solid #960000;
  margin-bottom: 5px;
  float: left;
}

#content-list li {
  list-style-type: none;
}

.content-list-narrow {
  width: 256px;
  padding: 5px 4px;
}

#content-list-narrow li {
  margin: 5px 0px;
}

#content-list a:link { color: #000000; text-decoration: none; }
#content-list a:visited { color: #5798ca; text-decoration: none; }
#content-list a:hover { color: #a9ceea; }

.content-list-thumb {
  width: 102px;

 

with

.t {background: url(images/dot_B76E62.gif) 0 0 repeat-x; width: 53em}
.l {background: url(images/dot_B76E62.gif) 0 0 repeat-y; height: 15em}
.r {background: url(images/dot_B76E62.gif) 100% 0 repeat-y; height: 15em}
.b {background: url(images/dot_B76E62.gif) 0 100% repeat-x;}
.bl {background: url(images/box_bottom_left.gif) 0 100% no-repeat;border:none;height: 15em}
.br {background: url(images/box_bottom_right.gif) 100% 100% no-repeat;height: 15em}
.tl {background: url(images/box_top_left.gif) 0 0 no-repeat;height: 15em}
.tr {background: url(images/box_top_right.gif) 100% 0 no-repeat;padding:10px;height: 15em}

<div class="t"><div class="b"><div class="l"><div class="r"><div class="b"><div class="br"><div class="tl"><div class="tr">
</div></div></div></div></div></div></div></div>

 

and have this new code within your already existing site?

 

can we see the site this is to be on or can you supply some more CSS information as you may have conflicting CSS (using the same tags more than once)