CSS vertical nav link menu stop list bullet display

CSS vertical nav link menu bullet display problem

Page 1 of 1

3 Replies - 8357 Views - Last Post: 04 November 2009 - 12:36 PM

#1 rpd   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

CSS vertical nav link menu stop list bullet display

Posted 04 November 2009 - 02:38 AM

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
* { 
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:
<!-- 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

Attached image(s)

  • Attached Image

This post has been edited by rpd: 04 November 2009 - 03:00 AM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS vertical nav link menu stop list bullet display

#2 level1   User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: CSS vertical nav link menu stop list bullet display

Posted 04 November 2009 - 08:54 AM

Your problem is that you declare list-style-type: none; for the id navigation, but you don't have an id of navigation anywhere in your html. You can assign id="navigation" to the out-most ul. Try that and see how drastically different your page looks. This should be your new HTML
<!-- Begin Left Column -->
		 <div id="leftcolumn">
		 
	<div class="leftnav">
		<ul id="navigation">
			<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 -->

Was This Post Helpful? 0
  • +
  • -

#3 rpd   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: CSS vertical nav link menu stop list bullet display

Posted 04 November 2009 - 11:55 AM

Hi 'level1'
Thanks for your reply. I actually had an id navigation declaration earlier on on my html (index.html) page affecting the horizontal menu bar.

I did try your advice & added here to my left column html div section
(it certainly changed the appearance).
Perhaps I need to use a class selector there instead? I will give that a try now & report back.

Thanks for your reply & help
Was This Post Helpful? 0
  • +
  • -

#4 rpd   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 65
  • Joined: 13-August 07

Re: CSS vertical nav link menu stop list bullet display

Posted 04 November 2009 - 12:36 PM

View Postrpd, on 4 Nov, 2009 - 10:55 AM, said:

Hi 'level1'
Thanks for your reply. I actually had an id navigation declaration earlier on on my html (index.html) page affecting the horizontal menu bar.

I did try your advice & added here to my left column html div section
(it certainly changed the appearance).
Perhaps I need to use a class selector there instead? I will give that a try now & report back.

Thanks for your reply & help


UPDATE-
I just tried using class selector leftnav in<ul> tag where you put id=navigation (id selector) and that has worked fine-so for now the problem is fixed.Thanks.

I show this html left column code

 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		 
	<div class="leftnav">
		<ul class="leftnav">
			<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 do not know if this is right semantically (ie good coding) but as this works with the css style sheet- (no more bullets being shown)- that is fine for me! So now I can continue with page design & content!

Regards
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1