Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts

    What am i doing wrong? - Want to take style of a list

    I'm sure this is something simple but i can't figure it out. I just want to take the bullet points off a list but all code from .leftPanel ul, .leftPanel ul li won't work. In my leftpanel I'm just pulling through a html list using an include statement but it's still got bulletpoints in. It's strange because the EXACT same code works in a similar file. I don't know if it's something to do with the order? Thanks.

    Code:
    #leftPanel
    {
    float:left;
    width:20%;
    background-color: #ffffff;
    color:#990000;
    margin: 5px 5px 5px 10px;
    padding 7px 7px 7px 7px;
    }
    
    .leftPanel ul, .leftPanel ul li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .leftPanel ul
    {
    	border: solid 1px #fff;
    	border-bottom-width: 0;
    }
    
    .leftPanel ul li
    {
    	border-bottom: solid 1px #fff;
    }
    
    .leftPanel ul li, .leftPanel ul li a
    {
    	margin: 0;
    	display: block;
    	padding: 0;
    	line-height: normal;
    }
    .leftPanel ul li a
    {
    	display: block;
    	padding: 2px 5px 3px 5px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,860
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Some CSS code alone is not sufficient to say something on your issue. Could you post a link to your page?
    Last edited by abduraooft; 11-24-2009 at 06:20 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Hi, My page isn't online at the moment...I'm just testing it locally. Here is the code of the whole document if it helps at all. The files included are simply just html lists with links in.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Welcome to the CCLN Website</title>
    <style type="text/css">
    
    #container
    {
    width:70em;
    margin-left:auto;
    margin-right:auto;
    background-color: #ffffff;
    }
    
    A:link {text-decoration: none; color: #0000FF;}
    A:visited {text-decoration: none; color: #0000FF;}
    A:active {text-decoration: none}
    A:hover {text-decoration: underline; color: red;}
    img{border:0;}
    
    h1{font-size:19px};
    
    
    html, body{
    
    font:12px arial;
    }
    
    #topPanel
    {
    height:100px;
    font-weight: bold;
    font-size: 26px;
    text-align:center;
    background: #ffffff url(banner3.gif) repeat-x; 
    color: #fff;
    }
    
    #topPanel h1
    {
    	text-align:center;
    	font-size:160%;
    	font-family: arial, helvetica, sans-serif;
    	padding: 10px 0px 0px 0px;
    	margin: 0;
    
    }
    .hnav
    {
    	border-bottom: solid 1px #fff;
    	text-align: center;
    	background-color: red;
    }
    .hnav, .hnav ul li a
    {
    	/* need to middor veritcal padding on .hnav and child anchor elements
    	 * because the anchors are _not_ block elements. since they are not
    	 * block elements web browsers will not expand .hnav to contain them
    	 * even with the extra padding. by applying the same padding to both
    	 * the parent .hnav _looks_ like its containing the child anchor
    	 * elements. 
    	 */
    	padding-top: 3px;
    	padding-bottom: 4px;
    	color:#ffffff;
    }
    .hnav ul, .hnav ul li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    .hnav ul li a
    {
    	margin: 0 -1px 0 0;
    	padding-left: 10px;
    	padding-right: 10px;	/* short-hand padding attribute would overwrite
    				   top/bottom padding set in a previous rule */
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    	white-space: nowrap;
    }
    .hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
    {
    	text-decoration: none;
    }
    .hnav ul li span.divider
    {
    	display: none;
    }
    * html .hnav ul li, * html .hnav ul li a
    {
    	width: 1%; /* IE/Mac needs this */
    	display: inline-block;	/* IE/Mac needs this */
    	/* \*/
    		width: auto;
    		display: inline;
    	/* reset above hack */
    }
    * html .hnav, * html .hnav ul a
    {
    	/* \*/ height: 0.01%; /* hasLayout hack to fix render bugs in IE/Win. 
    				 IE/Mac will ignore this rule. */
    }
    * html .HNAV
    {
    	padding: 0;	/* IE5/Win will resize #hnav to fit the heights of its
    			   inline children that have vertical padding. So this
    			   incorrect case selector hack will be applied only by
    			   IE 5.x/Win */
    }
    
    
    #leftPanel
    {
    float:left;
    width:20%;
    background-color: #ffffff;
    color:#990000;
    margin: 5px 5px 5px 10px;
    padding 7px 7px 7px 7px;
    }
    
    .leftPanel ul, .leftPanel ul li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .leftPanel ul
    {
    	border: solid 1px #fff;
    	border-bottom-width: 0;
    }
    
    .leftPanel ul li
    {
    	border-bottom: solid 1px #fff;
    }
    
    .leftPanel ul li, .leftPanel ul li a
    {
    	margin: 0;
    	display: block;
    	padding: 0;
    	line-height: normal;
    }
    .leftPanel ul li a
    {
    	display: block;
    	padding: 2px 5px 3px 5px;
    }
    
    #rightPanel
    {
    float:right;
    width:20%;
    color:#990000;
    font-weight: bold;
    background-color: #ffffff;
    margin: 5px 0 0 0;
    padding 7px 7px 7px 7px;
    }
    
    .leftpanel a:link,a:hover,a:visited .rightpanel a:hover, a:link, a:visited
    {
    	color: blue;
    }
    
    
    
    #centerPanel
    {
    float:left;
    font-family: Verdana, sans-serif;
    width:56%;
    font-size: 12px;
    background-color: #ffffff;
    text-align:center;
    margin: 5px 5px 0 5px;
    padding 7px 7px 7px 7px;
    }
    
    #bottomPanel
    {
    clear:both;
    height:100px;
    font-weight: bold;
    background-color: #ffffff;
    font-size: 20px;
    text-align:center;
    color: #0000EE;
    margin: 10px 90px 0 90px;
    padding 7px 7px 7px 7px;
    }
    
    html, body{
    background-color: #cceebb;
    color: #000;
    font-family: arial, helvetica, sans-serif;
    }
    
    </style>
    
    
    </head>
    <body>
    
    <div id="container">
    <div id="topPanel">
    
    <h1>CCLN SITE</h1>
    
    
    </div>
    
    <div class="hnav">
    
    <!--
    	you must preserve the (lack of) whitespace between elements when creating 
    	your own horizontal navigation elements, otherwise the extra whitespace 
    	will break the visual layout. although how it breaks (tiny spaces between 
    	each element) is an effect that some may desire.
    -->
    
    <ul
    	><li class="hide"
    		><a class="hide" href="../../">home</a
    		><span class="divider"> : </span
    		></li
    	><li
    		><a	href="">page2</a
    		><span class="divider"> : </span
    	></li
    	><li
    		><a	href="">page3</a
    		><span class="divider"> : </span
    	></li
    	><li
    		><a	href="">Blog</a
    		><span class="divider"> : </span
    	></li
    	><li
    		><a href="">Contact</a
    		><span class="divider"> : </span
    	></li
    ></ul>
    
    <!-- horizontal nav end -->
    
    </div>
    
    
    
    
    
    
    
    <div id="leftPanel">
    <?php include("methodswithsitemenu.php"); ?>
    <?php include("leftgooglead.php"); ?>
    </div>
    
    <div id="rightPanel">
    <?php include("rightbar2.php"); ?>
    </div>
    
    <div id="centerPanel">
    <p>
    
    This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, 
    This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
    This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
    This is the center panel, This is the center panel, This is the center panel,
    </p>
    
    <p>
    This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
    This is the center panel, This is the center panel, This is the center panel, This is the center panel, This is the center panel,
    </p>
    
    </div>
    
    
    
    <div id="bottomPanel">
    sitemap, contact us etc
    
    </div>
    
    
    </div>
    
    </body>
    </html>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,860
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The files included are simply just html lists with links in.
    Take the parsed output of your php code/file taken from browsers "view source" option and please post.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    the php file is as below. I just can't work it out because I'm calling the exact file in another page and it works fine.

    Code:
    <h3>CCLN Files</h3>
    <br/>
    <ul><li><a href="a.php">a</a></li>
    	<li><a href="b.php">b</a></li>
    	<li><a href="c.php">c</a></li>
    	<li><a href="d.php">d</a></li>
    	<li><a href="e.php">e</a></li>
    	<li><a href="f.php">f</a></li>
    	<li><a href="g.php">g</a></li>
    </ul>

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,860
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have
    Code:
    <div id="leftPanel">
    but in your CSS, you have the class selector,
    Code:
    .leftPanel ul, .leftPanel ul li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .leftPanel ul
    {
    	border: solid 1px #fff;
    	border-bottom-width: 0;
    }
    
    .leftPanel ul li
    {
    	border-bottom: solid 1px #fff;
    }
    
    .leftPanel ul li, .leftPanel ul li a
    {
    	margin: 0;
    	display: block;
    	padding: 0;
    	line-height: normal;
    }
    .leftPanel ul li a
    {
    	display: block;
    	padding: 2px 5px 3px 5px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,860
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have
    Code:
    <div id="leftPanel">
    but in your CSS, you have the class selector,
    Code:
    .leftPanel ul, .leftPanel ul li
    {
    	display: inline;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    
    .leftPanel ul
    {
    	border: solid 1px #fff;
    	border-bottom-width: 0;
    }
    
    .leftPanel ul li
    {
    	border-bottom: solid 1px #fff;
    }
    
    .leftPanel ul li, .leftPanel ul li a
    {
    	margin: 0;
    	display: block;
    	padding: 0;
    	line-height: normal;
    }
    .leftPanel ul li a
    {
    	display: block;
    	padding: 2px 5px 3px 5px;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    gh05 (11-24-2009)

  • #8
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    ah right...i've replaced them with #leftPanel and it seems to be working. Is that the correct syntax?

    I just don't know why this exact same code worked in another css file which i downloaded from a popular template.

    Thanksfor your help.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello gh05,
    <div id="leftPanel"> would be styled with #leftPanel. That is an id.

    <div class="leftPanel"> would be styled with .leftPanel. That is a class.

    Have a look at this explanation.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    gh05 (11-25-2009)

  • #10
    Regular Coder
    Join Date
    Aug 2008
    Posts
    133
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks, I get it now. I just didnt understand why it would ave worked for another file and not this one? Any ideas? the only other difference was that the file it worked on was 'strict' where as this was transitional.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •