Div tags and IE...

[jeffery1989]

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

Here is the CSS 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:

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:

    <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!

[aaronhockey_09]

try adding

clear:both

to the links ( should force them to not float left like you are saying they are. )

[jeffery1989]

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?

[aaronhockey_09]

Originally Posted by jeffery1989

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

[jeffery1989]

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.