SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two list styles conflicting...

    Hi,

    Ok I have a slight problem. I am using two different styles for my <ul>/<li> tags.

    This is how it works:

    Code:
    <td class="contentmain">
    <p>This is some example text - here is a list:
    	<ul>
    		<li>Link 1</li>
    		<li>Link 2</li>
    	</ul>
    </p>
    <div id="menu">
    	<ul>
    		<li><a href="../link/" class="linkmenu">Link 1</a></li>
    		<li><a href="../link/" class="linkmenu">Link 2</a></li>
    	</ul>
    </div>
    </td>
    Now, I need to use two different styles for the td "contentmain" cell and the div "menu".

    Now, I know I could just put a class to the list, but I am creating this site for someone who doesn't know too much about HTML so I need to make it simple.

    These are my two styles:

    Code:
    td.contentmain ul {
    	color: #CCCCCC;
    	list-style-type: none;
    	padding: 20px;
    	margin: 0px;
    	}
    	
    td.contentmain li {
    	background: url(../_img/img_dot.gif);
    	background-repeat: no-repeat;
    	padding-left: 3em;
    	padding-bottom: 3em;
    	font-size: 0.95em;
    	}
    Code:
    div#menu ul  {
    	margin-left: 0px;
    	padding-left: 0px;
    	font-size: 0.95em;
    	}
    
    div#menu  li { 
    	list-style: none;
    	margin-left: 0px;
    	padding-left: 0px;
    	font-size: 0.95em;
    	text-decoration : none;
    	border-bottom: 1px solid #999999;
    	line-height: 2em;
    	}
    Unfortunately, the list in the div "menu" seems to take some of the td.contentmain style - any idea how to say, don't use it...if you know what I mean. I know it's because the div is inside td.contentmain but I have no idea how to sort it out.

    Cheers,
    Chris

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well without isolating the first list in an id or class then your options are limited. You could probably use some adajacent selectors etc but Ie doesn't understand them so its not worth bothering with at present.

    You will just have to take all the properties that you have defined in td.contentmain ul and td.contentmain li and then redefine them in the div#menu ul and div#menu li styles.

    For example if you don't want the background image you can just set background-image:none or just set the shorthand background - background:#fff which will get rid of the image and give a white background. So for every property you have defined in the first style you make sure you set the correct one in the second style.

    I'd be inlcined to give each list an id to make things more specific and easier to manage and save the cascade from happening.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers paul, as always your input made perfect sense


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •