homepage Welcome to WebmasterWorld Guest from 54.166.100.8
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS not working on UL tag
None of the styles are working.
designbylanoue




msg:4033446
 6:57 am on Nov 29, 2009 (gmt 0)

I can't figure out whats going on here. Most of the margins, I believe all of the padding, even the list style isn't rendering. Can someone please help?

Page code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design By LaNoue Web Design Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<div id="head">
<p><a href="index.html"><img src="images/logo.png" alt="Design By LaNoue" width="264" height="87" border="0" /></a></p>
<p>&nbsp;</p>
</div>

<div id="menu">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="../../../../wordpress/wp-content/themes/dbl/index.php" class="selected">Blog</a></li>

<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="po.html">Design Planner!</a></li>
</ul>
</div>
<div class="clear"></div>
</div>

</div>
<div id="wrapper">
<div id="slide-menu">
<ul id="slide">
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>

<li><a href="#">CSS</a></li>
<li><a href="#">Ajax &amp; JS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Icons</a></li>
<li><a href="#">Tutorials</a></li>

<li><a href="#">Wordpress</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="col1">
<p class="top">&nbsp;</p>
<p class="posted">Written by <a href="#">Michael LaNoue</a> on November 26,2008 at 12:03 pm</p>
<h2><a href="#">Title of Post Goes Here!</a></h2>
<p class="cats"><a href="#">Web Design</a>, <a href="#">jQuery</a></p>

<p class="comnts"><a href="#">27 comments</a></p>
<div class="clear"></div>
<p>&nbsp;</p>
<p align="center"><img src="images/line_border.png" width="523" height="3" /></p>
<p>&nbsp;</p>
<div id="social-bookmarks">
<ul class="bookmarks">
<li class="twit"><a title="Twitter" href="http://www.twitter.com">twitter</a></li>
<li class="digg"><a title="Digg" href="http://www.digg.com">digg</a></li>
<li class="deli"><a title="Delicious" href="#">delicious</a></li>

<li class="fb"><a title="FaceBook" href="#">facebook</a></li>
<li class="reddit"><a title="Reddit" href="#">reddit</a></li>
<li class="in"><a title="LinkedIn" href="#">linkedin</a></li>
<li class="su"><a title="StumbleUpon" href="#">stumbleupon</a></li>
</ul>
<div class="clear"></div>
<ul class="bookmarks">

<li class="google"><a title="Google" href="#">google</a></li>
<li class="blog"><a title="Blogger" href="#">blogger</a></li>
<li class="newsvine"><a title="Newsvine" href="#">newsvine</a></li>
<li class="tech"><a title="technorati" href="#">technorati</a></li>
<li class="myspace"><a title="Myspace" href="#">myspace</a></li>
<li class="ff"><a title="FriendFeed" href="#">friendfeed</a></li>

<li class="mix"><a title="Mix" href="#">mix</a></li>
</ul>
<div class="clear"></div>
</div>
<p>&nbsp;</p>
<p align="center"><img src="images/line_border.png" width="523" height="3" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="bot">&nbsp;</p>
</div>
<div class="col2">
<p class="top">&nbsp;</p>
<h3>&nbsp;</h3>

<h3><a href="#">Testing</a></h3>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="bot">&nbsp;</p>
</div>
<div class="col3">
<p class="top">&nbsp;</p>
<p>&nbsp;</p>
<p class="bot">&nbsp;</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>

And here is the css:

/* General Styles */
* {
margin:0px;
padding:0px;
}
body {
background: #000 url(images/ab_back.jpg) no-repeat center -100px;
}
.clear {
clear: both;
}

/* Header Styles */

#header {
margin: 10px auto 0px auto;
width: 1070px;
}
#menu {
background: url(images/contain_back.png) repeat-y;
height: 44px;
border-top: 1px solid #CCC;
}
#menu #nav ul {
margin: 5px 0px 0px 25px;
padding: 0px;
list-style: none;
float: left;
}
#menu #nav li {
float: left;
}
#menu #nav li a {
color: #FFF;
display: block;
padding: 5px;
text-decoration: none;
margin: 0px 10px 0px 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
}
#menu #nav li a:hover, #menu #nav li a:active {
color: #06F;
}
#menu #nav li a.selected,#menu #nav li a.selected:hover, #menu #nav li a.selected:active {
cursor: default;
text-decoration: none;
color: #F00;
}

