PDA

View Full Version : dd-overlapping content ajax not displaying in IE



mountainman
11-18-2010, 09:58 PM
1) Script Title: Drop down/ Overlapping Content script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm

3) Describe problem: First problem: is that when I test wizywig in IE (v8/7) I get an error message: dropdowncontent.js Line: 105 character 3 Error: Access is denied. page_request.open('GET', pageurl+bustcacheparameter, true)

<div><a href="fees.htm" id="packages" rel="subcontent1" rev="packages.htm"><img src="imgs/price.gif" width="147" height="20" alt="Packages &amp; Fees" style="border-style: none"/></a>
<div id="subcontent1" style="position: absolute; visibility: hidden; border: 0px solid blue; background-color: none; width: 665px; padding: 0px;">
//EMPTY DIV!!
</div>
</div>

<div><a href="#" id="references" rel="subcontent2" rev="test.htm"><img src="imgs/recomend.gif" width="147" height="20" alt="Testimonials" style="border-style: none"/></a>
<div id="subcontent2" style="position: absolute; visibility: hidden; border: 0px solid blue; background-color: none; width: 665px; padding: 0px;">
//EMPTY DIV!!
</div>
</div>

<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("packages", "right-top", 10, "mouseover")
</script>
<script type="text/javascript">
//Call dropdowncontent.init("anchorID", "positionString", glideduration, "revealBehavior") at the end of the page:
dropdowncontent.init("references", "right-top", 10, "mouseover")
</script>

Second problem:The site is live now and works fine in FF but in IE will display contents of ajax container (not correctly) no images or proper layout from external files:

Not sure if this problem is totally a script problem or a CSS???

DD content rollover images ("VIEW ALL SERVICES" (img) and ("TESTIMONIALS"(img))on index page are on left-sidebar container.

Site: http://www.tecnetronix.com
External HTM file:packages.htm
External HTM file:test.htm

CSS file:Menu.css

.MenuBack {
background-attachment: scroll;
background-image: url(file:imgs/MenuBack.gif);
background-repeat: repeat-x;
background-position: left bottom;
height: 349px;
width: 647px;
z-index: 50;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: 9B9B9C;
border-bottom-color: 9B9B9C;
border-left-color: 9B9B9C;
background-color: #FFFFFF;

}
.MenuPanel {
width: 202px;
height: 344px;
text-align: left;
float: right;
margin-right: 5px;
padding-left: 3px;
padding-top: 15px;
}
.MenuTitle {
font-family: Arial, Helvetica, sans-serif;
color:#000099;
background-color:#CCCCFF;
font-size: 14px;
font-style: normal;
font-weight: bold;
padding: 3px 0px 3px 0px;
width: auto;
height: 18px;
text-decoration:none;
text-align: center;
}
.MenuSpace {
padding: 2px;
}
.MenuText {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: transparent url(imgs/bullet.gif) no-repeat 3px 7px;
font-size: 11px;
font-weight: normal;
text-indent: 15px;
padding-top: 1px;
text-decoration: none;
color: 3B3B3B;
}
#Menu.Text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-indent: 15px;
padding-top: 0px;
text-decoration: none;
color: 3B3B3B;
}
.MenuSubtitle {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color:#000066;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-indent: 5px;
padding: 1px 0px 3px 0px;
width: autox;
height: 15px;
text-decoration:none;
text-align: left;;
}
.MenuDivider {
width: 1px;
float: right;
padding-right: 2px;
padding-left: 2px;
margin-right: 2px;
text-align: center;
}
.MenuCatSpace {
padding-top: 20px;
}

mountainman
11-18-2010, 11:43 PM
So I linked the external Ajax CSS file sheet to the HTML code on the original page and it now display the contents. There are some text alignment issues the background image still is not displaying but otherwise information is now viewable. Not exactly sure why the original HTML would need to see the external Ajax CSS but it does!? I should also not that this is in IE 8. IE 7 is still having some issues although main text content is visible.