Solved

CSS Multiple List - Cascade Priority

Posted on 2013-01-05
4
291 Views
Last Modified: 2013-01-05
I am trying to have two separate customized lists within a single CSS container.
The first list uses the ID of the container and the second list uses a CLASS. The second list is displaying the values from the first list. I realize that this is the priority of the cascade, but I don't understand why the second list is using the value from the first as it appears closest to the list.
I would like to be able to have two lists within the same container and both lists have unique display properties.
I will paste the code (below).
Any help would be greatly appreciated.
dresdena1

<< BEGIN PASTE
#contentbox {
      background-image: url(gray_table_back.jpg);
      width:986px;
      text-align:center;
      margin-bottom:-15px;
      }
#contentbox h1 {
      font: bold 36px arial,helvetica,sans-serif;
      color:white;
      padding: 10px 0;
}
#contentboxleft{
      width:329px;
      float:left;
}
#contentboxleft p{
      text-align: justify;
      text-justify: newspaper;
      font: bold 15px arial,helvetica,sans-serif;
      color:white;
}

#contentboxleft  ul li {
      font: bold 15px arial,helvetica,sans-serif;
      list-style-type: none;
      background-image: URL('star.png');
      background-repeat: no-repeat;
      background-position: left;
      text-align: left;
      padding:4px 0 4px 35px;
      color:white;
      margin-left:40px;
}

.facebookbox{
      width:280px;
      height:205px;
      background-color:white;
      float:left;
      text-align:center;
      border: 7px outset blue ;
      margin-left: 15px;
      margin-top:15px;
}
.facebookbox p{
      font: bold 18px arial,helvetica,sans-serif;
      color:blue;
}
.facebookbox ul li {
      font: bold 15px arial,helvetica,sans-serif;
      list-style-type: none;
      background-image: URL('fb_small.png');
   background-repeat: no-repeat;
   background-position: left;
   text-align: left;
   padding:4px 0 4px 35px;
   color:blue;
   margin-left:40px;
}
----------------------------

<div id="contentboxleft">
<p> DESCRIPTIVE TEXT </p>
<H2>DESCRIPTIVE TEXT 2 </H2>
<ul>
<li>bullet text2</li>
<li>bullet text2</li>
</ul>
<H2>DESCRIPTIVE TEXT 3</H2>
<ul>
<li>bullet text3</li>
<li>bullet text3</li>
</ul>
<H2>DESCRIPTIVE TEXT 4</H2>

<div class="facebookbox">
<p style="color:blue; bold 18px arial,helvetica,sans-serif; text-align:center;">LIKE US on Facebook</p>
<iframe src="//www.facebook.com/plugins/likebox.php</iframe>
<ul>
<li>Updates</li>
<li>Projects</li>
<li>Galleries & Images</li>
<li>and more...</li>
</ul>
</div>
</div>
>>
0
Comment
Question by:dresdena1
[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
  • 2
4 Comments
 
LVL 22

Accepted Solution

by:
mcsween earned 500 total points
ID: 38747332
The problem is the container ID is always open so you are always inheriting the list properties from that container even after you open a class.

Change the #contentboxleft  ul li to a class like facebookbox.  Call the classes around their respective lists with div tags.  Close the first class </div> before opening the next.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38747358
Your problem is specificity.  An id is more specific than a class so the more specific properties always override the less specific class.  

You can learn about specificity here.

Cd&
0
 

Author Closing Comment

by:dresdena1
ID: 38747369
Thank you!
Worked perfectly!
0
 

Author Comment

by:dresdena1
ID: 38747506
COBOLdinosaur thanks for the link! Definite reading!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Using HTML5 and CSS How to place one element in front of another elemen 7 54
toggle content 12 39
Incorrect css styling in footer 3 24
change site header 8 31
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

732 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