/* Content Styles */

#wrapper {
width: 1070px;
margin: 0px auto;
background: #000;
padding: 10px 0px;
}
.col1 {
width: 550px;
float: left;
margin-left: 10px;
background: #141919;
}
.col1 p.top {
background: url(images/col1_top.png) no-repeat 0px 0px;
}
.col1 p.bot {
background: url(images/col1_bot.png) no-repeat 0px bottom;
}
.col1 h2 a {
color: #06F;
font-weight: normal;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 32px;
padding: 0px 10px;
text-decoration: none;
}
.col1 h2 a:hover, .col1 h2 a:active {
color: #CCDDEB;
}
.col1 p.posted {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999;
padding-left: 12px;
}
.col1 p.posted a {
color: #999;
font-style: italic;
text-decoration: underline;
}
.col1 p.posted a:hover, .col1 p.posted a:active {
color: #6CF;
text-decoration: none;
}
#wrapper .col1 p.cats {
float: left;
padding-left: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCC;
background: url(images/categories.png) no-repeat 10px 3px;
margin-top: 5px;
}
#wrapper .col1 p.cats a {
color: #CCC;
text-decoration: underline;
}
#wrapper .col1 p.cats a:hover, #wrapper .col1 p.cats a:active {
color: #6CF;
text-decoration: none;
}
#wrapper .col1 p.comnts {
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: url(images/comment.png) no-repeat 6px 2px;
padding-left: 25px;
margin-right: 35px;
margin-top: 5px;
}
#wrapper .col1 p.comnts a:link, #wrapper .col1 p.comnts a:visited {
color: #CCC;
text-decoration: underline;
}
#wrapper .col1 p.comnts a:hover, #wrapper .col1 p.comnts a:active {
color: #6CF;
text-decoration: none;
}
.col2 {
width: 240px;
float: left;
margin-left: 10px;
background: #141919;
}
.col2 p.top {
background: url(images/col2_3_top.png) no-repeat 0px 0px;
}
.col2 p.bot {
background: url(images/col2_3_bot.png) no-repeat 0px bottom;
}
.col2 h3 a:link {
color: #CCDDEB;
font-family: Verdana, Geneva, sans-serif;
font-size: 32px;
padding: 0px 10px;
}

.col3 {
width: 240px;
float: left;
margin-left: 10px;
background: #141919;
}
.col3 p.top {
background: url(images/col2_3_top.png) no-repeat 0px 0px;
}
.col3 p.bot {
background: url(images/col2_3_bot.png) no-repeat 0px bottom;
}

/* Slide Menu Styles */

#slide-menu {
background: #141919;
height: 40px;
}
#slide-menu #slide ul {
float: left;
list-style: none;
margin: 5px 0px 0px 25px;
}
#slide-menu #slide li {
float: left;
}
#slide-menu #slide li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
padding: 10px;
margin-right: 10px;
text-align: center;
}

/* Social Bookmarks Styles */

