List-Style not working with custom nav using an HTML block
Permalink
I have created a custom navigation bar using only html and css instead of using an autonav. The autonav simply can't provide the functionality that I need which is really to have a navigation bar that looks like my main navigation bar but where the links all link to a single page instead of individual pages. Problem is this. Everything looks great and works like I need it to but my list-style:none; isn't working. I still get bullets beside my links. I don't when I created it in DW but upon adding my code to an HTML block the bullets appear. I have added list-style:none; to about every section of my code and still no luck Here's the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* reset styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
/* end reset */
ul#nav {
margin-top: 10px;
float:left;
list-style:none;
}
ul#nav ul {
background:#fff;
overflow:hidden;
list-style:none;
}
ul#nav li a {
list-style:none;
display:block;
border: 1px solid #b8b8b8;
padding:10px 10px;
font-family:verdana,helvetica,arial,sans;
font-size: 15px;
text-decoration:none;
color:#000000;
background:#c9c4b4;
}
ul#nav li a:hover
,ul#nav li a:focus {
text-decoration:none;
-moz-text-shadow: 1px 1px 0 #fffffff;
-webkit-text-shadow: 1px 1px 0 #fffffff;
background: #b1aa91; border-color: transparent #d0cdbe #d0cdbe transparent;
}
ul#nav ul ul {
margin-top:0px;
list-style:none;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/contact-us">Yaffe Iron & Metal Co., Inc - Muskogee, OK</a></li>
</ul>
</body>
</html>
If anybody can't point me in the right direction that would be awesome.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* reset styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table { border-collapse: collapse; border-spacing: 0; }
td, th, caption { font-weight: normal; text-align: left; }
img, fieldset { border: 0; }
ol { padding-left: 1.4em; list-style: decimal; }
ul { padding-left: 1.4em; list-style:square; }
q:before, q:after { content:''; }
/* end reset */
ul#nav {
margin-top: 10px;
float:left;
list-style:none;
}
ul#nav ul {
background:#fff;
overflow:hidden;
list-style:none;
}
ul#nav li a {
list-style:none;
display:block;
border: 1px solid #b8b8b8;
padding:10px 10px;
font-family:verdana,helvetica,arial,sans;
font-size: 15px;
text-decoration:none;
color:#000000;
background:#c9c4b4;
}
ul#nav li a:hover
,ul#nav li a:focus {
text-decoration:none;
-moz-text-shadow: 1px 1px 0 #fffffff;
-webkit-text-shadow: 1px 1px 0 #fffffff;
background: #b1aa91; border-color: transparent #d0cdbe #d0cdbe transparent;
}
ul#nav ul ul {
margin-top:0px;
list-style:none;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="/contact-us">Yaffe Iron & Metal Co., Inc - Muskogee, OK</a></li>
</ul>
</body>
</html>
If anybody can't point me in the right direction that would be awesome.
The particular page I'm referring to ishttp://yaffeco.net/services/ notice under Industrial Services. I guess I should've added that to the main post.
The first section (quikservice) uses an autonav to point to different pages, the second section (industrial) is the custom one with bullet issue.
The first section (quikservice) uses an autonav to point to different pages, the second section (industrial) is the custom one with bullet issue.
Ah yes, I see you have an inline style on line 269 like this
your line 269 has this code
Its being caused by your reset css code!
list-style:square outside none
your line 269 has this code
ul { padding-left: 1.4em; list-style:square; }
Its being caused by your reset css code!
That was part of my reset code which I removed. It fixed my width issue but I still have the bullet.
In the iGotStyle.css sheet remove line 111 that has
#mainShell ul li
#mainShell ul li
list-style:disc outside none
You my friend deserve a raise! Thanks for the help. I've been trying to use the rigidlight theme and adjust my code to it which has had it's issues, for instance, the bullets. Thanks for the second set of eyes!
All I ask is for you to mark my answer "Best Answer"
Don't forget on yourhttp://www.yaffeco.net/services/... page you still have the problem on line 269 giving you square bulletts in your main nav..
I don't see any bullets beside your links!