Workaround for CSS menu in IE

Discussion in 'CSS' started by MattL, Jul 3, 2008.

  1. #1
    I'm trying to figure out the best workaround for this CSS menu in IE. It looks fine in FF (except that grey block I need to get rid of). The problem is added padding/space at the top of each block (except the first one). Any help is greatly appreciated! TIA

    Here it is in FF -

    [​IMG]

    and IE -

    [​IMG]

    Here is the CSS -

    #sidebar {
    	float: left;
    	width: 185px;
            height: 100%;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
            background-color: #84A6A7;
            background: #84A6A7;
            border-right: 1px solid #84A6A7;
    	}
    	
    #sidebar h2 {
    	color: #fff;
            background: #84A6A7;
    	font-size: 11px;
    	font-family: Verdana, Helvetica, Sans-Serif;
    	font-weight: bold;
    	padding: 5px 0px 5px 10px;
    	margin: 0px 0px 0px 0px;
    	 border-bottom: 1px solid #35231C;
    	}
    	
    #sidebar ul {
    	list-style: none;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	}
    	
    #sidebar li {
    	list-style: none;
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	}
    	
    #sidebar ul li {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	}
    	
    #sidebar ul li a {
        display: block;
    	color: #FFFFFF;
            font-weight: bold;
    	text-decoration: none;
    	padding: 5px 10px 5px 12px;
    	margin: 0px 0px 0px 0px;
    	
           border-bottom: 1px solid #35231C;
    	}
    
    #sidebar ul li a:hover {
    	background: #B1C7C7;
    	color: #35231C;
            font-weight: bold;
    	text-decoration: none;
    	}
    Code (markup):
     
    MattL, Jul 3, 2008 IP
  2. sitehost

    sitehost Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The menu looks fine when I see it in IE 7, so I assume you were checking it in IE 6. If so, the problem is a bug in IE 6 that renders the white space between the ending </li> tag on one line and the opening <li> tag on the following line as a line feed creating the extra space.

    At the risk of getting beaten up by the CSS gurus who think using HTML formatting to control display problems is unacceptable, I'd suggest you try the ugly code method as a workaround.

    In your html code, change the nicely formatted list you probably have now to look like this instead:

    <ul><li><a href="#">Home</a></li
    ><li><a href="#">Services</a></li
    ><li><a href="#">Why Choose Us?</a></li
    ><li><a href="#">Getting Started</a></li
    ><li><a href="#">Free Assessment</a></li
    ><li><a href="#">About Us</a></li
    ><li><a href="#">FAQs</a></li
    ><li><a href="#">Resources</a></li
    ><li><a href="#">Employment</a></li
    ><li><a href="#">Contact Us</a></li
    ></ul>

    That removes the spaces that IE 6 treats as line feeds and makes it behave.

    Good luck.
     
    sitehost, Jul 3, 2008 IP
  3. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #3
    Thanks for the reply. I was gone for the weekend. Yes it is IE 6. I was hoping for a CSS solution. I may just have to try out your "ugly code" method. I have not seen that one.


     
    MattL, Jul 7, 2008 IP
  4. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If that doesn't work, which it might, you can try using a separate stylesheet just for IE6.
     
    yankzilla, Jul 7, 2008 IP
  5. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You can also try adding display:inline; under #sidebar ul li

    Also, to prevent having to declare the margin and padding for everything you can try using css global reset. saves time and minimizes your code drastically.
     
    glorie, Jul 7, 2008 IP
  6. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #6
    Thanks! That worked. Just what I was looking for.

    Can you give me an example of css global reset?
     
    MattL, Jul 8, 2008 IP
  7. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #7
    * { margin: 0px; padding: 0px }
     
    yankzilla, Jul 8, 2008 IP
  8. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    this is what i commonly use. with an addition of list-style-type:none;
     
    glorie, Jul 8, 2008 IP
  9. gezzle

    gezzle Peon

    Messages:
    108
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    gezzle, Jul 9, 2008 IP
  10. MattL

    MattL Well-Known Member

    Messages:
    838
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    118
    #10
    Thanks. Should this go at the end or beginning of your stylesheet? Does it matter?
     
    MattL, Jul 9, 2008 IP
  11. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    It doesn't matter, but to make it more organized, just put it on the top after your body code in the css.
     
    glorie, Jul 11, 2008 IP