Hi all,
I have 4 toggles that trigger the same fx.slide div to slide back and
forth - though each toggle will also force the div to load a html page
relevant to which toggle was clicked using ajax.
One of the toggles pulls up a html page that positions content using
'position:relative'. This is causing ie6 and 7 to show this div slide
window beyond its boundaries where it's not meant to be. This is a css
bug in these browsers and I've read countless solutions to this
problem but can't seem to get them to work. I've tried attaching
'position:relative' to various different divs above the child but none
have worked. If anyone could offer advice I would be very grateful.
Thanks!
(I hope the following code is legible and doesn't alter the page:)
HTML OF MAIN PAGE:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>***</title>
<script language="JavaScript">
<!--
if (window.screen){
var ranNum= Math.floor(Math.random()*11+1);
document.write("<link rel='stylesheet' href='css/mainstyle"+ranNum
+".css' type='text/css'>");
}
-->
</script>
<link rel='stylesheet' href='css/fixedstyle.css' type='text/css'>
<link rel='stylesheet' href='css/contentstyle.css' type='text/css'>
<script type="text/javascript" src="js/css_browser_selector.js"></
script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/mooslide.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" src="js/supersleight-min.js"></script>
<![endif]-->
</head>
<body>
<div id="mainmenucontainer"> </div>
<div id="mainmenulogo"><img src="images/menulogo1.png" /></div>
<div id="mainmenushadow"> </div>
<div id="textstyle_about">
<div id="toggle1"><a href="#">ABOUT</a></div></div>
<div id="textstyle_portfolio">
<div id="toggle2"><a href="#">PORTFOLIO</a></div></div>
<div id="textstyle_contact">
<div id="toggle3"><a href="#">CONTACT</a></div></div>
<div id="textstyle_why">
<div id="toggle4"><a href="#">DESIGN & WHY</a></div></div>
<div id="sliderwindow"> </div>
<div id="copyright">©</div>
<div id="load"><img id="loader" src="images/ajax-static.png"
alt="Loader Graphic" /></div>
</body>
</html>
HTML OF PAGE LOADED INTO SLIDER DIV BY AJAX:
<body>
<div id="contact_slidertopcontent">
<div id="contact_information">
<b>Enquiries</b> : ************<br />
<br />
Tex here
</div>
</div>
</body>
CSS:
html, body {
height: 99%;
overflow: hidden;
margin-top: 0px;
}
#mainmenucontainer {
position: absolute;
left: 0px;
top: 0px;
width: 320px;
visibility: visible;
height: 100%;
margin-left: 0px;
}
.gecko #mainmenucontainer {
background-color: #FFFFFF;
opacity: .5;
}
.ie6 #mainmenucontainer {
line-height: 1.1px;
background-color: #CCCCCC;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
.ie7 #mainmenucontainer {
background-color: #FFFFFF;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
.ie8 #mainmenucontainer {
background-color: #CCCCCC;
background-image: url('../images/opacitywhite50.png');
}
.ie #mainmenucontainer {
line-height: 1.1px;
background-color: #CCCCCC;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
.webkit #mainmenucontainer {
background-color: #FFFFFF;
opacity: .5;
}
.opera #mainmenucontainer {
background-color: #FFFFFF;
opacity: .5;
}
.chrome #mainmenucontainer {
background-color: #FFFFFF;
opacity: .5;
}
#mainmenulogo {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
width: 400px;
height: 310px;
}
#mainmenushadow {
visibility: visible;
position: absolute;
top: 0px;
left: 320px;
width: 50px;
height: 99.7%;
background-image: url('../images/menushadow.png');
z-index: 1;
}
.gecko #sliderwindow, .webkit #sliderwindow, .opera
#sliderwindow, .chrome #sliderwindow {
width: 550px;
height: 550px;
color: #000000;
margin-left: 312px;
margin-top: -8px;
background-image: url('../images/contentcorner.png');
background-repeat: no-repeat;
}
.ie6 #sliderwindow, .ie7 #sliderwindow, .ie8 #sliderwindow, .ie
#sliderwindow {
width: 550px;
height: 550px;
color: #000000;
margin-left: 310px;
margin-top: -8px;
background-image: url('../images/contentcorner.png');
background-repeat: no-repeat;
position: relative;
}
#copyright {
position: absolute;
top: 97%;
left: 100px;
font-family: arial, helvetica;
font-size: 12px;
color: #FFFFFF;
}
#textstyle_about, #textstyle_portfolio, #textstyle_contact,
#textstyle_why {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
letter-spacing: 0px;
position: absolute;
}
#textstyle_about {
top: 320px;
font-size: 93px;
left: 0px;
}
#textstyle_portfolio {
top: 410px;
font-size: 55.4px;
left: 0px;
}
#textstyle_contact {
top: 460px;
font-size: 65.5px;
left: 1.5px;
}
#textstyle_why {
top: 528px;
font-size: 43px;
left: 0px;
}
#load {
top: 70px;
left: 67px;
position: absolute;
}
.pagetitle {
font-family: arial;
font-size: 38px;
color: #CCCCCC;
}
.about_subtitle {
font-family: Arial;
font-size: 34px;
color: #CCCCCC;
}
.greytext {
color: #777777;
}
#contact_slidertopcontent {
width: 550px;
height: 550px;
background-image: url(../images/background_contact01.png);
background-position: top left;
background-repeat: no-repeat;
}
#contact_information {
position: relative;
top: 150px;
left: 250px;
width: 200px;
height: 50px;
font-family: Georgia, Arial, Helvetica;
font-size: 11px;
line-height: 16px;
}
