Solved

CSS Multiple List - Cascade Priority

Posted on 2013-01-05
4
290 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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 …

749 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