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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    list-style-type not appearing in FF, Safari, or Chrome

    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:
    Code:
    .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:
    Code:
    #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;
    
    }
    Last edited by md520; 05-27-2009 at 08:27 PM. Reason: insert [code] tags

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hello and welcome to the forums! Please edit your first post and use [CODE][/CODE] 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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    md520 (05-27-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks

    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

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    One uses margin for the bullets and the other uses padding.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by md520 View Post
    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/joo...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.
    Last edited by Rowsdower!; 05-27-2009 at 10:58 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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