Help understanding CSS menu

Discussion in 'CSS' started by RaceJunkie, Nov 5, 2007.

  1. #1
    I am working on a tabbed menu from dynamic drive. I have it up but I can't figure out why

    1. All the images do not show.
    2. The bullets are still showing up.

    localracechat.com/menu.html

    Here is the CSS
    <LINK REL=StyleSheet HREF="http://www.localracechat.com/menu.css" TYPE="text/css" MEDIA=all>
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
    
    .glossymenu{
    	position: relative;
    	padding: 0 0 0 34px;
    	margin: 0 auto 0 auto;
    	background: url(images/menu/menur_bg.gif) repeat-x; /*tab background image path*/
    	height: 46px;
    	list-style: none;
    }
    
    .glossymenu li{
    	float:left;
    }
    
    .glossymenu li a{
    	float: left;
    	display: block;
    	color:#000;
    	text-decoration: none;
    	font-family: sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    	height: 46px;
    	line-height: 46px;
    	text-align: center;
    	cursor: pointer;	
    }
    
    .glossymenu li a b{
    	float: left;
    	display: block;
    	padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    
    .glossymenu li.current a, .glossymenu li a:hover{
    	color: #fff;
    	background: url(images/menu/menur_hover_left.gif) no-repeat; /*left tab image path*/
    	background-position: left;
    }
    
    .glossymenu li.current a b, .glossymenu li a:hover b{
    	color: #fff;
    	background: url(images/menu/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
    }
    
    </style>
    Code (markup):
    Source
    dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/
     
    RaceJunkie, Nov 5, 2007 IP
  2. babyboy808

    babyboy808 Well-Known Member

    Messages:
    491
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    125
    #2
    looks good to me, did you fix it?
     
    babyboy808, Nov 5, 2007 IP
  3. Lukas

    Lukas Well-Known Member

    Messages:
    1,299
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    130
    #3
    looks Ok to me as well.

    maybe try taking out double 0 auto" in the margin areas.

    What I did initially with these is forget to make .gif images ( menu.gif )

    You may already have them, but just trying to find a simple solution
     
    Lukas, Nov 9, 2007 IP
  4. armatik

    armatik Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Change list-style:none; to list-style-type:none;. That should fix your bullet problem.

    To fix your images problem, you put the images in the li part of your CSS, not the a part.
     
    armatik, Nov 9, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    armatik, list-style is not the problem (since it's a shorthand version of list-style-type, which also covers other list styles as well). I use list-style: none; all the time, and have yet to have a problem with it. He can also put the background images in the anchor if the styles have been set up to handle them.

    As it is, the XHTML code doesn't validate (I'd fix those validation errors PDQ), and furthermore, I wouldn't trust anything to Dynamic Drive - the site just flat out SUCKS. And besides, this is just a blatant ripoff of the Sliding Doors of CSS, which was posted by Douglas Bowman on A List Apart anyway.

    http://www.alistapart.com/articles/slidingdoors/
     
    Dan Schulz, Nov 10, 2007 IP
  6. armatik

    armatik Peon

    Messages:
    27
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Woops, pardon my embarrassing mistakes. :eek: That's just always the way I do it, so I thought maybe that might make it work.
     
    armatik, Nov 11, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It's ok. :)
     
    Dan Schulz, Nov 11, 2007 IP