#social-bookmarks {
width: 528px;
background: url(images/show_love.png) no-repeat 0px 0px;
height: 71px;
padding-top: 30px;
margin: 0px auto;
}
#social-bookmarks ul.bookmarks {
margin: 0px 0px 2px 0px;
padding: 0px;
list-style: none;
float: left;
}
#social-bookmarks ul.bookmarks li {
float: left;
}
#social-bookmarks ul.bookmarks li a {
display: block;
text-decoration: none;
color: #fff;
margin: 0px -10px 0px 0px;
width: 84px;
height: 34px;
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
text-indent: -4000px;
}
#social-bookmarks li.twit a:link, #social-bookmarks li.twit a:visited {
background: url(images/icon_twitter.png) no-repeat 0px -55px;
}
#social-bookmarks li.twit a:hover, #social-bookmarks li.twit a:active {
background: url(images/icon_twitter.png) no-repeat 0px 0px;
}
#social-bookmarks li.digg a:link, #social-bookmarks li.digg a:visited {
background: url(images/icon_digg.png) no-repeat 0px -55px;
}
#social-bookmarks li.digg a:hover, #social-bookmarks li.digg a:active {
background: url(images/icon_digg.png) no-repeat 0px 0px;
}
#social-bookmarks li.deli a:link, #social-bookmarks li.deli a:visited {
background: url(images/icon_deli.png) no-repeat 0px -55px;
}
#social-bookmarks li.deli a:hover, #social-bookmarks li.deli a:active {
background: url(images/icon_deli.png) no-repeat 0px 0px;
}
#social-bookmarks li.fb a:link, #social-bookmarks li.fb a:visited {
background: url(images/icon_facebook.png) no-repeat 0px -55px;
}
#social-bookmarks li.fb a:hover, #social-bookmarks li.fb a:active {
background: url(images/icon_facebook.png) no-repeat 0px 0px;
}
#social-bookmarks li.reddit a:link, #social-bookmarks li.reddit a:visited {
background: url(images/icon_reddit.png) no-repeat 0px -55px;
}
#social-bookmarks li.reddit a:hover, #social-bookmarks li.reddit a:active {
background: url(images/icon_reddit.png) no-repeat 0px 0px;
}
#social-bookmarks li.in a:link, #social-bookmarks li.in a:visited {
background: url(images/icon_in.png) no-repeat 0px -55px;
}
#social-bookmarks li.in a:hover, #social-bookmarks li.in a:active {
background: url(images/icon_in.png) no-repeat 0px 0px;
}
#social-bookmarks li.su a:link, #social-bookmarks li.su a:visited {
background: url(images/icon_stumbleupon.png) no-repeat 0px -55px;
}
#social-bookmarks li.su a:hover, #social-bookmarks li.su a:active {
background: url(images/icon_stumbleupon.png) no-repeat 0px 0px;
}
#social-bookmarks li.google a:link, #social-bookmarks li.google a:visited {
background: url(images/icon_google.png) no-repeat 0px -55px;
}
#social-bookmarks li.google a:hover, #social-bookmarks li.google a:active {
background: url(images/icon_google.png) no-repeat 0px 0px;
}
#social-bookmarks li.blog a:link, #social-bookmarks li.blog a:visited {
background: url(images/icon_blogger.png) no-repeat 0px -55px;
}
#social-bookmarks li.blog a:hover, #social-bookmarks li.blog a:active {
background: url(images/icon_blogger.png) no-repeat 0px 0px;
}
#social-bookmarks li.newsvine a:link, #social-bookmarks li.newsvine a:visited {
background: url(images/icon_newsvine.png) no-repeat 0px -55px;
}
#social-bookmarks li.newsvine a:hover, #social-bookmarks li.newsvine a:active {
background: url(images/icon_newsvine.png) no-repeat 0px 0px;
}
#social-bookmarks li.tech a:link, #social-bookmarks li.tech a:visited {
background: url(images/icon_technorati.png) no-repeat 0px -55px;
}
#social-bookmarks li.tech a:hover, #social-bookmarks li.tech a:active {
background: url(images/icon_technorati.png) no-repeat 0px 0px;
}
#social-bookmarks li.myspace a:link, #social-bookmarks li.myspace a:visited {
background: url(images/icon_myspace.png) no-repeat 0px -55px;
}
#social-bookmarks li.myspace a:hover, #social-bookmarks li.myspace a:active {
background: url(images/icon_myspace.png) no-repeat 0px 0px;
}
#social-bookmarks li.ff a:link, #social-bookmarks li.ff a:visited {
background: url(images/icon_ff.png) no-repeat 0px -55px;
}
#social-bookmarks li.ff a:hover, #social-bookmarks li.ff a:active {
background: url(images/icon_ff.png) no-repeat 0px 0px;
}
#social-bookmarks li.mix a:link, #social-bookmarks li.mix a:visited {
background: url(images/icon_mix.png) no-repeat 0px -55px;
}
#social-bookmarks li.mix a:hover, #social-bookmarks li.mix a:active {
background: url(images/icon_mix.png) no-repeat 0px 0px;
}

The styles in question are listed under the /* Slide Menu Styles */ comment.

Thanks in advance for the help... im going crazy!

 

D_Blackwell




msg:4033461
 8:03 am on Nov 29, 2009 (gmt 0)

The code dump will limit the number of people willing to look at the problem.

My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.

Validated code prevents and fixes a lot of problems. Validate your code. It doesn't validate with the DTD I selected. You are using XHTML closing tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

