Pop-it menu script doesn't work in IE

[AppleAl]

Hello,

I'm trying to use Pop-it script on my website. It works in Firefox, but doesn't work in IE.

Can you login (login "test", password "thetest") and look at this page please. Click "Photo albums", then "Greece" and then put mouse over "Options" link.

In Firefox everything works just fine. You will see green menu. In IE it doesn't work, you will even not see any error message.

I wonder how can I fix it?

[jscheuer1]

I'm not sure how you can fix it. However, using IE add on 'developer toolbar', I see that the script is working, but that the style is not associated with the generated DOM source of the page, specifically not these styles:

#popitmenu{
position: absolute;
background-color: #DEFFE4;
border:2px solid #99FFA7;
font: normal 12px Verdana;
line-height: 22px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 5px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #99FFA7;
}

which are, of course a part of the DOM source in FF, and are essential to the display of the popit menu.

Now, these styles show up in IE's DOM source, and in FF's DOM source for the page:

.wHeaders {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.style {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.textsmall {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #000000;
}
hr {
	border: 0px;
	margin-bottom: 4px;
	margin-top: 3px;
	border-top: 1px dotted #777777;
	height: 1px;
	}
a:link {
	color: #0000FF;
}
a:visited {
	color: #0000FF;
}
a:hover {
	color: #0000FF;
}
a:active {
	color: #0000FF;
}
.style1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #61BCF7;
	font-weight: bold;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #D9B437; font-weight: bold; }
.style3 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333333;
	font-weight: bold;
}
.imgmargin{
	margin-left: 4px;
	margin-bottom: 4px;
	margin-top: 4px;
}

So, perhaps if you were to put the popit menu styles with those, it would work.

[AppleAl]

Thanks.

I'm newbie in JS/CSS, developing just couple of months. Should I just put second code after first one (original pop-it menu CSS)? I've done this, but I still can't see menu in IE.

[AppleAl]

Fixed, I've added first code to the second one. The problem was because I've loaded first code with Ajax (with other HTML code).

Thanks for the help.

[jscheuer1]

That makes sense. Ajax often creates and/or writes code to an already loaded page. IE is highly resistant to adding style once the page is loaded - a recipe for, if not disaster, at least trouble. If you know the styles are possibly going to be used by the page at some point and that they will not mess anything up if not needed, it is best to hard code them or a link to them into the head of the document.

[frutelaken]

Hi,

I'm having a somewhat similar problem with this script.

If I open "http://www.dynamicdrive.com/dynamicindex1/popit.htm" in my IE7, the page will open perfectly and the demo pop-it menu's will work like a charm.
However, if I create it for myself, using Dreamweaver (basicly copy-pasting the code) my IE7 keeps blocking the Active content, while the format is exactly the same as the one on Dynamic Drive.

So my question is, how can I make sure other users don't get this annoying yellow bar on the top of their IE7?

PS: It works perfect on FF and Opera.

Thanks in advance for your time,

Greetz

[rangana]

@frutelaken,

No worries, that yellow bar appears on local machine only, not when you had uploaded your page on the server

[frutelaken]

Ow now you mention it... Thank you very much, how simple can a solution be

Greetz