PDA

View Full Version : Position offset in IE but fine in other Browsers



robinb1
01-25-2010, 06:20 AM
1) Script Title: Ultimate Fade-In Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Position changes in IE but is fine in Chrome and Firefox.

I am fairly new to designing websites and don't know what I could be missing. Please help.


<!DOCTYPE HTML>
<head>
<title>Justin Bowden Fitness</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="jbf_style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [305, 306], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["slide_show/front.jpg", "", "", "Entrance to JBF"],
["slide_show/insidegym.jpg", "", "", "Inside Justin Bowden Fitness"],
["slide_show/weights6.jpg", "", "", "Weights"],
["slide_show/everlast.jpg", "", "", "Gym"],
["slide_show/runners2.jpg", "", "", "Runners"],
["slide_show/straps_cropped.jpg", "", "", "Working Out"],
["slide_show/weights4.jpg", "", "", "Weights"],
["slide_show/elliptical1.jpg", "", "", "Elliptical."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false, randomize:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})


</script>

</head>
<body>
<div id="container">
<div id="center">
<div id="header">
<div id="header-logo">
<img src="images/jbf_logo.png" width="255" height="149" alt="">
</div>
<div id="main-header">
<img src="images/header_name.png" width="572" height="19" alt="">
<div id="subnavigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>
</div> <!-- end of header div -->
<div id="navigation">
<ul>
<li><a href="why_jbf.html">Why JBF</a></li>
<li><a href="fitness_center.html">Fitness Center</a></li>
<li><a href="memberships.html">Memberships</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="boot_camp.html">Boot Camp</a></li>
</div>
</ul>
</div> <!-- end of navigation div -->
<div id="left-margin-image">
<img src="images/left_margin_image.png" width="138" height="342" alt="">
</div>
<div id="text">
<div class="scroll">
<h1>Welcome to Justin Bowden Fitness</h1>
<p>At JBF we will teach you how to live a healthy lifestyle without
outrageous demands. At JBF you will enjoy a comfortable, fully-equipped
facility without pushy sales people or trainers.</p>
</div> <!-- end of div class=scroll-->
</div>
<div id="fadeshow1">
</div>
<div id="footer">
<p class="white">9010 Garland Road | Dallas TX 75218 | 214.321.9300 </p>
</div>
<div id="copyright">
COPYRIGHT 2010. JUSTINBOWDENFITNESS. ALL RIGHTS RESERVED. | PRIVACY POLICY </p>
</div>
</div>
</div> <!-- end of div content-->
</body>
</html>


/*
CSS for JBF site
*/
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #51503b;
background-image: url(grad_bcgrnd.jpg);
background-repeat: repeat-x;
line-height: 100%;
padding: 0;
margin: 0;
}
#container {
position:absolute;
left: 50%;
width: 903px;
height: 550px;
margin-left: -450px;
overflow: hidden;
}
a:link {
color: #522e90;
}
a:visited {
color: #333226;
}
a:hover {
color: #7d46db;
}
a:active {
color: #522e90;
}
p {
padding-right: 15px;
color: #333226;
}
h1 {
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 100%;
font-size: large;
color: #522e90;
}
#header-logo {
position:absolute;
left:15px;
top:0px;
width:278px;
height:139px;
}

#main-header {
position:absolute;
left:288px;
top:64px;
width:624px;
height:19px;
}
#subnavigation
{
position:absolute;
left:28em;
top:3.3em;
width:900px;
}
#subnavigation ul
{
font-size:x-small;
font-weight:bold;
list-style: none;
padding: 0;
margin: 0;
}
#subnavigation li
{
float: left;
margin: 0;
}
#subnavigation li a
{
height: 1.5em;
line-height: 1.5em;
width: 8em;
display: block;
color: #522e90;
text-decoration: none;
text-align: center;
border-right: 0.2em solid #7ac142;
}
#subnavigation li a:hover
{
height: 1.5em;
line-height: 1.5em;
width: 8em;
display: block;
color: #7d46db;
text-decoration: none;
text-align: center;
}

#navigation
{
background: #522e90 repeat-x;
border-top: 0.4em solid #f8a15e;
height: 1.7em;
position:absolute;
left:10px;
top:139px;
width:903px;
}
#navigation ul
{
position: absolute;
top: -.4em;
font-size:small;
font-weight:bold;
list-style: none;
padding: 0;
margin: 0;
}
#navigation li
{
float: left;
margin: 0;
}
#navigation li a
{
background: #522e90 bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
border-top: 0.4em solid #f8a15e;
}
#navigation li a:hover
{
background: #7d46db bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #ffffff;
text-decoration: none;
text-align: center;
border-top: 0.4em solid #f7842d;
}
#left-margin-image {
position:absolute;
left:10px;
top:172px;
width:138px;
height:342px;
z-index:3;
}
#text {
position:absolute;
left:10px;
top:172px;
width:459px;
height:307px;
background-color: #f5f6d7;
padding-left: 140px;
z-index:2;
border-bottom:0.4em solid #7ac142;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: small;
}
div.scroll {
height: 280px;
width: 425px;
overflow: auto;
background-color: #f5f6d7;
padding: 8px;
}


#fadeshow1 {
left:608px;
top:172px;
width:305px;
height:306px;
border-bottom:0.4em solid #7ac142;
}

#footer {
position:absolute;
left:10px;
top:484px;
width:903px;
height:23px;
line-height: 8px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: xx-small;
color:#ffffff;
background-color: #522e90;
text-align: right;
padding-right: 0;
padding-bottom: .5em;
z-index:1;
border-top:0.3em solid #f8a15e;

}
.white {
color:#ffffff;
}

#copyright {
position:absolute;
left:10px;
top:520px;
width:890px;
height:36px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 6pt;
color:#ffffff;
text-align: right;
}

Thanks

ddadmin
01-26-2010, 09:01 PM
Can you clarify what you mean by positioning changing? Please post a link to the page on your site that contains the problematic script so we can check it out.

robinb1
01-26-2010, 11:11 PM
Sorry, I should have reposted. It had something to do with the way IE handles box models. I solved it by linking to a separate css style sheet with different positioning settings.

Thanks for your reply.