PDA

View Full Version : Pop-it menu script doesn't work in IE



AppleAl
01-31-2008, 10:54 PM
Hello,

I'm trying to use Pop-it script (http://www.dynamicdrive.com/dynamicindex1/popit.htm) 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 (http://www.roamearth.com/en/user/70/) 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
02-01-2008, 06:08 AM
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
02-01-2008, 06:24 PM
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
02-01-2008, 06:58 PM
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
02-01-2008, 09:28 PM
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
04-09-2008, 11:15 PM
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
04-10-2008, 01:54 AM
@frutelaken,

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

frutelaken
04-10-2008, 10:14 AM
Ow now you mention it... Thank you very much, how simple can a solution be :)

Greetz