W3C (X)HTML Validator [validator.w3.org]
...........................

Regarding your reference to "Slide Menu Styles".

1) Put a background-color: behind the <li> so you can get a better view of what is happening.

2) Best practice, IMO, is to specify the full list-style-type: property and put it in the <li> declaration block.

3) You have 10px; padding on <a>. Padding on inline elements can require special handling. Go around the issue and move to the block level <li> unless it really needs to be on the <a>. Maybe it does.

4) I have commented a few thoughts below. They should set on the right road. Cutting a lot of extra stuff out that isn't doing anything will make it easier to then get what you do want.

#slide-menu {
background: #141919;
height: 40px;
}
#slide-menu #slide ul {
/**********float: left;*/
/**********list-style: none;*/
margin: 5px 0px 0px 25px;
}
#slide-menu #slide li {
list-style-type: none;/**********/
float: left;
background-color: red;/**********/
padding: 10px;/**********/
}
#slide-menu #slide li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
/***********padding: 10px;*/
/**********margin-right: 10px;*/
/**********text-align: center; ?*/
}

D_Blackwell




msg:4033467
 9:08 am on Nov 29, 2009 (gmt 0)

IMO, you have an issue in declaring #slide in both CSS and HTML.

The HTML calls for a <ul id="slide"> which should have a declaration block in the CSS. There is no such declaration. There is no declaration for #slide at all.?

<div id="wrapper">
<div id="slide-menu">
<ul id="slide">
<li><a href="#">Design</a></li>
...............................

The CSS makes multiple references to following a cascade path from id of #slide-menu through id of #slide, and into the <ul> and <li>. No such path exists in the HTML.

#slide-menu #slide ul {

#slide-menu #slide li {

#slide-menu #slide li a {

<div id="wrapper">
<div id="slide-menu">
<ul id="slide">
<li>
...............................

The markup below is a hack job, but gives you a few things to play with, The original markup needs to be simplified, IMO.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
#slide-menu {
/**********background: #141919; ? */
/**********height: 40px;*/
}
#slide-menu ul {
/**********float: left;*/
/**********list-style: none;*/
margin: 5px 0px 0px 25px;
}
#slide-menu li {
list-style-type: none;/**********/
/**********float: left; Recommended that floated elements be assigned width. */
display: inline; /**********/
background-color: red;/**********/
padding: 10px;/**********/
}
#slide-menu li a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
/***********padding: 10px;*/
/**********margin-right: 10px;*/
/**********text-align: center; ?*/
}
</style>
</head>
<body>
<div id="wrapper">
<div id="slide-menu">
<ul id="slide">
<li><a href="#">Design</a></li><li><a href="#">Development</a></li><li><a href="#">Photoshop</a></li><li><a

href="#">Illustrator</a></li><li><a href="#">CSS</a></li><li><a href="#">Ajax &amp; JS</a></li><li><a

href="#">jQuery</a></li><li><a href="#">Icons</a></li><li><a href="#">Tutorials</a></li><li><a

href="#">Wordpress</a></li>
</ul>
</div>
</div>
<!--##########
I can't figure out whats going on here. Most of the margins, I believe all of the padding, even the list style isn't rendering.

Can someone please help?

The styles in question are listed under the /* Slide Menu Styles */ comment.
-->
</body>
</html>


likes2burn




msg:4034984
 11:26 pm on Dec 1, 2009 (gmt 0)

It's because of your specificity. You're using: #slide-menu #slide ul. Which is incorrect.

There is no ul underneath the slide. ID slide means when you refer to that UL it is known as #slide, not #slide ul. #slide ul would look like this:

<ul id="slide">
<li>
<ul> <!-- this would be a theoretical #slide ul -->
<li></li>
</ul>
</li>

</ul> <!-- end of slide -->

To refer to it, you should be using just #slide. While specificity isn't exactly base ten, it's essentially a 1000.

You have two options:
1) refer to it as its ID
#slide {
float: left;
list-style: none;
margin: 5px 0px 0px 25px;
}

2) refer to the DIV that contains only it.
#slide-menu ul {
float: left;
list-style: none;
margin: 5px 0px 0px 25px;
}

An FYI: your #menu #nav ul {...} works because <div id="nav"> not <ul id="nav">.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved