Solved

CSS Multiple List - Cascade Priority

Posted on 2013-01-05
4
288 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
  • 2
4 Comments
 
LVL 21

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

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

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…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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).

831 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