/    Sign up×
Community /Pin to ProfileBookmark

Help! Firefox ok, but on IE backround out of aligment.

Copy linkTweet thisAlerts:
Aug 18.2009

I have just completed a website,
[url]www.fractalscapes.net[/url]

looks perfect in firefox, including the non flash “gallery sections” … but when viewing the site in internet explorer, the background is out of alignment with the flash object, and also on the gallery page the frames are out of alignment, so the gallery images are not sitting correctly on the page

i know i could make separate html files for ie, and shift the background in photo shop so it aligns, however, this would take alot of time and hassle, i would have to clone the whole website and have one or ie, and one for firefox.

I havent a clue what to do, ive spent hours online looking for an answer but found nothing at all.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@Stephen_PhilbinAug 22.2009 — Moved to CSS from General.
Copy linkTweet thisAlerts:
@memersonAug 26.2009 — I have just completed a website,

www.fractalscapes.net

looks perfect in firefox, including the non flash "gallery sections" ... but when viewing the site in internet explorer, the background is out of alignment with the flash object, and also on the gallery page the frames are out of alignment, so the gallery images are not sitting correctly on the page

i know i could make separate html files for ie, and shift the background in photo shop so it aligns, however, this would take alot of time and hassle, i would have to clone the whole website and have one or ie, and one for firefox.

I havent a clue what to do, ive spent hours online looking for an answer but found nothing at all.[/QUOTE]


You don't need to duplicate any HTML. In this instance I would simply use a Stokley Hack.

It seems that all the problem is is background positioning. I can't tell the exact number of pixels it needs to shift but let's say for the sake of argument it's 8px.

Stokely hack for body:

body {

background-color: #4A4700;

background-image:url('background.jpg');

background-position: 0 8px; <--- this affects IE5.5

voice-family: ""}"";

voice-family:inherit;

background-position: 0 0; <--- This affects Mozilla

}

/*end*/

/**/

html*body {

[background-position:0 0; <--- Older FF browsers

background-position: 0 0; <--- Safari 3

]background-position: 0 8px; <---- this declaration affects IE7

}/*end*/

.dummyend[id]{clear:both;} <--- this is a dummy class, needs to be here

/**/

* html body {

background-position: 0 8px; <--- this declaration affects IE6

}

/*end*/

Try that in your stylesheet, see what happens - you will probably have to play about with the positioning for each browser to get it exact, but this is pretty much what will solve your problem.
Copy linkTweet thisAlerts:
@PangaeaauthorAug 28.2009 — Hi, and thanks for your reply, your just about the only one that has had a potential solution to this from many other forums.

I appreciate your suggestion with the code, however, unfortunately I'm not that great with html or coding in general, I'm a designer first and foremost, but I am trying to learn other back end things I should know.

