SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: CSS Problem

  1. #1
    Non-Member Geekz's Avatar
    Join Date
    Oct 2006
    Location
    Australia
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Problem

    Look at this screenshot:



    You see on Firefox, between each menu picture there isn't a gap, but on IE there is.

    This is a css problem, and I need to fix it.

    On hover, the css -32px so the image:



    will reduce 32pixels into the different area, making the hover a ligher background.

    How do i fix the gap between each link?

    http://www.myspacegeeks.com/style.css

    Code:
    #menu9 {
    	width: 150px;
    	}
    	
    #menu9 li a {
    	height: 32px;
      	voice-family: "\"}\""; 
      	voice-family: inherit;
      	height: 24px;
    	text-decoration: none;
    	}	
    	
    #menu9 li a:link, #menu9 li a:visited {
    	color: #FFF;
    	display: block;
    	background:  url(menu9.gif);
    	padding: 8px 0 0 10px;
    	font-size:11px;
    	font-weight:bold;
    	font-family:verdana;
    	letter-spacing:-1px;
    	}
    	
    #menu9 li a:hover {
    	color: #FFF;
    	background:  url(menu9.gif) 0 -32px;
    	padding: 8px 0 0 12px;
    	font-size:11px;
    	font-weight:bold;
    	}
    Is it an issue with the padding?

    Whats the correct css for me to resolve this?

    Thanks in advance.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hello and good morning.

    You do not need to use the hack you have used for your anchor element.

    The extra space in IE is due to the haslayout bug. Assign your li or ul a width and it will go away.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Enthusiast S.Vasiliy's Avatar
    Join Date
    May 2006
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because of font-size and line-height, if you reduce them or set to 0, it have to be ok in ie

  4. #4
    Non-Member Geekz's Avatar
    Join Date
    Oct 2006
    Location
    Australia
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2 replies, which one is right lol.

  5. #5
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Like I've said, you're forcing the haslayout bug to become active in IE because you have not assigned your list a width.

    Assign it a width like e.g. so:
    Code:
    #menu9 ul li {
    	width: 100%;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  6. #6
    Non-Member Geekz's Avatar
    Join Date
    Oct 2006
    Location
    Australia
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #menu9 {
    width: 150px;
    }

  7. #7
    Non-Member Geekz's Avatar
    Join Date
    Oct 2006
    Location
    Australia
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't have a #menu9 ul li {

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Geekz
    I don't have a #menu9 ul li {
    Assign your list element a width. #menu9 is not a list element. It's an ID.

    You need to set a width for your list element (li). You need to create it.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

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