Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

ul and li with ids are inheriting why

Status
Not open for further replies.
csphard

csphard

Programmer
Apr 5, 2002
194
US
I have 3 unorder list. the first bar displays correctly

the second one menu displays correctly.

The third one tabs I am having problems with. everything is inhereting it after
you click any link. I thought by placing #tab in front of the ul an li that it would make
its rules only apply to those ul and li and li a that existed with #tab.

What did I do wrong .

html and css

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>hhh</title>


<style>
body {background-color:#C6BE9A;margin:0;padding:0; font-size: .75em;font-family:arial;}
h1,h2,h3,h4,h5,ul,li,span {margin:0;padding:0;}
h1 {width: 880px; height: 70px;margin:0 auto;background: url(images/logo.png) no-repeat; }
h1 span {display: none;}
h2 {color: #310507; text-align: center; margin-top: 5px; font-size: 18px;}
/* _shaded
_shaded_right */
#container {background: url(images/containerbkhome_shaded_right.png) no-repeat; width: 900px;height: 900px; margin:0 auto; }
#header{height: 75px; background-color: #ffffff; width: 900px;}
#content {width: 900px; ;position:relative;}
#bar {margin-top:15px;margin-left: 50px;}
#bar ul {list-style:none; width: 300px;}
#bar li {padding: 18px; margin-top: 10px;font-size: 27px; text-transform: capitalize; color: white; text-align: center;border: 1px solid #CCCCCC;}
#bar li.blue {background-color: #006699;}
#bar li.green {background-color: #999933;}
#bar li.yellow {background-color: #FFCC00;}
#bar li.red {background-color: #310507;}
#menu { }
#menu ul {margin-top:60px;}
#menu li {list-style:none;border-right: 1px dashed black; float: left;}
#menu li a:link,a:visited,a:active {background-color: #393520;text-decoration: none; color: white; text-transform:capitalize; font-size: 10px;display:block;height:140px;width:

204px;padding: 10px;}
#menu li a:hover {background-color:#1C1A0F;}
#menu h3 {background:url(images/house.png) no-repeat ; height: 29px;color: #FFCC00; padding-top: 10px; font-size: 13px; padding-bottom: 10px;border: 1px solid white;}
#tabs {position: absolute;top: 229px;left: 483px; }
#tabs ul {}
#tabs li {list-style: none;}
#tabs li a:link,a:visited,a:active,a:hover {background-color: black;padding: 10px;display:block;color: white; text-decoration: none;text-transform: uppercase;}
#tabs li a:hover {background-color: black;padding: 10px;display:block;color: white; text-decoration: none;text-decoration: underline;}
#footer {clear: both; background-color: black;height: 150px; }


</style>
<base href="file:///C:/Users/csphard/Desktop/testing.html"></head><body>
<div id="container"><!-- container start -->

<div id="header"><h1><span>mmmmmmmmm.com </span></h1></div>
<h2>testing with my message going here.</h2>
<div id="content">

<div id="bar">
<ul>
<li class="green">agent</li>
<li class="blue">expert</li>
<li class="yellow">manager</li>
</ul>
</div>
<div id="menu">
<ul>
<li><a href="#"><h3>test1</h3>Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Aenean laoreet ipsum sit
amet augue ultrices id congue libero mollis. Mauris ac leo urna. In hac
habitasse platea dictumst. Sed vitae vestibulum odio. </a></li>
<li><a href="#"><h3>test2</h3>property managementLorem
ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet ipsum
sit amet augue ultrices id congue libero mollis. Mauris ac leo urna. In
hac habitasse platea dictumst. Sed vitae vestibulum odio.</a></li>

<li><a href="#"><h3>test3</h3>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Aenean laoreet ipsum
sit amet augue ultrices id congue libero mollis. Mauris ac leo urna. In
hac habitasse platea dictumst. Sed vitae vestibulum odio.</a></li>
<li><a href="#"><h3>test4</h3>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aenean laoreet ipsum sit amet augue
ultrices id congue libero mollis. Mauris ac leo urna. In hac habitasse
platea dictumst. Sed vitae vestibulum odio.</a></li>
</ul>

</div>
<div id="col1"><div id="tabs"><ul><li><a href="#">contact ( this is the problem)</a></li></ul></div></div>
</div> <!-- content end -->
<div id="footer">footer imagessssssssddddddddddddddddssssssssssssssssss</div></div> <!-- this is container end -->

</body></html>


howard
 
Sort by date Sort by votes
It's the line of CSS that begins with this rule that causes the problem:
Code: 
#menu li a:link,a:visited,a:active

You are saying that all links inside LIs inside #menu should be 140px high, but then you don't go on to put the '#menu li' selector in front of the active or visited pseudo-classes.

Modifying the rule as follows should cure your problem:
Code: 
#menu li a:link,
#menu li a:visited,
#menu li a:active {

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
P.S. You also seem to have made the same mistake on the further line that begins with this rule:

Code: 
#tabs li a:link,a:visited,a:active,a:hover {

Basically, the comma in a CSS rule definition is the start of a new rule, so you need to make it as complete as necessary... things don't carry over past the comma from before it.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Thank you I did not understand that. I thought they would all inherit from the #menu li or the #tabs li.

I appreciate the help.

Howard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
632
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
576
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top