I'm a little unsure where to paste that code. You mentioned "style sheet".. I'm not sure what you mean there, Basically the site is a series of plain html pages with a flash movie on them (apart from the gallery pages). I had to use some other code on the pages that contained flash. Its called swfobject, this is to ensure the flash loads in Internet explorer without that annoying "unblock content" prompt. (still haven't got around the "phishing prompt"

anyway, I shall paste the html code of a typical page where the flash is on, then I will paste the code to a typical gallery page.

-----html file with the flash content-----------------------------------------

[COLOR="Blue"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">





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



<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>F R A C T A L S C A P E S</title>

<style type="text/css">

<!--

body {

background-color: #4A4700;

background-image: url(backround.jpg);

}

.style1 {color: #FFFFFF}

-->

</style></head>



<body>

<div align="center">

<div id="flashcontent">

<div align="center">Fractalscapes - Fractal Posters, Pictures, Framing &amp; More. (Please Download Flash Player).</div>

</div>

<script type="text/javascript">

var so = new SWFObject("01.swf", "mymovie", "1000", "656", "8", "#FFFFFF");

so.write("flashcontent");

</script>

</div>

</body>

</html>[/COLOR]

---------------------------------------------------------------------------------



-----html file of one of the gallery pages------------------------------------


[COLOR="Blue"]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Image Gallery</title>

<meta name="generator" content="Sándor Veress: Image Gallery Maker">



<!--Include this rows in your header: START-->

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

<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>

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

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen">

<link rel="stylesheet" href="library/svigm.css" type="text/css">

<!--Include this rows in your header: END-->

<script type="text/JavaScript">

<!--

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}



function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

</head>



<body onLoad="MM_preloadImages('gallery back button_on.png')">

<!--Gallery START-->

<div id='divIGM'>

<table id="tblThumbsLayout" cellpadding="15" cellspacing="10">

<tr>

<td id='topCell' colspan='3'>

<table id='tblGalleryName' cellpadding=0 cellspacing=0 border=0 width="100%">

<tr>

<td id='galleryNameCell'></td>

<td id='pagingCell'>

<span class="titlePages">Pages:</span>

<span class="currentPage">1</span>

<a href="igm1.html"class="otherPage">2</a>

<a href="igm2.html"class="otherPage">3</a>

<a href="igm3.html"class="otherPage">4</a>

<a href="igm4.html"class="otherPage">5</a>

<a href="igm5.html"class="otherPage">6</a>

<a href="igm6.html"class="otherPage">7</a>

<a href="igm7.html"class="otherPage">8</a>

<a href="igm8.html"class="otherPage">9</a>

<a href="igm9.html"class="otherPage">10</a>

<a href="igm10.html"class="otherPage">11</a>

<a id='linkNext' href='igm1.html'>Next&nbsp;&raquo;</a>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<!-- Image:0001 -->

<td class='tdImg'>

<a href='photos/0001.jpg' rel='lightbox[id0]' title="0001">

<img class='eImage' alt="0001" title="0001" src="thumbs/0001.jpg"></a>

<p align=center><font class='tdTitle'>0001</font></p>

</td>

<!-- Image:0002 -->

<td class='tdImg'>

<a href='photos/0002.jpg' rel='lightbox[id0]' title="0002">

<img class='eImage' alt="0002" title="0002" src="thumbs/0002.jpg"></a>

<p align=center><font class='tdTitle'>0002</font></p>

</td>

<!-- Image:0003 -->

<td class='tdImg'>

<a href='photos/0003.jpg' rel='lightbox[id0]' title="0003">

<img class='eImage' alt="0003" title="0003" src="thumbs/0003.jpg"></a>

<p align=center><font class='tdTitle'>0003</font></p>

</td>

</tr>

<tr>

<!-- Image:0004 -->

<td class='tdImg'>

<a href='photos/0004.jpg' rel='lightbox[id0]' title="0004">

<img class='eImage' alt="0004" title="0004" src="thumbs/0004.jpg"></a>

<p align=center><font class='tdTitle'>0004</font></p>

</td>

<!-- Image:0005 -->

<td class='tdImg'>

<a href='photos/0005.jpg' rel='lightbox[id0]' title="0005">

<img class='eImage' alt="0005" title="0005" src="thumbs/0005.jpg"></a>

<p align=center><font class='tdTitle'>0005</font></p>

</td>

<!-- Image:0006 -->

<td class='tdImg'>

<a href='photos/0006.jpg' rel='lightbox[id0]' title="0006">

<img class='eImage' alt="0006" title="0006" src="thumbs/0006.jpg"></a>

<p align=center><font class='tdTitle'>0006</font></p>

</td>

</tr>

<tr>

<td id='pnCell' colspan='3'>

<div align="right"><a href="../index3.html"><img src="gallery back button.png" name="Image1" width="210" height="32" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','gallery back button_on.png',1)" onMouseOut="MM_swapImgRestore()"></a></div></td>



</tr>

</table>

</div>

<!-- Gallery END -->

</body>

</html>[/COLOR]





---------------------------------------------------------------------------------





I did try insert your code in various places in my html pages, but nothing seems to be working, other then the "text" of the code being displayed on the site either at the top or the bottom.



Any help would be great



Regards

pan
Copy linkTweet thisAlerts:
@don644Aug 29.2009 — Pan,

Look at the top of your HTML, in the <head> section, there is a style applied to the body {...}.

He's talking about pasting his CSS style in THAT section of your code.

It looks like this:

body {

background-color#4A4700;

background-image: url(backround.jpg);

This is where you need to paste his code. Save your work and give it a try.

}
Copy linkTweet thisAlerts:
@PangaeaauthorAug 29.2009 — Hello again, and thanks for the help on this one.

I pasted the code as instructed, but still nothing seems to be happening at all. I was up all night trying different values, and code position. Its looking like there isn't a solution for this.

Any value i put after the "ie" sections of the code no matter how big or small a number dose not effect ie.. the backround image is still not alightned by what looks like exactly the same number of pixies (it didn't move).

(oh just a note i spelled background incorrectly on all my pages, so i have to use "backround".. if you where wondering)

I will paste where I have got to, (sorta given up on it now) been at this for weeks now)



[COLOR="Blue"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">





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



<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>F R A C T A L S C A P E S</title>

<style type="text/css">

<!--

body {

background-color: #4A4700;

background-image:url('backround.jpg');

background-position: 0 20px; <--- this affects IE5.5

voice-family: ""}"";

voice-family:inherit;

background-position: 0 0; <--- This affects Mozilla

}

/*end*/

/**/



html*body {

[background-position:0 0; <--- Older FF browsers

background-position: 0 0; <--- Safari 3

]background-position: 0 20px; <---- this declaration affects IE7

}/*end*/

.dummyend[id]{clear:both;} <--- this is a dummy class, needs to be here



/**/

* html body {

background-position: 0 20px; <--- this declaration affects IE6

}

/*end*/







}

.style1 {color: #FFFFFF}

-->

</style></head>



<body>

<div align="center">

<div id="flashcontent">

<div align="center">Fractalscapes - Fractal Posters, Pictures, Framing &amp; More. (Please Download Flash Player).</div>

</div>

<script type="text/javascript">

var so = new SWFObject("01.swf", "mymovie", "1000", "656", "8", "#FFFFFF");

so.write("flashcontent");

</script>

</div>

</body>

</html>[/COLOR]


Best regards

a frustrated Pan ?
Copy linkTweet thisAlerts:
@memersonSep 04.2009 — Pan,

You have to make sure to remove my "comments" as these are only for the benefit of helping you understand what each line does!

Also, it's better to put this in an external CSS file, and including it in your code as follows:

[CODE]<link rel="stylesheet" href="linktoyourstylesheet/styles.css" type="text/css" media="all" />[/CODE]
Copy linkTweet thisAlerts:
@PangaeaauthorSep 07.2009 — Hi again, May i say thankyou all for your help... tho Im still having problems

i took off the comments, yet still internet explorer is not displaying correctly

Im a little confused about the css thing... I have no idea what css is, how to create a css file, or where to paste that css line into.. also Im a little confused about what a style sheet is.

Basically the original code I pasted is what it is.. its a plain html file made with dreamweaver... I did try however..

This is an exampl of one of the html files so far:

[COLOR="Blue"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">





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



<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>F R A C T A L S C A P E S</title>

<style type="text/css">

<!--

body {

background-color: #4A4700;

background-image: url(backround.jpg);

body {

background-color: #4A4700;

background-image:url('backround.jpg');

background-position: 0 8px;

voice-family: ""}"";

voice-family:inherit;

background-position: 0 0;

}

/*end*/

/**/



html*body {

[background-position:0 0;

background-position: 0 0;

]background-position: 0 8px;

}/*end*/

.dummyend[id]{clear:both;}



/**/

* html body {

background-position: 0 8px;

}

/*end*/

}

.style2 {color: #000000}

-->

</style></head>



<body>

<div align="center">

<div id="flashcontent">

<div align="center">Fractalscapes - Fractal Posters, Pictures, Framing &amp; More. (Please Download Flash Player).</div>

</div>

<script type="text/javascript">

var so = new SWFObject("01.swf", "mymovie", "1000", "656", "8", "#FFFFFF");

so.write("flashcontent");

</script>

</div>





<div style="text-align: center; display: block;">

<p><br>

<a href="http://www.freecountercode.com/" ><img src="http://www.freecountercode.com//HTTP://WWW.FREECOUNTERCODE.COM_3838129.png" alt="HTTP://WWW.FREECOUNTERCODE.COM" /><br />

</a><a href="http://www.freecountercode.com/" class="style2" >HTTP://WWW.FREECOUNTERCODE.COM</a></p>

</div>



</body>

</html>[/COLOR]


Notice i deleted all the comment lines..

Next i created a txt file and renamed it styles.css (a guess)

than i pasted this line into that txt file:

[COLOR="Blue"]<link rel="stylesheet" href="linktoyourstylesheet/styles.css" type="text/css" media="all" />[/COLOR]

Still internet explorer is not displaying it properly

I spend many hours trying differnt things, like renaming the text file, pasting the html code into the text file, pasting the css line into my html.. lots of things, but still no luck.

Looks like ill have to clone the whole website including the gallery pages to make internet explorer look as it should.. its such a shame that internet explorer or mozilla dont make some sort of deal whereby a site looks the same in one as it dose in the other, without having to spend litterly months experimenting with endless things and seeking advice for something that just isnt going to work.


What ever I did wrong while making the site Ill never know, but Im 99.9999&#37; convinced that there is no solution for the problem i have got myself into other then starting from scratch or cloning the whole darn site
Copy linkTweet thisAlerts:
@theladyNov 07.2009 — I need to know how to fix this rotating banner Java Script so that it displays in Mozilla Firefox. IE is displaying my banners fine. Any ideas?


<script language="JavaScript">
<!--

// ***********************************************

// AUTHOR: WWW.CGISCRIPT.NET, LLC

// URL: http://www.cgiscript.net

// Use the script, just leave this message intact.

// Download your FREE CGI/Perl Scripts today!

// ( http://www.cgiscript.net/scripts.htm )

// ***********************************************

var bannerArray = new Array();

var myCount=0;

// Banner Code Assignment

bannerArray[0] = "<A HREF="http://www.holycrossfw.org/newsite/church/grow/momentum.htm"><IMG SRC="http://www.holycrossfw.org/newsite/graphics/post/banner_momentum.gif" border="0" width="640" height="225"></A>";

bannerArray[1] = "<A HREF="http://www.holycrossfw.org/newsite/church/grow/refuel.htm"><IMG SRC="http://www.holycrossfw.org/newsite/graphics/post/banner_refuel.gif" border="0" width="640" height="225"></A>";

bannerArray[2] = "<A HREF="http://www.holycrossfw.org/newsite/church/aboutus/index.htm"><IMG SRC="http://www.holycrossfw.org/newsite/graphics/post/banner_values.gif" border="0" width="640" height="225"></A>";

bannerArray[3] = "<A HREF="http://www.holycrossfw.org/newsite/school/index.htm"><IMG SRC="http://www.holycrossfw.org/newsite/graphics/post/banner_buildingafuture.gif" border="0" width="640" height="225"></A>";

bannerRotate();

function bannerRotate() {

if(myCount > bannerArray.length-1){myCount=0;}

// Write out rotation

if (document.all){ // it is IE

document.all.l3.innerHTML=bannerArray[myCount];

}

else if (document.layers){ // it is NN

document.layers.l1.document.layers.l2.document.open();
document.layers.l1.document.layers.l2.document.write(bannerArray[myCount]);
document.layers.l1.document.layers.l2.document.close();
}
setTimeout("bannerRotate()", 6000);

myCount++;

}

// -->

</script>
×

Success!

Help @Pangaea spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...