Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Trying to style DT tag with class

2:30 pm on Jan 22, 2010 (gmt 0)

New User

5+ Year Member

joined:Oct 23, 2008
posts: 20
votes: 0

I have a DL list:

<div id="wrapper">

<div id="middle">
<div id="left_nav">
<dl class="nav_list">
<dt><a href="../index.html">HOME</a></dt>
<dt class="center_bold"> &#9824;</dt>
<dd><a href="../Store/buy_pages/studio_del_red_oak.asp">Studio Series Racks</a></dd>
<dd><a href="../Store/buy_pages/session_del_red_oak.asp">Session Series Racks</a></dd>
<dd><a href="../Store/buy_pages/bandroom.asp">Band Room Rack</a></dd>
<dt>WALL RACKS</dt>
<dd><a href="../Store/buy_pages/profile.asp">Pro-File Wall Mount</a></dd>
<dt>ABOUT US</dt>
<dd><a href="../contact.html">Contact Us</a></dd>
<dd><a href="../testimonials.html">Testimonials</a></dd>
<dd><a href="../about.html">About Us</a></dd>
<dd><a href="../referral.html">Referral Program</a></dd>
<dd><a href="../affiliate.html">Affiliate Program</a></dd>
<dd><a href="../customer_photos.html">Customer Photos</a></dd>
<dt class="center_bold"> OTHER PRODUCTS</dt>
</div><!-- end #left_nav div-->

I am trying to style the "OUR RACKS" text so it is centered and larger in font size. I am using a class called .center_bold. It is working in that it centers this text but the font size will not increase. Can someone explain to me what's going on here. Thanks
Here's the css involved:

#left_nav {
margin: 0px;
width: 180px;
float: left;
height: 100%;
color: #311407;
min-height: 550px;
padding: 0px 5px 5px 10px;
font: bold 100% Arial, Helvetica, sans-serif;
#left_nav dl.nav_list {
width: 210px;
margin-left: -40px;
padding: 0px;
margin-top: 3px;
#left_nav dt {
padding-right: 0px;
padding-left: 40px;
padding-top: 6px;
font-size: 90%;
#left_nav dt a {
color: #311407;
#left_nav dt a:visited {
color: #311407;
#left_nav dt a:hover {
color: #DA830C;
text-decoration: none;
#left_nav dd {
font-size: 14px;
padding: 0px 0px 0px 6px;
#left_nav dd a {
color: #311407;
padding-left: 6px;
#left_nav dd a:visited {
color: #311407;
#left_nav dd a:hover {
color: #DA830C;
text-decoration: none;
.center_bold {
font-weight: bold;
text-align: center;
font-size: 200%;
1:13 pm on Jan 25, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

I do not see the text "OUR RANKS" in your code snippet, but I think your problem is to do with specificity. Try...

#left_nav dt.center_bold {  
font-weight: bold;
text-align: center;
font-size: 200%;