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/dynamici...nslideshow.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.

Code:

<!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>

Code:

/*
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.

Thread: Position offset in IE but fine in other Browsers

Thread Tools

Search Thread

Position offset in IE but fine in other Browsers

Bookmarks

Bookmarks

Posting Permissions