IE Drop Down Menu Help [Archive]

Click to See Complete Forum and Search --> : IE Drop Down Menu Help

Dako97669

06-02-2006, 07:08 PM

I have been fighting with this menu problem for the past 2 days (little sleep too) and really need help. I am trying to make a page for my art teacher, and I have added a drop down menu. I am aware that :hover does not work in IE. I have used "Suckerfish"'s javascript fix to fix the problem, except now the problem is that the words appearing on the menu tab appear way to the right and the drop down menu will only appear once each time the page is loaded. Please take a look any help is appreciated.

Site is Here (https://home.comcast.net/~tim.steele)

Page 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" />
<meta name="generator" content="Adobe GoLive" />
<title>AlGotliebGallery.com</title>
<link href="css/basic2.css" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("dropdown").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+="sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("sfhover\\b", ""));
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="head">
<div id="title">
Al Gotlieb Gallery.com
</div>
</div>
<div id="menu1">
<div class="option">
<a href="index.html">Home</a>
</div>
</div>
<div id="menu2">
<div class="option">
Press Release
</div>
</div>
<div id="menu3">
<div class="option">
Price List
</div>
</div>
<div id="menu4">
<div class="option">
<a href="mailto:algotlieb@comcast.net">Contact Me</a>
</div>
</div>
<div id="menu5">
<div id="dropdown">
<ul id="nav">
<li id="gallery">Galleries
<ul>
<li id="portfolio"><a href="">Portfolio Galleries</a>
<ul>
<li>
<a href="gallery1.html">Gallery 1</a>
</li>
</ul>
</li>
<li id="evolution"><a href="">Evolution of an Image Galleries</a>
<ul>
<li>
<a href="gallery10.html">Gallery 1</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="content">
<table id="main" width="750" cellspacing="0" cellpadding="10">
<tr>
<td colspan="3" width="750" height="15" class="optionbar">
Portfolio Galleries
</td>
</tr>
<tr>
<td width="250" class="menupic">
<a href="gallery1.html"><img src="images/A/thumbnails/1.jpg" border="0"></a>
</td>
<td width="250" class="menupic">
<img src="images/B/thumbnails/11.jpg" border="0">
</td>
<td width="250" class="menupic">
<img src="images/C/thumbnails/21.jpg" border="0">
</td>
</tr>
<tr>
<td class="menuoption">
<a href="gallery1.html">Gallery 1</a>
</td>
<td class="menuoption">
Gallery 2
</td>
<td class="menuoption">
Gallery 3
</td>
</tr>
<tr>
<td colspan="3" width="750" height="15" class="optionbar">
Evolution of an Image Gallaries
</td>
</tr>
<tr>
<td class="menupic" width="250">
<img src="images/Witchdoctor/thumbnails/1.jpg" border="0">
</td>
<td class="menupic" width="250"></td>
<td class="menupic" width="250"></td>
</tr>
<tr>
<td class="menuoption" width="250">
<a href="gallery10.html">Gallery 1</a>
</td>
<td class="menuoption" width="250"></td>
<td class="menuoption" width="250"></td>
</tr>
</table>
</div>
</body>

</html>

CSS code

body { background-color: #000; text-align: left; margin-top: 0; margin-left: 0; padding-top: 15px; padding-left: 15px; }
.option { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; padding-top: 10px; }
.option a:link { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; padding-top: 10px; }
.option a:hover { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: underline; text-align: center; padding-top: 10px; }
.option a:visited { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; text-align: center; padding-top: 10px; }
a:link { color: white; font-size: 12px; text-decoration: none; }
a:visited { color: white; font-size: 12px; text-decoration: none; }
a:hover { color: #fff; font-size: 12px; text-decoration: underline; }
#head { color: #fff; font-size: 30px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; background-image: url(../images/header.jpg); background-repeat: no-repeat; text-decoration: none; text-align: left; width: 1000px; height: 200px; margin-left: 50px; padding-left: 50px; }
#main { position: absolute; left: 50px; padding-top: 50px; }
.menuoption { color: white; font-size: 12px; font-weight: bold; text-decoration: none; text-align: center; padding-top: 6px; padding-bottom: 12px; }
.menupic { color: white; font-size: 12px; font-weight: bold; text-decoration: none; text-align: center; padding-top: 30px; padding-bottom: 6px; }
.optionbar { background-color: #00c; color: white; font-size: 12px; font-weight: bold; text-decoration: none; text-align: center; margin: 0; padding: 0; }
#title { position: absolute; top: 75px; left: 250px; }
.menu { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; background-color: #00c; text-decoration: none; text-align: center; vertical-align: middle; width: 100px; height: 30px; }
#gallery { color: white; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; position: absolute; width: 100px; height: 29px; margin: 0; padding-top: 10px; padding-bottom: 0; }
#menubar { position: absolute; top: 150px; left: 205px; }
#menu1 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; vertical-align: bottom; position: absolute; top: 142px; left: 205px; width: 100px; height: 29px; }
#menu2 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 310px; width: 100px; height: 29px; vertical-align: bottom; }
#menu3 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 415px; width: 100px; height: 29px; vertical-align: bottom; }
#frame { left: 50px; }
#menu4 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 520px; width: 100px; height: 29px; vertical-align: bottom; }
#menu5 { background-image: url(../images/menu.jpg); background-repeat: no-repeat; text-align: center; position: absolute; top: 142px; left: 625px; width: 100px; height: 29px; vertical-align: bottom; list-style-type: none; }
#dropdown { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-decoration: none; vertical-align: middle; position: absolute; width: 100px; height: 20px; float: left; }
#dropdown ul { width: 100px; float: left; margin: 0; padding: 0; list-style-type: none; }
#dropdown a { color: #fff; font-size: 10px; font-weight: bold; background-color: #00c; text-decoration: none; text-align: center; vertical-align: middle; margin: 0; padding-top: 6px; padding-bottom: 6px; border: solid 1px #000; display: block; }
#dropdown a:hover { background-color: #000; }
#dropdown li { position: relative; }
#dropdown ul ul { position: absolute; top: 29px; z-index: 500; }
#dropdown ul ul ul { position: absolute; top: 0; left: 100%; }
div#dropdown ul ul { display: none; }
div#dropdown ul li:hover ul ul, div#dropdown ul li.sfhover ul ul { display: none; }
div#dropdown ul ul li:hover ul ul, div#dropdown ul ul li.sfhover ul ul { display: none; }
div#dropdown ul li:hover ul, div#dropdown ul li.sfhover ul { display: block; }
div#dropdown ul ul li:hover ul, div#dropdown ul ul li.sfhover ul { display: block; }
div#dropdown ul ul ul li:hover ul, div#dropdown ul ul ul li.sfhover ul { display: block; }
#mainframe { color: #fff; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; text-align: center; margin: 0; padding: 0; }

Thank you. Please Help!

Dako97669

06-03-2006, 05:03 AM

The problem lies with the placement having the source code work multiple times. I really appreciate any input.

Dako97669

06-03-2006, 06:10 PM

*BUMP*

I really need help with this. No one can help me? Do you need any additional information?

Dako97669

06-04-2006, 01:13 PM

Is everyone stumped? can I at least get an I dont know just so I know people are taking a look at it? Do you want me to lay out my code better? anything to help you guys help me please just ask.

ray326

06-04-2006, 06:12 PM

Have you tried one of the IE behaviour work arounds like this one from Vladdy?

http://www.vladdy.net/demos/iepseudoclassesfix.html

WebJoel

06-04-2006, 07:10 PM

Is everyone stumped? can I at least get an I dont know just so I know people are taking a look at it? Do you want me to lay out my code better? anything to help you guys help me please just ask.

Person, -take a deep breathe and relax! :D Most of us are enjoying the weekend and myself, -after 10 or 12 hours a day at my 'mundane job' 5 or 6 days every week, doing this during my time is merely bonus extra-credit 'cause I like it and I might learn more too.

Yes, -your post is being examined I assure you. :)
(checking your code now)
-Joel

WebJoel

06-04-2006, 07:40 PM

Wow... you've got some sweet code going on there! (-Longing for an ice-cold bottle of Corona...)

The first thing I noticed is that the DIV #head 1 is doing something rather unecessary... It is wider than my 1024-width resolution. I'd start there.
See attached image for visual inspection of what I see.

Upon validation, all I'm seeing is img tags 'not closed' and 'missing alt="image description" '. Fourteen cites, -warnings. Nothing to worry about right now, so the code isn't too far off from correct. It might lie with that #head 1's width or apparent width...

WebJoel

06-04-2006, 07:58 PM

Dako97669

06-04-2006, 09:47 PM

Sorry if I seemed stressed... I havent/hadnt slept in more than 2-3 hours a night since.. I am a college student for graphic design, doing web design to pay the bills... This is for a teacher, which means if I get this right other teachers will want me to help with their sites (to pay the ****ing bills!).. I was stressing because of the fact I told my boss (my teacher) I would try and get it fixed by sunday... I didnt obviously, but I got other work done that made him happy and he overlooked the fact that his menu bar didnt work in IE. Thanks guys, I need help bad on this one... I am going to try the replys already given to see if thats works. I am just glad people with some input are actually looking at my site... Im stressed yes, but with 4 different sites (2 full time managing) while full time student with other jobs in the horizon... I dont have much time to sleep when things are going haywire....

Dako97669

06-04-2006, 11:10 PM

I did the relative thing, and it seems to appear way below the menu, if you want to see, let me know and I will upload it so you can see what I am talking about.. .so the relative thing isnt the case... maybe it is though and the rest of my code is f'ed up?.... like I said if you want to see the results when relative is initiated let me know and I will upload it so you can see....

Dako97669

06-08-2006, 12:40 PM

ah-haaa!

This is seriously going to get you into trouble...

#dropdown li { position: relative; }
#dropdown ul ul { position: absolute; top: 29px; z-index: 500; }
#dropdown ul ul ul { position: absolute; top: 0; left: 100%; }

because 'position:absolute;' means from 0,0 of your computer's monitor, and you've got 'left:100%' 'absolute-positioned', meaning that it is always going to be 1-pixel to the right of your screen, no matter what width. I think that you're 'absolute positioning inside of a relative position', which works... but it doggone tricky sometimes and apparently here, -it isn't working for you...

Get rid of the 'absolutes'. Make your everything be 'relative' positioned.

I'm giving up for the night. Will monitor this thread and possibly continue to work on this offline... :confused:
-Joel

Alright I got rid of the absolute and did the relative positioning, and removed the top 29px, which removes the space i was talking about earlier. It does something really weird now though. I uploaded the change so you can see. In response to the person suggesting the behavior work around: I heard there are problems with those and people using SP2 because of MIME settings.