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
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Div tags and IE...

    I've been working on some dropdown menus for the navigation on my current web project.

    Here is the CSS code:
    Code:
    #drop_downs
    {	margin: 0;
    	padding: 0;
    	z-index: 30}
    
    #drop_downs li
    {	margin: 0;
    	padding: 1px;
    	list-style: none;
    	float: left;
    	font: bold 11px arial}
    
    #drop_downs li a
    {	display: block;
    	margin: 0 1px 0 0;
    	padding: 1px 1px;
    	width: 90px;
    	color: #000000;
    	text-align: center;
    	text-decoration: none}
    
    #drop_downs div
    {	position: absolute;
    	visibility: hidden;
    	margin: 0;
    	padding: 1px;
    	margin-top:-5px;
    	border-left: 4px solid #3ea5e6;
    	margin-left:-1px;
    	}
    
    	#drop_downs div a
    	{	position: relative;
    		display: block;
    		margin: 0;
    		padding: 1px 1px;
    		width: 135px;
    		white-space: nowrap;
    		text-align: left;
    		text-decoration: none;
    		color: #bbbbbb;
    		font: 12px arial;
    		
    	}
    
    	#drop_downs div a:hover
    	{	color: #ffffff; background-color: #566874; 
    		}
    Now the Javascript:
    Code:
    var timeout	= 300;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    
    function mopen(id)
    {	
    	
    	mcancelclosetime();
    
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    	ddmenuitem.style.position = 'relative';
    
    }
    
    function mclose()
    {
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    	if(ddmenuitem) ddmenuitem.style.position = 'absolute';
    }
    
    
    function mclosetime()
    {
    	closetimer = window.setTimeout(mclose, timeout);
    }
    
    
    function mcancelclosetime()
    {
    	if(closetimer)
    	{
    		window.clearTimeout(closetimer);
    		closetimer = null;
    	}
    }
    And finally, the HTML:
    Code:
        <img src="Images/button_home.png" name="home" width="92" height="38" usemap="#homeMap" id="home" border="0" />
        <map name="homeMap" id="homeMap" onmouseover="document.home.src='images/button_home_over.png';" onmouseout="document.home.src='images/button_home.png';">
            <ul id="drop_downs">
    		<li>
          <area shape="rect" coords="4,0,46,18" href="#" alt="Home" onmouseover="mopen('m1')" onmouseout="mclosetime()" />
            <div id="m1" 
                onmouseover="mcancelclosetime()" 
                onmouseout="mclosetime()">
                
            <a href="index.html">&nbsp;main&nbsp;</a>
            <a href="aerospace.html">&nbsp;aerospace&nbsp;</a>
            <a href="#">&nbsp;contact center services&nbsp;</a>
            <a href="#">&nbsp;training &amp; employment&nbsp;</a>
            <br />
            </div>
    
    </ul>
        </map>
    The problem that I am having is that the menus are supposed to expand downward on rollover and bump all subsequent DIV tags down the necessary amount of pixels. Like so:

    IM THE LINK
    -imapopup
    -imapopup
    -imapopup

    IM THE NEXT DIV/LINK

    This work totally fine in every browser but (you guessed it!) Internet Explorer and Safari. Those two browsers handle the code like this:

    IM THE LINK
    -imapopup
    -imapopup IM THE NEXT DIV/LINK
    -imapopup IM THE DIV/LINK AFTER THAT
    AND SO FORTH...

    I can take screen caps if that's really needed...I just didn't want to upload and link to pics.

    If anyone has an IE and Safari workaround or hack that would allow these menus to function properly, I would appreciate that!

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    try adding
    Code:
    clear:both
    to the links ( should force them to not float left like you are saying they are. )

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Doesn't seem to be working... I've added the style attribute (style="clear:both;") to the <a href> and also tried adding to the <div> tag that encapsulates each dropdown menu with no luck. The result is the same in IE. I appreciate the help...any other suggestions?

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by jeffery1989 View Post
    Doesn't seem to be working... I've added the style attribute (style="clear:both;") to the <a href> and also tried adding to the <div> tag that encapsulates each dropdown menu with no luck. The result is the same in IE. I appreciate the help...any other suggestions?
    Can you post a link so i can see whats going on ?
    You also need to make sure your code validates.
    I can see that your <li> tag is not closed.

    I meant add clear:both to each LI

    Can you post your full code and post a link so i can see whats going on
    thanks

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.jefferycheney.com/Concept 7/aerospace.html

    And fyi, I went through on another page and closed all <li> tags and added your CSS to each <li> and still no luck.

    Because the site I'm sending you too has copy written material, most of the images have been removed but this does not effect the navigation section.


  •  

    Tags for this 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
    •