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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layouts drawing vastly different in IE/FF

    Hi,


    I'm working on a site and can't seem to fix a number of issues. It's my first time jumping into the realm of css - I've always used the rather archaic Photoshop/Slice/Export As Tables method. It's never been for anything professional, so I never saw the need to learn. But I need to get with the times ;p

    Anyway - I guess I'll list things in order of importance...


    Layout looks completely different in Firefox and IE.

    FF: http://img353.imageshack.us/my.php?image=jdlff1ub.jpg Right.
    IE: http://img353.imageshack.us/my.php?image=jdlie5fc.jpg WRONG.

    The menu and Flash/FF link divs all reside in a parent leftContainer, while the content window/bottom menu divs reside in a parent rightContainer. FF recognizes this and draws it correctly, IE doesn't. It's probably due to positioning, but I can't figure out why.

    Header Issues:

    - The flash animation is in a flashContainer div - I'd like to dynamically resize due to issues at 800x600 (I know it breaks the background image, but thats an easy fix). I set the div to overflow:hidden, with the thought that it would cut off whatever is left of the swf. No matter what, it displays at full size. Is this a css issue or a swf issue? It's not necessary, but I'd like to keep it.

    - The "blender" jpg that transitions the swf background to the header background does not align with the div in FF, producing a small vertical gap. In IE, the gap remains but seems to be transformed to a small horizontal gap below everything. Probably something to do with the swf as well.


    URL: http://www.jdl-systems.com/about.htm
    CSS: http://www.jdl-systems.com/jdlcss.css

    Any help is greatly appreciated

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    #leftContainer {
    	width: 15%;
    	display: inline;
    	position: absolute;
    	margin-top: 10px;
    	margin-left: 15px;
    	margin-bottom: 10px;
    	height: 100%;
    }
    This is a tough one, but the first thing that jumped out at me was that position: absolute;

    Why is it absolute, and yet you give it no coordinates?

    //edit
    Another thing you might want to try is XHTML strict rather than HTML loose. This often fixes all those IE bugs. However if your coding isn't clean it might just cause more...
    Last edited by andrew w peace; 12-06-2005 at 07:55 PM.


  •  

    Posting Permissions

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