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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Help with site - Rollover menu in IE

    Hello everyone,

    This is my first post here, and my first experience with coding a website for business use.

    Anyways, the rollover menu of my site (www.handytax.ca) has problems with how it renders in IE. It seems to work fine in every other browser, with minor issues in Opera.

    Is there any code I can use to mitigate the problem with IE (I know that they are extremely poor when it comes to meeting web standards.)

    Thanks in advance and hope to be a productive of this forum.

    P.S. here is the CSS code

    Code:
    #container {position:relative;
    	width: 700px;
    	height: 30px;
    	padding: 0;
    	margin: 25px 0 25px 0;}
    
    #nav {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	list-style: none;
    	margin: 0;
    	height: 50px;
    	display: inline;
    	overflow: hidden;
    	width: 201px;
    	font-family:Arial, Helvetica, sans-serif; font-size:14px
    	}
    	
    #nav li {
    	margin-left:6px;
    	margin-right:6px;
    	display:inline;
    	list-style-type: none;
    	margin
    	}
    	
    #nav .sub {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none}
    
    
    #nav li:hover {position:relative; z-index:100;}
    #nav a:hover {position:relative; white-space:normal; z-index:100;}
    
    #nav :hover ul.sub
    {left:0; top:12px; width:170px; height:auto; z-index:100;}
    #nav :hover ul.sub li
    {display:block; height:46px; position:relative; width:170px; font-weight:normal; background-color:#FFA497; margin:2px; font-size:16px; z-index:10;}

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You dont say what your problem is specifically. Please describe what your having issues with and what your desired outcome should be. But after trying to validate your code, you have a few errors which may be causing some problems. One in particular is your naming convention for your div id's. You have one named "nav id" which I think is throwing an error because you have a space in your name. Rather htan use something like "nav id" use something like <div id="navBar"> or some other name with no spaces and ideally without the use of "id" in the name itself. There are other issues you should fix, and you can validate your code here to work through them.
    Last edited by teedoff; 11-04-2010 at 04:26 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem should be visible when the site is visited through IE. The submenus show up in the desired spot (dierctly underneath the menu heading) only when the IE window is kept small in relation to Windows (known as restored). When it is maximized, the submenus show up far to the right.

    Could have something to do with absolute and relative positioning.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    What's your IE version?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by raguv2000 View Post
    The problem should be visible when the site is visited through IE. The submenus show up in the desired spot (dierctly underneath the menu heading) only when the IE window is kept small in relation to Windows (known as restored). When it is maximized, the submenus show up far to the right.

    Could have something to do with absolute and relative positioning.
    If it was visible, I wouldn't have asked to be more specific...lol At any rate, I viewed your page in IE 8 and firefox with the windows maximized and small. I then viewed your page in IE8 with my screen resolution set at the lowest setting(800x600 i think) and in each case the menus and dropdowns appear correct. The dropdowns appear underneath the navigation link as they should.

    You still have coding validation errors in your page that you should still fix first. If you are having some rendering issues, the first thing should always be make sure you have valid code. Please fix the issues and then if you are still having a problem, at least we know its not coming from invalid code. Hope that helps.


  •  

    Posting Permissions

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