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
    Nov 2009
    Location
    Orange County, CA
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Layout shifting or breaking in IE 6 & 7 - Help!

    Hello there! I have coded a template and have it all working great in FF & Safari, of course then I took a look at it in IE and crap! it is pretty messed up (more so in IE6 than 7). If you take a peek you'll see I have a list to the right of the navigation where I've used graphic bullets these aren't working well in IE and the list is moving to the left too far. But IE 6 totally breaks the layout and sends most of the page below the navigation completely. I'm still fairly new to CSS positioning, so I'm hoping this is going to be an easy fix!

    go to this link to view:

    http://www.f7digitaldesign.com/lms1_site/index2.html


    Thanks!
    f7brian

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The difference in the list is due to different defaults applied by the browsers to the bulleted list. I suggest adding padding-left:40px to your css for that ul - that should bring IE in line with FF.

    In IE6 your #main_body div has dropped. It looks like this is because the div #nav_bottom2 is too wide (240px) to fit in #nav (215px). It also looks like just amending this width or removing it completely sorts the problem.

    You've got quite a few errors in your markup too - mostly down to repeated element ids by the looks of it. Making these classes instead of ids should fix this.


  •  

    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
    •