SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    broken horizontal menu using list in ie6

    I've been trying to create a horizontal menu using lists and it looked great, in firefox, but as usually IE gives me something ugly.

    http://davidlawrencepreston.co.uk/test/index3.html

    The list in IE shows vertically

    Code CSS:
    div#top_menu
    {
    	overflow: hidden;
    	width:100%;
    	background-color: #0331C6;
    }
    ul#top_menu
    {
    	display: block;
    	padding: 0;
    	margin: 0;
    }
     
    ul#top_menu li
    {
    	width:100%;
    	display: block;
    }
    #top_menu ul li a {height: 1%;}
    #top_menu a {
    font: bold 0.7em/1.4em Tahoma, Verdana, Arial, sans-serif;
    }
    ul#top_menu li a
    {
    	display: block;
    	float: left;
    	padding: 8px 8px;
    	text-decoration: none;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	font-size: 114%;
    	color: #FFE5BF;
    	background-color: #0331C6;
    	border: 1px solid #FF0000;
    	border-width: 0 0 1px 0;
    	white-space: nowrap;
    }
     
    ul#top_menu li a:hover
    {
    	background: #657CC6;
    	color: #FFFFFF;
    }
     
    ul#top_menu li a.active
    {
    	color: #fff;
    	font-weight: bold;
    }

    I can't find any 'hacks' for it, is it something simple?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd start by validating your code - just looking at the excerpt you provided, you're re-using ID values; ID values can only be used once per page.

    Let me see what I can do.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'm working down your HTML validation errors.
    • You have 2 <head> tags - remove one of them.
    • Line 116 - the IMG tag: you need to set your width, height and alt="" attributes.
    • Get rid of the DIV with the ID of top_menu (you don't need it, since the styles can be applied to the UL with the same ID anyway - you can't have the same value for an ID used more than once - that's what classes are for).


    I'll take a look at your stylesheet next. (I've been looking at code all night.)

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah.. i've been looking at code all morning. Your head starts to spin, and you wonder why you are doing it.
    Ok i've got rid of the div, added img stuff and removed my second head.

  5. #5
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    float left the li elements instead of a and it will work in IE

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ive tried that, now it does the same thing in both - but still showing as vertical list

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    190
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah ok, i had max width - silly me!
    Thanks semantic, just leaves me with extending the bg for that element, shouldn't be too hard


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
  •