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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS Layering Help

    I coded a CSS layout, and I'm having some problems with it when viewed on Firefox. It looks prefectly fine on IE6, but on FF it's not aligned to the center. I provided an online place for you to see it.

    Layout:
    http://fusiondex.com/fdx4/index_.htm

    CSS:
    http://fusiondex.com/fdx4/images4/index.css

    It should look like the attached image. It works fine with IE6.

    Please help me fix it. Thanks!
    Attached Thumbnails Attached Thumbnails CSS Layering Help-fusiondex4.jpg  
    FusionDex -- Need tutorials, websites, reviews?
    Cosmic Graffiti - Your Graphics and Tutorial Resource

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Absolute positioning, yuck. Move your div with id="left" before your div with id="right" then get rid of the absolute positioning in the CSS for left, to center a block level element like a div or a table use margin:auto; currently you have your margins set to 0 on your main div. This example should give you some ideas on how to do it properly. http://bonrouge.com/2c-hf-fixed.php
    Usually when a layout is okay in IE but bad in Firefox then there is probably something wrong with your coding. e.g errors. You can use the validator to check the errors you have.

  • #3
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    #wrap {
    width: 760px;
    background-image: url(wrap.jpg);
    background-repeat: repeat-y;
    margin:auto
    }

  • #4
    New Coder
    Join Date
    Apr 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The layout is now aligned to the center at FF, but the navigation menu went to the left and the content part went deep down the navigation.
    FusionDex -- Need tutorials, websites, reviews?
    Cosmic Graffiti - Your Graphics and Tutorial Resource

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Try floating the #right div to the left. You may need to decrease its width.

  • #6
    New Coder
    Join Date
    Apr 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for the late response. I messed up with the code and I couldn't put it back as it was on my 1st post. Anyway, here's what I came up with:

    http://fusiondex.com/fdx4/index_.htm

    I've updated it. There's some problem with the layout on FF. It's fine on IE6. But the width of the #right and #rightads is not the same when viewed with IE.
    I also want the navigation boxes to overlap the content boxes (#rightads and #right). I'm confused with the coding.
    FusionDex -- Need tutorials, websites, reviews?
    Cosmic Graffiti - Your Graphics and Tutorial Resource

  • #7
    New Coder
    Join Date
    Apr 2005
    Posts
    33
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ^I attached a screencap of the layout that looks crap when viewed at FF...

    Please help me fix this layout.
    Attached Thumbnails Attached Thumbnails CSS Layering Help-fdx_ffcrap.jpg  
    FusionDex -- Need tutorials, websites, reviews?
    Cosmic Graffiti - Your Graphics and Tutorial Resource


  •  

    Posting Permissions

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