Hi
I am trying to use CSS with a left column vertical links list/menu but I keep getting the list bullet appearing beside the list header (Links/More links) when I display it in my browser Internet Explorer (despite using >> list-style-type: none; << )
This is the CSS & HTML code
CSS
CODE
* {
padding : 0;
margin : 0;
}
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 13px;
background-image : url(images/bbg2.png);
/* background-repeat : repeat-x; Comment here */
}
img {
padding : 5px;
border : 1px solid #5f9b1e;
}
img.floatTL {
float : left;
margin-right : 10px;
margin-bottom : 5px;
margin-top : 10px;
margin-left : 0;
}
img.floatTR {
float : right;
margin-left : 10px;
margin-bottom : 5px;
margin-top : 10px;
margin-right : 0;
}
#wrapper {
margin : 10px auto;
width : 922px;
background-image : url(images/wbg.jpg);
background-repeat : repeat-y;
}
#header {
color : #333;
width : 902px;
float : left;
padding : 10px;
height : 100px;
margin : 0;
background-color : #dbe6ec;
background-image : url(images/hbg.jpg);
background-repeat : no-repeat;
}
.logo h1.lineone {
font-size : 2.7em;
font-weight : lighter;
font-family : helvetica, arial, sans-serif;
padding-top : 10px;
padding-left : 5px;
border : none;
letter-spacing : -1px;
color : #5f9b1e;
}
.logo h1.lineone span {
color : #53a5ce;
}
.logo h2.linetwo {
padding-left : 5px;
font-size : 0.9em;
font-family : helvetica, arial, sans-serif;
text-transform : none;
color : #53a5ce;
}
.logo a {
color : #53a5ce;
text-decoration : none;
}
#navigation {
float : left;
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #336699;
list-style-type: none;
}
#navigation ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
list-style-type: none;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
#navigation li a:link {
color: #FFF:
}
#navigation li a:visited {
color: #CCC;
}
#navigation li a:hover {
font-weight: bold;
color: #FFF;
background-color: #3366FF;
}
#leftcolumn {
color : #333;
margin : 0 0 0 0;
padding : 5px;
min-height : 350px;
width : 220px;
float : left;
list-style-type: none;
}
.leftnav {
width : 220px;
margin-top : 20px;
margin-left : 5px;
list-style-type: none;
}
.leftnav li h2 {
margin : 0;
height : 25px;
color : #5f9b1e;
padding-left : 5px;
padding-top : 10px;
font-size : 1.5em;
list-style-type: none;
}
.leftnav li ul {
line-height : normal;
list-style-type : none;
display : list-item;
}
.leftnav li li {
padding : 5px;
margin-left : 5px;
font-size : 1em;
}
.leftnav li a {
padding-left : 10px;
text-decoration : none;
/*color : #53a5ce;*/
color : #EE5C42
}
.leftnav li a:hover {
border : none;
padding-left : 10px;
list-style-type : none;
}
#content {
float : left;
color : #333;
background : #fafaee;
margin : 0 0 0 0;
padding : 10px;
min-height : 350px;
width : 450px;
display : inline;
text-align : justify;
}
#content h1 {
color : #53a5ce;
font-size : 1.9em;
font-weight : lighter;
}
#content h2 {
color : #53a5ce;
font-size : 1.6em;
font-weight : lighter;
padding-top : 20px;
}
#rightcolumn {
color : #333;
margin : 0 0 0 0;
padding : 10px;
min-height : 350px;
width : 180px;
float : left;
}
.ads p {
font-family : verdana;
font-size : 1em;
padding-left : 5px;
padding-bottom : 5px;
margin-right : 10px;
text-align : justify;
padding-right : 10px;
}
.ads {
width : 190px;
height : 600px;
margin-left : 5px;
margin-top : 15px;
}
.ads h4 {
background-color : #5f9b1e;
color : #fff;
font-weight : lighter;
font-size : 0.8em;
padding-bottom : 2px;
text-decoration : underline;
}
.ads h3 {
font-family : verdana;
font-size : 1em;
padding-top : 30px;
padding-left : 3px;
padding-bottom : 5px;
color : #5f9b1e;
text-decoration : underline;
}
.ads a {
margin-right : 25px;
margin-bottom : 2px;
color : #53a5ce;
font-size : 0.8em;
font-weight : bold;
padding-left : 3px;
text-decoration : none;
padding-bottom : 15px;
}
#footer {
width : 902px;
clear : both;
color : #333;
background : #dbe6ec;
margin : 0 0 0 0;
padding : 10px;
text-align : center;
}
Here is just the left column HTML code:
CODE
<!-- Begin Left Column -->
<div id="leftcolumn">
<div class="leftnav">
<ul>
<li>
<h2>Links</h2>
<ul>
<li>Blog at<a href="http://www.hilarydickinson.com"target ="_blank">www.hilarydickinson.com </a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
</ul>
</li>
<li>
<h2>More Links</h2>
<ul>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eight</a></li>
<li><a href="#">Link ......</a></li>
<li><a href="#">Link .......</a></li>
<li><a href="http://www.positivelifestylechoices.com">Positive Lifestyle Choices</a></li>
<li><a href="BBHsalespage.htm">Banish Bad Habits ebook</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- End Left Column -->
I attach a screenshot (see file attachment)
I am grateful if someone can help me edit the css so I do not get list bullets appearing in this vertical links menu.
I look forward to helpful replies-many thanks
This post has been edited by rpd: 4 Nov, 2009 - 02:00 AM
Forum Index:
Programming Help |
C and C++ |
VB6 |
Java |
VB.NET |
C# |
ASP.NET |
PHP |
ColdFusion |
Perl and Python |
Ruby |
Databases |
Other Languages |
Game Programming |
Mobile Development |
Software Development |
Computer Science |
Industry News |
Programming Tutorials |
C++ Tutorials |
Visual Basic Tutorials |
Java Tutorials |
VB.NET Tutorials |
C# Tutorials |
Linux Tutorials |
PHP Tutorials |
ColdFusion Tutorials |
Windows Tutorials |
HTML/JavaScript Tutorials |
CSS Tutorials |
Flash Tutorials |
Web Promotion Tutorials |
Graphic Design & Photoshop Tutorials |
Software Development Tutorials |
Database Tutorials |
Other Language Tutorials |
ASP.NET Tutorials |
Game Programming Tutorials |
WPF & Silverlight Tutorials |
| 
