Solved

How do I override existing unordered list or list items

Posted on 2011-02-11
5
637 Views
Last Modified: 2012-05-11
I have a page that I need to apply some css based tabs for some quick navigation. The css uses id selectors, which I thought would have overridden the existing css for the ul and li tags, however it is not working for me and I can't figure out why? Instead it's also showing the little 'arrow' images from a prior css class somewhere else upsteam in my .css file.

My css for the tabs is located below along with a screen shot that shows what happens when I render the page. I also have included the html.
/* begin css tabs for use with racer profiles */
 
ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #6c6; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}
 
ul#tabnav li { /* do not change */
display: inline;

}
 
div#tab1 li.tab1, div#tab2 li.tab2, div#tab3 li.tab3, div#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */

}
 
div#tab1 li.tab1 a, div#tab2 li.tab2 a, div#tab3 li.tab3 a, div#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}
 
ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #cfc; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;

}
 
ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */

}
 
/* end css tabs for use with racer profiles */


<!-- this is how I'm calling it in my page -->
<div id="tab1">
	<ul id="tabnav"> 
	   <li class="tab1"><a href="index.html">Tab One</a></li> 
	   <li class="tab2"><a href="index2.html">Tab Two</a></li> 
	   <li class="tab3"><a href="index3.html">Tab Three</a></li> 
	   <li class="tab4"><a href="index4.html">Tab Four</a></li> 
    </ul>
</div>

Open in new window

How the css tabs are displaying now How the css tabs are displaying now
0
Comment
Question by:zberg007
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
5 Comments
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 34874260
the order in which you give styles also matters.

Also, which part of the style needs to change, and what were the default styles?
0
 

Author Comment

by:zberg007
ID: 34874638
There is a <div class="text-box"> being called right before my <div id="tab1">. When I look at my style.css sheet, I found this block of css being called on lines 391 through 419. My css is being called from the same style.css sheet afterwards on lines 1040 through 1086.

Here is the css block on lines 391 through 419:

 
/*** OL UL style***/
		.text-box ul { padding:6px 0px 20px 3px; overflow:hidden; height:100%;}
		.text-box ul li { background:url(images/marker.gif) no-repeat 0 8px; padding:1px 5px 3px 19px;  list-style-image:none; list-style:none; font-weight:normal;}
		.text-box ul li ul { margin-left:10px;}
		.text-box ul li ol { margin-left:15px;}
		.text-box ul li ol li { list-style-type:decimal;}
		
		.text-box ol { padding-left:2px;}
		.text-box ol li { padding:0px; margin-left:13px;  font-weight:normal;list-style-type:decimal;}
		.text-box ol li ul { padding:2px 0px 5px 2px;}
		.text-box ol li ul li { font-weight:normal; background:url(images/marker.gif) no-repeat 0 6px; padding:0px 5px 8px 12px;}
		
		.text-box ul li { list-style-image:none; list-style:none;}
		
		.text-box ul li a { /*text-decoration:none;*/ color:#fff; font-weight: bold;}
		/*.text-box ul li a:hover { text-decoration:underline;}*/
		

		.text-box ul li ul { margin-left:15px;}
		.text-box ul li ol {margin-left:20px;}
		.text-box ul li ol li { list-style-type:decimal;background:none;}
		.text-box ul li ol li a {}
		
		.text-box ol { padding:5px 0px 5px 2px;}
		.text-box ol li{ padding:0px; margin-left:20px;}
		.text-box ol li a { padding-left:0px; text-decoration:none; font-weight:normal;}
		.text-box ol li a:hover{ text-decoration:underline; }
		.text-box ol li ul li a { font-weight:normal; text-decoration:underline;}
		.text-box ol li ul li a:hover {text-decoration:none;}

Open in new window

0
 

Author Comment

by:zberg007
ID: 34874684
Sorry, I missed your other question about which styles need to change. Basically, I need the images (I'm assuming that's the marker.gif) to go away and let just my css tabs for use with racer profiles takeover the ul and li in this particular instance.

Thanks!
0
 

Assisted Solution

by:zberg007
zberg007 earned 0 total points
ID: 34875952
I ended up replacing the <div class="text-box"> with <div class="profile-text-box">. Even though I'm not really using this class in my style.css sheet, this allowed the css in <div id="tab1"> to function properly including the id selectors. I awarded 250 points to gurvinder372 for inspiring me to look in this direction. Thanks!
0
 

Author Closing Comment

by:zberg007
ID: 34904880
I awarded 250 points to gurvinder372 for inspiring me to look in this direction. Thanks!
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question