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 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Menu works in FF, not in IE

    Hi I have a quick question. I have a nav menu at http://www.techlimelight.com and it works fine in Firefox but not in IE. The menu in question is the top nav. The submenus do not line up correctly in IE.

    Also two minor things that I am sure is easy to fix. First is I would like to have the entire cell be a link and not only the text. For instance if you hover over the "Home" cell the cell will light up but it does not become a link until you hover over the letters Home. Secondly is that the submenus don't line up perfectly to their parent cells. They are offset by a pixel or two to the right (In browsers that display it correctly like Firefox). Minor, I know, but it would look much better properly lined up.

    Any help would be much appreciated.
    Thanks,
    Marc

    TOP NAV HTML
    Code:
    <div class="topNavbar">
      <div class="topNavHome" align="center">
        <p><a class="topNavbar" href="{php}echo SITE_URL;{/php}">Home</a></p>
      </div>
    
      <div class="topNavLimelight" align="center">
        <p><a class="topNavbar" href="{php}echo SITE_URL;{/php}limelight.php">Limelights</a></p>
        <div id="topNav1" class="topNavNormal" align="left">
    		<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}limelight.php">Limelight Home</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Browse</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Search</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}limelight/actions/submit.html">Submit a Limelight</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">What is a Limelight?</a></div>
        </div>    
      </div>
      <div class="topNavLimelight_Toggle" onClick="toggleTopNav('topNav1', '1');">
      	<img name="top_nav_limelight1" src="{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg" 
        	onmouseover="flipImage('top_nav_limelight1', '{php}echo SITE_URL;{/php}images/top_nav_plus_hover.jpg')"
            onmouseout="flipImage('top_nav_limelight1', '{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg')" />
      </div>
      <div class="topNavNewsContact" align="center">
        <p><a class="topNavbar" href="#">News</a></p>
        <div id="topNav2" class="topNavNormal" align="left">
    		<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">News Home</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Browse</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Search</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Submit a Story</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">How Does News Work?</a></div>
        </div>    
      </div>
      <div class="topNavLimelight_Toggle" onClick="toggleTopNav('topNav2', '2');">
      	<img name="top_nav_limelight2" src="{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg" 
        	onmouseover="flipImage('top_nav_limelight2', '{php}echo SITE_URL;{/php}images/top_nav_plus_hover.jpg')"
            onmouseout="flipImage('top_nav_limelight2', '{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg')" />
      </div>
      <div class="topNavNewsContact" align="center">
        <p><a class="topNavbar" href="#">Information</a></p>
        <div id="topNav3" class="topNavNormal" align="left">
    		<div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">About</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Privacy</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Help</a></div>
            <div class="topNavListItem"><a class="topNavListItem" href="{php}echo SITE_URL;{/php}#">Contact</a></div>
        </div>    
      </div>
      <div class="topNavLimelight_Toggle" onClick="toggleTopNav('topNav3', '3');">
      	<img name="top_nav_limelight3" src="{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg" 
        	onmouseover="flipImage('top_nav_limelight3', '{php}echo SITE_URL;{/php}images/top_nav_plus_hover.jpg')"
            onmouseout="flipImage('top_nav_limelight3', '{php}echo SITE_URL;{/php}images/top_nav_plus_static.jpg')" />
      </div>
    </div>
    TOP NAV JAVASCRIPT
    Code:
    // JavaScript Document
    function toggleTopNav(id, number) {
    	var m = 3;
    	var t = document.getElementById(id);
    	var f = t.className == 'topNavNormal';
    	for ( i = 1; i <= m; i++ ) {
    		document.getElementById('topNav' + i).className = 'topNavNormal';
    	} // endfor i
    	if ( f ) {
    		t.className = 'topNavList' + number;
    	}
    }
    TOP NAV CSS
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    P
    {
    	padding: 9px;
    	margin: 0px;
    }
    
    a:hover {
    	cursor: pointer;
    }
    
    div.topNavbar
    {
    	font-size: 16px;
    	margin: 0px;
    	padding: 0px; 
    	border: 0px; 
    	font-weight: bold;
    	width: 700px;
    	font-family: Calibri, "Times New Roman", Arial;
    	color: #666666;
    }
    
    div.topNavNormal
    {
    	display: none;
    	position: static;
    }
    
    div.topNavHome
    {
    	padding: 0px;
    	font-weight: bold;
    	vertical-align: top;
    	width: 115px;
    	height: 37px;
    	border-left: 1px #999999 solid;
    	border-bottom: 1px #999999 solid;
    	border-right: 1px #999999 solid;
    	margin-left: 20px;
    	float: left;
    }
    
    div.topNavHome:hover 
    {
    	background-color: #F0FBC8;
    }
    
    div.topNavLimelight
    {
    	vertical-align: top;
    	width: 105px;
    	height: 37px;
    	border-left: 1px #999999 solid;
    	border-bottom: 1px #999999 solid;
    	border-right: 1px #999999 solid;
    	margin-left: 12px;
    	float: left;
    }
    
    div.topNavLimelight:hover 
    {
    	background-color: #F0FBC8;
    }
    
    div.topNavNewsContact
    {
    	vertical-align: top;
    	width: 95px;
    	height: 37px;
    	border-left: 1px #999999 solid;
    	border-bottom: 1px #999999 solid;
    	border-right: 1px #999999 solid;
    	margin-left: 12px;
    	float: left;
    }
    
    div.topNavNewsContact:hover 
    {
    	background-color: #F0FBC8;
    }
    
    div.topNavLimelight_Toggle
    {
    	width: 20px;
    	float: left;
    }
    
    div.topNavLimelight_Toggle:hover
    {
    	background-color: #F0FBC8;
    }
    
    div.topNavList1
    {
    	vertical-align: top;
    	background-color: #FFFFFF;
    	width: 125px;
    	height: 120px;
    	border: 1px solid #5F7709;
    	position: absolute;
    	z-index: 10;
    	padding-left: 8px;
    }
    
    div.topNavList2
    {
    	vertical-align: top;
    	background-color: #FFFFFF;
    	width: 150px;
    	height: 120px;
    	border: 1px solid #5F7709;
    	position: absolute;
    	z-index: 10;
    	padding-left: 8px;
    }
    
    div.topNavList3
    {
    	vertical-align: top;
    	background-color: #FFFFFF;
    	width: 125px;
    	height: 95px;
    	border: 1px solid #5F7709;
    	position: absolute;
    	z-index: 10;
    	padding-left: 8px;
    }
    
    div.topNavListItem
    {
    	width: 155px;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	font-size: 14px;
    }
    
    a.topNavListItem
    {
    	color: #999999;
    }
    
    a.topNavListItem:hover
    {
    	color: #666666;
    }
    
    a.topNavbar
    {
    	font-size: 16px;
    	color: #666666;
    	font-weight: bold;
    }

  • #2
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Try something like the code below to make the div a link
    Code:
    <div class="topNavListItem" onclick="window.location('{php}echo SITE_URL;{/php}limelight.php');" style='cursor:hand;' ><a class="topNavListItem" href="{php}echo SITE_URL;{/php}limelight.php">Limelight Home</a></div>
    As for positioning problems etc its usually a good idea to start your stylesheet with
    Code:
    div{
    margin:0;
    padding:0;
    }
    or something along those lines to stop different browsers applying different defaults for padding & margins.

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Actually, it would be :
    Code:
    * { margin:0; padding:0; }
    to target all elements on the page, and
    Code:
    * html { margin:0; padding:0; }
    to target all elements on a page for IE only.

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks guys, I tried all the methods outlined above but they didn't change anything. Wrapping the link in a div tag with an onclick event seems like it should work but dosn't change anything. This problem with the IE submenu alignment is killing me. Is the method I used to code the menu a good one? Should I do something differently? Any other ideas?

    Thanks again for responding,
    Marc

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What version of IE do the menus not work in? Also you have some whitespace before you doctype that could be causing your problems. NO whitespace should come before the doctype.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I havn't tested the menu in IE6, but I know they don't work in IE7. I've been fiddling with this for a while and I can't for the life of me figure out what's wrong. Here's the code for the index that declares the doctype:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>{$pageTitle}</title>
            <link href="{php}echo SITE_URL;{/php}css/style.css" type="text/css" rel="stylesheet" />
            <link href="{php}echo SITE_URL;{/php}css/top_nav.css" type="text/css" rel="stylesheet" />
            <link href="{php}echo SITE_URL;{/php}css/limelight.css" type="text/css" rel="stylesheet" />
            <link href="{php}echo SITE_URL;{/php}css/lert.css" type="text/css" rel="stylesheet" />		
    		<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/main.js"></script>
    		<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/ajax.js"></script>
    		<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/top_nav.js"></script>
    		<script type="text/javascript" src="{php}echo SITE_URL;{/php}javascript/lert.js"></script>
    	</head>
        <body>
    
            <div align="center">
            <div style="width: 1015px">
                <div id="header">{include file="header.tpl"}</div>
                <div id="left_Column">{include file="left_column.tpl"}</div>
                <div id="body_Content">{include file="body_content.tpl"}</div>
                <div id="left_Column_End"></div>
                <div id="body_Content_End"></div>
                <div id="bottom_Nav">{include file="bottom_nav.tpl"}</div>
            </div>
            </div>
        
        </body>
    </html>
    top_nav is included in the body_content. And for some reason I still can't figure out how to make the main menu cells (ie "Home", "Limelight" etc) linkable. I tried the obvious, adding an onclick event to the div tag making up the cell and it didn't work for some reason.

    Thanks
    Last edited by Evario; 10-18-2007 at 01:47 AM.

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Anyone?

  • #8
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    5
    Thanked 9 Times in 9 Posts
    My response to this post might shed some light on your problems:

    Dropdown in IE


  •  

    Posting Permissions

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