Resolved Alignment problem in Firefox and IE [Archive]

...

View Full Version : Resolved Alignment problem in Firefox and IE

pwwilson

02-16-2011, 12:47 AM

I am not a web developer by any means, so be patient with me if I don't get something simple.. But I am working on a new web page for our company and the index page has three objects layered. Layer 1 is a flash file, layer 2 is an image and Layer 3 is another flash. Everything is lined up in Firefox, but layers 1 and 2 are shifted to the right in IE.

Here is how I have them defined.

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {};
params.scale = "noscale";
params.salign = "tl";
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("carousel.swf", "CarouselDiv", "600", "400", "9.0.0", false, flashvars, params, attributes);
</script>

<style type="text/css">
#CarouselDiv { position: relative; z-index: 3; }
</style>

<script type="text/javascript">
var flashvars = {};
var params = {};
params.scale = "noscale";
params.salign = "tl";
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("leaf.swf", "leafDiv", "600", "400", "9.0.0", true, flashvars, params, attributes);
</script>

<style type="text/css">
#leafDiv { position: absolute; z-index: 1; left: 48px; }
.swfs { position: relative;}
</style>

and

<div class="swfs" align="center">
<div id="CarouselDiv"></div>
<div id="leafDiv"></div>
<div style="position: absolute; z-index: 2; left: 30px; top: 0px">
<img border="0" src="images/frame.gif"></div>

If you want to see it all, you can go to http://www.nuvorainc.com/Newsite/index.html

Thanks

teedoff

02-16-2011, 01:09 AM

Hi pwwilson, welcome. First things first. You dont specify a doctype. <html> alone wont work for cross browser compliance.

You should take advantage of the code validator as well. Go here (http://validator.w3.org)and you can see that you have a few errors, which once you add a doctype, should take care of most of them and may even resolve your specific issue.

I would suggest an html 4.0 transitional doctype like so:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

Add that first line above your <html> tag.

I would also like to suggest you rethink your decision to use tables for your page layout. They may be easier in the beginning to get a certain look, but will be a headache sometime down the road. You can read about why tables for layouts are bad here (http://www.hotdesign.com/seybold/).

pwwilson

02-16-2011, 06:06 PM

This is an excellent help. I will use the code validator to resolve the issues that exist and if I still have a problem, I will post again.