...

View Full Version : list-style-type not appearing in FF, Safari, or Chrome



md520
05-27-2009, 06:46 PM
Hello, Help needed with CSS list styling -
The bullets for the right menu on my site are not appearing in FF, Safari, or Chrome but appear fine in IE6&7 which makes me think that the problem is with the code seeing as these other browsers usually display correctly and it is IE with the issues that require hacks. Any help as to how to get the bullets to display in all browsers is most appreciated. Live link is www.valhallaconsulting.ca/joomla

The relevant CSS is:


.menu_rightmenu ul{
list-style-position: outside;
list-style-type: circle;
margin-left: 10px;
padding-left: 30px;
}

.menu_rightmenu li{
text-transform: uppercase;
clear: left;
line-height: 20px;
display: block;
}

.menu_rightmenu li a{
color: #000;
text-decoration: none;
}

.menu_rightmenu li a:hover{
color: #7dc8df;

}

There are other menus styled from the same css file, which might be causing the problem, I'm not sure. If the above snipped it not sufficient to diagnose, the entire css (including what is above) is pasted here:


#mainMenu {
float: left;
width:650px;
height: 30px;
margin-top: 0;
margin-right: 0;
margin-left: 2px;
}


.menu {
padding:0;
color: #638a4d;
height: 30px;
margin: 0;
font-size: 13px;
text-transform: uppercase;
}

.menu ul{
list-style: none;
margin: 0;
padding: 0;

}

.menu li{
list-style: none;
float: left;
color: #c2cdbb;
font-weight: normal;
font-size: 13px;
padding-right: 35px;
line-height: 30px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}

.menu li ul {
position: absolute;
width: 125px;
left: -999em;
border: solid 1px #949c8f;
line-height: 30px;
z-index: 500;
}

.menu li:hover ul {
left: auto;

}

.menu li ul li {
width:255px;
padding: 0;
font-size: 11px;
}

.menu a {
display: block;
padding: 0;
background-color:#638a4d;
font-weight: normal;
text-decoration: none;
color: #fff;
}

html>body .menu li a {
width: auto;
}

.menu li ul li a {
padding-left: 10px;
background-color:#666;
}

.menu li a:hover,a#active_menu:link,a#active_menu:visited{
text-decoration: none;
color: #c2cdbb;
}

.menu li ul li a:hover {
text-decoration: none;
color: #8c4511;
background-color: #ccc;
}

.menu li:hover ul, .menu li.sfhover ul {
left: auto;
}

.menu li.active a,
.menu ul li.active a {
text-decoration: underline;

}

.menu li ul ul {
margin: -30px 0 0 225px;
}

.menu li:hover ul ul, .menu li.sfhover ul ul {
left: -999em;

}

.menu li:hover ul, .menu li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul {
left: auto;
}

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul {
left: -999em;
}

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul {
left: auto;
}

.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul, .menu li.sfhover ul ul, .menu li.sfhover ul ul ul, .menu li.sfhover ul ul ul ul {
left: -999em;
}

.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul, .menu li li li.sfhover ul, .menu li li li li.sfhover ul {
left: auto;
}

.menu li.parent {
background: #638a4d url("../images/menubg2.gif") no-repeat right;
}

.menu_rightmenu ul{
list-style-position: outside;
list-style-type: circle;
margin-left: 10px;
padding-left: 30px;
}

.menu_rightmenu li{
text-transform: uppercase;
clear: left;
line-height: 20px;
display: block;
}

.menu_rightmenu li a{
color: #000;
text-decoration: none;
}

.menu_rightmenu li a:hover{
color: #7dc8df;

}

Rowsdower!
05-27-2009, 08:35 PM
Hello and welcome to the forums! Please edit your first post and use
tags around your CSS. This makes it much easier to read what you have. Also, if you have a link to a live test page then diagnosis of the problem is MUCH easier for us.

To diagnose issues in FF it is a great idea to download and use the Firebug plugin, which allows you to alter CSS on the fly in-browser. Life is not the same after you use Firebug...

I will also mention the obligatory advice that you should develop while testing with FF, then hack/tweak the page for IE. Doing it the other way around wastes time and increases frustration.

md520
05-27-2009, 09:30 PM
Thanks for replying.

I do all development using FF and will look at firebug, I agree with you on adding hacks to IE rather adjusting otherwise - most of this CSS file was supplied with a Joomla template, however I added the right menu code that is causing the problem.

thanks
melissa

drhowarddrfine
05-27-2009, 10:50 PM
One uses margin for the bullets and the other uses padding.

Rowsdower!
05-27-2009, 11:51 PM
Thanks for replying.

I do all development using FF and will look at firebug, I agree with you on adding hacks to IE rather adjusting otherwise - most of this CSS file was supplied with a Joomla template, however I added the right menu code that is causing the problem.

thanks
melissa

Hmm, I assume we're talking about a menu that appears when you go to, say, services>vegetation and wildlife (like this page: http://www.valhallaconsulting.ca/joomla/index.php?option=com_content&view=article&id=37&Itemid=7). Is this the issue we are talking about?

Even if not, you might want to pay this some attention as your faux columns are failing here. You need to add overflow:auto; to the style for #main.

As for the bullets, remove your display:block; from the <li> style there and the bullets should come back.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum