Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Santa Clara, CA USA
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Alignment problem in Firefox and IE

    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.
    Code:
    <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

    Code:
    <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
    Last edited by pwwilson; 02-16-2011 at 11:34 PM. Reason: resolved

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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 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.
    Last edited by teedoff; 02-16-2011 at 01:16 AM.
    Teed

  • Users who have thanked teedoff for this post:

    pwwilson (02-16-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Location
    Santa Clara, CA USA
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Many Thanks

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •