No replies
xoxmichelle
Offline
newbie
Last seen: 13 years 31 weeks ago
Joined: 2009-02-17
Posts: 2
Points: 0

I tested my layout in IE 7 today and the background (which I centered using background-position: 50% Innocent is not centered and flowing off of the page to the right. The divs on the page are also floating to the right (they were absolute positioned in Safari and tested in FireFox). Everything works fine in FF and Safari, just not IE. Check it out here: http://bellaandedward.com/test2/

Here is my header html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>">
<title>bellaandedward.com - THE twilight fansite</title>
<link href="http://www.bellaandedward.com/test2/style.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="http://www.bellaandedward.com/images/favicon2.ico">
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css">
<script src="thumbnailviewer.js" type="text/javascript">
 
/***********************************************
* Image Thumbnail Viewer Script- &#169; Dynamic Drive (<a href="http://www.dynamicdrive.com" rel="nofollow">www.dynamicdrive.com</a>)
* This notice must stay intact for legal use.
* Visit <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for full source code
***********************************************/
 
</script>
<link rel="alternate" title="BellaAndEdward{dot}com" href="http://bellaandedward.com/cutenews/rss.php" type="application/rss+xml">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Pragma" content="no-cache"><!-- START IMAGE SLIDESHOW -->
 
<script type="text/javascript">
 
/***********************************************
* Ultimate Fade-In Slideshow (v1.51):  Dynamic Drive (<a href="http://www.dynamicdrive.com" rel="nofollow">http://www.dynamicdrive.com</a>)
* This notice MUST stay intact for legal use
* Visit <a href="http://www.dynamicdrive.com/" rel="nofollow">http://www.dynamicdrive.com/</a> for this script and 100s more.
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["bae_layout.jpg", "http://www.bellaandedward.com", ""]
fadeimages[1]=["bae_layout-1.jpg", "http://www.bellaandedward.com", ""] 
fadeimages[2]=["bae_layout-2.jpg", "http://www.bellaandedward.com", ""] 
fadeimages[3]=["bae_layout-3.jpg", "http://www.bellaandedward.com", ""] 
fadeimages[4]=["bae_layout-4.jpg", "http://www.bellaandedward.com", ""] 
 
var fadebgcolor="#362920"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"><\/div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"><\/div><\/div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"><\/div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}
 
function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
obj.tempobj.style.opacity=obj.degree/101
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='<\/a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />.opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=this.degree/100
else if (crossobj.style.opacity&&!crossobj.filters)
crossobj.style.opacity=this.degree/101
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}
 
</script><!-- END IMAGE SLIDESHOW -->
 
<style type="text/css">
 p.c10 {text-align: center}
 span.c9 {font-family: Verdana,Geneva,Georgia,Arial; font-size: 70%}
 span.c8 {color: #000000; font-family: Verdana,Geneva,Georgia,Arial; font-size: 70%}
 input.c7 {font-size: 10px}
 table.c6 {background-color: #565656}
 table.c5 {background-color: #FFFFFF}
 span.c4 {color: #565656; font-family: Verdana,Geneva,Georgia,Arial; font-size: 70%}
 div.c3 {margin-top:15px;width:100%;text-align:center;font:9px Verdana;}
 p.c2 {text-align: right}
 div.c1 {text-align: center}
</style>
 
</head>
<body>
 
<!-- START CONTAINER -->
<div id="container">
 
<!-- START LINKS -->
<div id="links"></div>
 
<!-- START IMAGE DIV -->
<div id="image">
<div id="ad">
<!-- BEGIN STANDARD TAG - 728 x 90 - ROS: Run-of-site - DO NOT MODIFY -->
<script type="text/javascript" src="http://ad.womensforum.com/st?ad_type=ad&amp;ad_size=728x90&amp;section=498343">
</script>
<!-- END TAG -->
</div>
 
<!-- SLIDESHOW -->
<div id="slideshow"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 425, 685, 0, 4000, 0, "")
</script></div>
<!-- SLIDESHOW END -->
 
<div class="c1">
<img name="bae_layout0" src="bae_layout.jpg" width="1000" height="900" border="0" usemap="#bae_layout" alt="" id="bae_layout0">
<map name="bae_layout" id="bae_layout">
<area shape="rect" coords="280,36,316,113" href="http://www.bellaandedward.com/" target="_self" alt="">
<area shape="rect" coords="323,28,354,113" href="http://www.bellaandedward.com/books.php" target="_self" alt="">
<area shape="rect" coords="356,50,387,114" href="http://www.bellaandedward.com/fans.php" target="_self" alt="">
<area shape="rect" coords="386,35,419,115" href="http://www.bellaandedward.com/media.php" alt="">
<area shape="rect" coords="441,51,471,114" href="http://www.bellaandedward.com/site.php" target="_self" alt="">
<area shape="rect" coords="472,35,502,118" href="http://www.bellaandedward.com/movies.php" target="_self" alt="">
<area shape="rect" coords="505,35,534,116" href="http://www.bellaandedward.com/author.php" target="_self" alt="">
<area shape="rect" coords="535,57,570,118" href="http://www.bellaandedward.com/fun.php" alt="">
<area shape="rect" coords="605,44,636,117" href="http://www.bellaandedward.com/internet.php" target="_self" alt="">
<area shape="rect" coords="638,28,665,119" href="http://www.bellaandedward.com/graphics.php" alt=""></map></div>
 
<div id="main">

And this is my style sheet:

body {
scrollbar-face-color:#e5d8b8;
scrollbar-shadow-color:#510100;
scrollbar-3dlight-color:#510100;
scrollbar-arrow-color:#510100;
scrollbar-base-color:#e5d8b8;
scrollbar-track-color:#e5d8b8;
scrollbar-darkshadow-color:#510100;
scrollbar-highlight-color:#510100;
background: #362920 url(bae_layoutbg3.jpg) repeat-y 50%;
color: #332920;
font-size: 8pt;
font-family:tahoma;
text-align: center;
margin:0;
padding:0;
}
 
#slideshow{
position: absolute;
top:0px;
left:0px;
align:left;
}
 
#container {
	MARGIN: 0px auto;
	TEXT-ALIGN: center; 
	WIDTH: 1000px;
	top:0px;
}
 
.imageleft {
  float:left;
  padding-right:3px;
  padding-bottom:3px;
}
 
#image{
position:absolute;
width:1000px;
top: 125px;
}
 
#links {
  position:absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height:250px;
  border: 0px solid;
  color: #332920;
  background-image:url(bae_layoutbg2.jpg);
  repeat:repeat-x;
  font-size: 8pt;
  font-family:tahoma;
}
 
#left {
  position: absolute;
  top: 780px;
  left: 50px;
  width: 315px;
  height: auto;
  border: 0px solid;
  color: #332920;
  padding: 3px;
  font-size: 8pt;
  font-family:tahoma;
  text-align:left;
  padding: 5px;
  z-index:4;
}
 
#main {
  position: absolute;
  top: 230px;
  left: 430px;
  width: 540px;
  border: 0px solid;
  color: #332920;
  font-size: 8pt;
  font-family:tahoma;
  padding: 5px;
  z-index:2;
}
 
#ad {
  position: absolute;
  top: -100px;
  left:150px;
  width: 728px;
  height: 90px;
  border: 0px solid;
  color: #332920;
  font-size: 8pt;
  font-family:tahoma;
  z-index:3;
}
 
a:link{
	color:#332920; 
	text-decoration:none;
	border-bottom: 1px dashed;
	border-color:#332920;
	font-weight:normal;
	cursor:default;
}
a:visited{
	color:#332920; 
	text-decoration:none;
	border-bottom: 1px dashed;
	border-color:#332920;
	font-weight:normal;
	cursor:default;
}
a:active{
	color:#332920; 
	text-decoration:none;
	border-bottom: 1px dashed;
	border-color:#332920;
	font-weight:normal;
	cursor:default;
}
 
a:hover{
	color:#e5cca4; 
	text-decoration:none;
	background-color:#2a2118;
	font-weight:normal;
	cursor:default;
}
 
textarea, input{
	font-family:tahoma;
	font-size: 8pt;
	color: #332920;
	background:#e5cca4;
	border: 1px solid;
	border-color:#332920; 
}
 
.news {
border: 0px solid;
font-family: tahoma;
font-size: 8pt;
color:#332920;
padding:3px;
width:100%;
text-align:left; 
}
 
.author {
font-family: tahoma;
font-size: 8pt;
font-weight:normal;
color:#332920;
text-align:right; 
}
 
.affiliates img { 
border-width :0px;
margin: 3px;
}
 
H1{
	MARGIN-TOP: 0px; 
	MARGIN-BOTTOM: 0px; 
	PADDING: 1px; 
	padding-left: 3px;
	FONT-SIZE: 10px; 
	COLOR: #332920; 
	FONT-FAMILY: tahoma; 
	TEXT-ALIGN: right; 
	FONT-WEIGHT: bold; 
	BORDER-bottom: 1px dotted #332920; 
	letter-spacing: 0px; 
	TEXT-TRANSFORM: lowercase;
}