Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts

    Internet Explorer Horizontal menu looks vertical in IE6

    Hi all, there's a horizontal menu I'm working on, and it looks ok in all browsers except IE6. Actually in I6
    - it looks vertical instead of horizontal
    - no hover or active effects are visible
    - no padding is applied

    It looks awful and I don't understand why. I tested the page in w3c css and xhtml validator and there is no error. Can you help me a littile? The css and html codes are below

    html:

    Code:
    <ul class="menu_topmenu">
    
    <li id="current" class="active item1">
    <a href="#">
    <span>Home</span>
    </a>
    </li>
    
    <li class="item2">
    <a href="#">
    <span>Menu Item 1</span>
    </a>
    </li>
    
    <li class="item2">
    <a href="#">
    <span>Menu Item 2</span>
    </a>
    </li>
    
    </ul>
    css:

    Code:
    #ja-mainnav, #ja-mainnav ul {
    	padding: 0;
    	margin: 0;
    	font-size:16px;
    }
    
    ul.menu_topmenu{
    	height:84px;
    }
    
    #ja-mainnav a {
    	display: block;
    	margin: 0;
    }
    
    #ja-mainnav li {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    
    #ja-mainnavwrap {
    	width:100%;
    	height:194px;
    	margin:0 auto;
    	padding:0;
    	background:url(../images/top_menu_back.jpg) top no-repeat;
    }
    
    #ja-mainnav ul, #ja-mainnav li {
    	list-style: none;
    	background:none;
    }
    
    #ja-mainnav span.separator {
    	display:none;
    }
    
    #ja-mainnav > ul {
    	margin:0 0 0 158px;
    	padding-top:11px;
    }
    
    #ja-mainnav > ul > li {
    	height:44px;
    	margin:0;
    	padding:0 0 0 2px;
    	background:url(../images/menu_slicer.jpg) top left no-repeat;
    }
    
    #ja-mainnav > ul > li.active {
    	color: #136cb0; 
    }
    #ja-mainnav > ul > li.active a span {
    	color: #136cb0; 
    	background:url(../images/menu_active_back.jpg) top left repeat-x; 
    }
    
    #ja-mainnav > ul > li:hover,
    #ja-mainnav > ul > li:active,
    #ja-mainnav > ul > li:focus {
    }
    
    #ja-mainnav li a {
    	color: #136cb0;
    	font-weight: bold;
    	text-decoration: none;
    	font-size:16px;
    	height:44px;
    	cursor:pointer;
    }
    
    #ja-mainnav li a span{
    	height:39px;
    	padding:5px 13px 0 13px;
    	display:block;
    	background:none; 
    }
    
    #ja-mainnav li a span:hover{
    	height:39px;
    	padding:5px 13px 0 13px;
    	display:block;
    	background:url(../images/menu_hover_back.jpg) top left repeat-x; 
    }
    
    #ja-mainnav ul.menu {
    	margin: 0; 
    	padding: 0;
    	float: left;
    	height:95px;
    }
    
    #ja-mainnav ul.menu li {
    	margin: 0; 
    	padding: 0;
    	float: left;
    	display: block;
    	background: none;
    	cursor: pointer;
    	position: relative;
    	list-style: none;
    }
    
    #ja-mainnav ul.menu li a {
    	margin: 0;
    	display: block;
    	color: #136cb0;
    	font-weight: bold;
    	line-height: normal;
    	text-decoration: none;
    }
    
    #ja-mainnav ul.menu li a:hover,
    #ja-mainnav ul.menu li a:active,
    #ja-mainnav ul.menu li a:focus {
    	color: #136cb0;
    }
    
    #ja-mainnav ul.menu li {
    	margin: 0;
    }
    
    #ja-mainnav ul.menu li:hover,
    #ja-mainnav ul.menu li.sfhover,
    #ja-mainnav ul.menu li.parentsfhover,
    #ja-mainnav ul.menu li.parent-activesfhover {
    	color: #136cb0;
    }
    
    #ja-mainnav ul.menu li.active a,
    #ja-mainnav ul.menu li.active a:hover,
    #ja-mainnav ul.menu li.active a:active,
    #ja-mainnav ul.menu li.active a:focus {
    	color: #136cb0;
    }
    
    #ja-mainnav h3 {
    	display: none;
    }
    
    #ja-mainnav .moduletable_menu {
    	background: none;
    	margin: 0;
    	padding: 0;
    }
    Last edited by ktsixit; 03-31-2009 at 09:11 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #ja-mainnav a {
    	/*display: block;*/
           float:left;
    	margin: 0;
    }
    #ja-mainnav li a span{
    	height:39px;
    	padding:5px 13px 0 13px;
    	/*display:block;*/ 
            float:left;
    	background:none; 
    }
    You may need to set a suitable width to them. A link to your page would help us to track the issue.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    106
    Thanks
    27
    Thanked 3 Times in 3 Posts
    ok, your advice worked menu items are positioned horizontally now. But still there is none of the hover and active effects working. Also the
    Code:
    #ja-mainnav > ul {
    	margin:0 0 0 158px;
    	padding-top:11px;
    }
    is not working at all too.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    IE doesn't support :hover pseudo on any elements other than anchor. Also, it doesn't support child selector > either.

    Post your complete code, as the above code doesn't match with your CSS, or a link would would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertical navigation instead of horizontal in IE browser

    My client is having an issue in IE7 with the navigation menu. Instead of horizontal it showing vertical. Any ideas how to fix it? Thank you!
    http://z.bb/website/e6/thank-you2.htm

  • #6
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Please open new threads for new issues, instead of resurrecting ancient ones.

    Your question has already been answered in post #2: Give those floated elements a specific width. The results of auto-width floats are unpredictable in older browsers, see example page: http://css-class.com/test/css/visfor...width-auto.htm.

    If you have further questions, please put them in a new thread.


  •  

    Posting Permissions

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