Horizontal navigation list not shown properly in IE7

Discussion in 'Web Design and Development' started by Simplicated, Feb 22, 2009.

  1. Simplicated macrumors 65816

    Simplicated

    Joined:
    Sep 20, 2008
    Location:
    Waterloo, Ontario, Canada
    #1
    Hi guys,

    I made a horizontal list but it seems it is not being parsed correctly in IE7. Safari and Firefox both work fine.

    This is the CSS and only codes related to the list are shown:
    Code:
    ul {
    	list-style-image: none;
    	list-style-type: none;
    }
    #navigation #right ul {
    	margin: 0 0;
    	padding: 0 0;
    }
    #navgiation #right li {
    	list-style-type: none;
    	display: inline;
    }
    #navigation #right li a {
    	float: left;
    	height: 43px;
    	font-size: 18px;
    	overflow: hidden;
    	width: 125px;
    	color: #000;
    	text-align: center;
    	padding-top: 27px;
    	position: relative;
    }
    This is how the list shown in Safari and Firefox (I added #left and #right to let you know what are they).
    [​IMG]

    This is how IE7 behaved strangely (I didn't include #left).
    [​IMG]

    Are there anything wrong in the code? Thank you very much.
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    After a quick look I'm confused by something. Projects, Forums and Contacts should all be UL's and not LI's (submenus) as they're at the same level as Home, is this assumption correct? The CSS you posted is for right LI's and without the relevant HTML to confirm what's what I can't match the CSS you posted with what I see visually in your post here. I think I'm saying I don't see all the UL related selectors. For now my informal advice is to change inline to block level and include width and height in all base UL and LI selectors.

    Wait for another opinion on this before taking action. I could be wrong.

    -jim
     

Share This Page