[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

Issue with CSS and UL

I cannot figure out why the css I have set for my #menubar div is being picked up for all ul elements all through my site?  I have the css for #menubar ul etc so it should just be the #menubar element.

Here is a page where you can see the ul is picking up the code
http://loveofsimple.com/easy-vegetable-soup/

Please help!

CSS Code
/*   
Theme Name: Retro
Author: Susan Shropshire
Author URI: http://www.loveofsimple.com
*/

/* Default Styles
---------------------------------------------------------*/
* { margin: 0; padding: 0; }
body { background: #fbf8ef; font: 13px Georgia, Serif; color: #000; }
.clear { clear: both; }
img a {border-style: none;}

.attachment-page-single {
    float: left;
    margin: 12px 10px 10px 0px;
}
 
.attachment-index-categories {
    float: left;
    margin: 12px 10px 10px 0px;
}

.blog-line {width: 100%; border-bottom: 2px dashed #333; clear:both; padding: 10px 0 10px 0;}

h1 {font-size:24px;}
h2 {font-size:36px; font-family: sweetheartscriptregular; font-weight:normal; margin: 0 0 10px 0;}
h3 {font-size:18px;}
h4 {font-size:16px;}
h5 {font-size:14px;}
h6 {font-size:12px;}
.green-dream {background: #BAC42E; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; behavior: url(/css/border-radius.htc); border-radius: 20px; padding: 8px; color: #000;}
a {text-decoration:none;color:#fc4792;}
a:hover{color:#333;}
blockquote {padding: 0 30px 0 30px;}
.pink {color: #fc4792; font-weight: bold;}
.center {margin: auto;}
table {border-style: none;}
td {border: 0;}

.blog-image {width: 630px; text-align:center;}


/*Style Login Page*/
body.login  {background: #000;}
.login form {background: #fc4792;}
.login label {color: #fff;}
input.button-primary, button.button-primary, a.button-primary {background: #000; border: 1px solid #000;}
.login #nav a, .login #backtoblog a {color: #ffffff !important; text-shadow:none;}
.login #nav a, .login #backtoblog a:hover {color: #fc4792 !important; text-shadow: none;}



/* Structure Styles
---------------------------------------------------------*/
#logo-wrap {width: 980px; margin:auto;}
#logo {width: 655px; height: 63px; background:url(images/logo.png) no-repeat; margin: 12px 0 0 0;}
#page-wrap {width: 980px; margin: 15px auto 0 auto; background: #fff; border: 1px #333333 solid;}
#content-sidebar-wrap {float: left; width: 940px; padding: 20px;}
#content {float: left; width: 630px; margin: 0 10px 0 0;}
#sidebar {float: left; line-height: 24px; width: 300px;}
#sidebar h2 {background: #ec519d; color: #fff; padding: 8px; margin: 0 -18px 10px 0; font-family:Georgia, "Times New Roman", Times, serif; font-size: 18px; font-weight:normal;}
#content-page {width: 920px; padding: 30px;}
#footer {width: 950px; height: 65px; margin:auto; background: #9ad5d3; clear:both; padding: 15px;}


/* Menu Styles
---------------------------------------------------------*/
#menubar {width: 980px; background: #9ad5d3; margin: 0 0 20px 0;}
#menubar ul {margin: 0 0 0 200px; width: 980px; background: #9ad5d3; padding: 8px 0 8px 0;}
#menubar ul a { display:block; color: #000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; text-decoration: none;}
#menubar ul, ul li, ul ul { list-style: none; margin: 0; padding: 0; background: #9ad5d3; color: #fff;}
#menubar ul { position: relative; z-index: 597; float: left; }
#menubar ul li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
#menubar ul li.hover, ul li:hover { position: relative; z-index: 599; cursor: default; background: #fff; }
#menubar ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #2ad6d0; }
#menubar ul ul li { float: none; }
#menubar ul ul ul { top: -2px; left: 100%; }
#menubar ul li:hover > ul { visibility: visible }

#content-page ul {background: #fff;}



/* Font Styles
---------------------------------------------------------*/
@font-face {
    font-family: 'tangerinebold';
    src: url('fonts/tangerine_bold-webfont.eot');
    src: url('fonts/tangerine_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/tangerine_bold-webfont.woff') format('woff'),
         url('fonts/tangerine_bold-webfont.ttf') format('truetype'),
         url('fonts/tangerine_bold-webfont.svg#tangerineregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'tangerineregular';
    src: url('fonts/tangerine_regular-webfont.eot');
    src: url('fonts/tangerine_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/tangerine_regular-webfont.woff') format('woff'),
         url('fonts/tangerine_regular-webfont.ttf') format('truetype'),
         url('fonts/tangerine_regular-webfont.svg#tangerineregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'sweetheartscriptregular';
    src: url('fonts/sweetheartscript-webfont.eot');
    src: url('fonts/sweetheartscript-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sweetheartscript-webfont.woff') format('woff'),
         url('fonts/sweetheartscript-webfont.ttf') format('truetype'),
         url('fonts/sweetheartscript-webfont.svg#sweetheartscriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'centeria_script_demoregular';
    src: url('fonts/centeriascriptdemo-webfont.eot');
    src: url('fonts/centeriascriptdemo-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/centeriascriptdemo-webfont.woff') format('woff'),
         url('fonts/centeriascriptdemo-webfont.ttf') format('truetype'),
         url('fonts/centeriascriptdemo-webfont.svg#centeria_script_demoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'freshmannormal';
    src: url('fonts/freshman-webfont.eot');
    src: url('fonts/freshman-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/freshman-webfont.woff') format('woff'),
         url('fonts/freshman-webfont.ttf') format('truetype'),
         url('fonts/freshman-webfont.svg#freshmannormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

Open in new window

0
loveofsimple
Asked:
loveofsimple
  • 3
  • 2
1 Solution
 
HagayMandelCommented:
This is style.css lines #68 - 80:
/* Menu Styles
---------------------------------------------------------*/
#menubar {width: 980px; background: #9ad5d3; margin: 0 0 20px 0;}
#menubar ul {margin: 0 0 0 200px; width: 980px; padding: 8px 0 8px 0;}
#menubar ul a { display:block; color: #000; font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; text-decoration: none;}
#menubar ul, ul li, ul ul { list-style: none; margin: 0; padding: 0; background: #9ad5d3; color: #fff;}
#menubar ul { position: relative; z-index: 597; float: left; }
#menubar ul li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
#menubar ul li.hover, ul li:hover { position: relative; z-index: 599; cursor: default; background: #fff; }
#menubar ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #2ad6d0; }
#menubar ul ul li { float: none; }
#menubar ul ul ul { top: -2px; left: 100%; }
#menubar ul li:hover > ul { visibility: visible }

Open in new window


As you can see, you apply the css not only to the #menubar com[ponent.
In general, check your css.
0
 
Chris StanyonCommented:
This rule:

#menubar ul, ul li, ul ul {} //line 73

styles the following:

a UL within #menubar //#menubar ul
all LIs within all ULs // ul li
all ULs within all ULs // ul ul

If you only want to style the UL within #menubar, then your rule should look like this:

#menubar ul {}
0
 
loveofsimpleAuthor Commented:
I need to add that style to the #menubar ul li and the ul li ul since this is a dropdown menu so I'm not sure how I would do that?

I have always just started with the #divname and then everything after that styles just under that div?

So how would I write the CSS for the #menubar ul, ul li, ul ul ?
0
Industry Leaders: 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!

 
loveofsimpleAuthor Commented:
Got it... I have to add the #menubar after each comma.
Thanks
0
 
Chris StanyonCommented:
The question was 'why does the style I've applied to my menubar apply to all my ULs through my site'. The reason is because your style rule selects the #menubar UL as well as all UL LIs in your site, plus all UL ULs.

#menubar ul, ul li, ul ul {  }

I have always just started with the #divname and then everything after that styles just under that div?
Until you add commas, and then they become separate rules. For example:

#menubar, ul, p  { color:red; }

will style an element with an ID of menubar PLUS all ULs, PLUS all Ps. You would probably need something like this

#menubar ul, #menubar ul li, #menubar ul ul {  }
0
 
Chris StanyonCommented:
;)
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now