SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Design broken in IE7 and IE6

    Website: http://www.fieldcrestofnc.org
    CSS: http://www.fieldcrestofnc.org/templa.../css/style.css

    Site is running on Joomla CMS.

    The site looks great in IE8, Firefox, Safari, Chrome, but falls apart in IE7 and IE6. IE8 Compatibility mode breaks it as well. Anyone have any idea why? I've tried re-coding it from scratch but I get the same issues, so it's something I'm doing wrong and don't know I'm doing it. I'm thinking it may be a box model thing. Any tips would be greatly appreciated.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, there is an old version of the site before I integrated Joomla here:
    http://www.fieldcrestofnc.org/v1/

    This version works fine. The new one was based off the old, and the only real difference was the navigation CSS. It must be something with the <ul> <li> <span> or <a> tag CSS.

    The new version breaks the navigation on older browsers by taking the one-line top navigation, and placing it on multiple lines despite being set to float.

    Still trying to figure it out.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the top fixed in IE7, and i'm not hugely worried about making it IE6 compatible. I had the floats in the anchor instead of the list item.

    Now I just need to get the content panels working right and I'm set.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    okay this is weird. All the other pages look fine now, except the home page (Hospitatilty Section). All the pages are dynamically generated from the same template though. The only difference I can think of, is that the home page (Hospitality section) uses a separator span in the left navigation menu.

    You can see what I'm talking about by toggling compatibility mode in IE8, while on the hospitality section. It does not do this in any other section.

    Any ideas? This is the last piece of the puzzle.

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It looks like you got the staircase bug going with your nav.
    Try floating the anchors also.

    It looks like you may need to trip haslayout on your #MainBody too.

    Code:
    #Content {
        background-color: #FFFFFF;
        width: 710px; /* Minus Padding */
        float:left;
        padding: 10px 10px 15px 10px;
        min-height:auto;
        }
        
    #MainBody {
        min-height:0;/*IE7 haslayout*/
        background-color:#FFFFFF;
        }
    * html #MainBody {height:1&#37;;}/*IE6 haslayout*/
    
    #TopNav li {
        float:right;
        }
    
    #TopNav li a {
        float:right;
        height:25px;
        }

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    Also, I have no idea why, but IE7 was freaking out because I had a height assigned to my separator span. I removed it and just added a top and bottom margin and it fixed all the other layout issues. How goofy is that?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I see, the heights on the span were giving haslayout to IE7 and because they were block levels they were dropping down. You were dealing with IE's broken float model and haslayout at the same time.

    You could have probably fixed it by floating the spans also.

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made the changes you suggested however it broke the nav for IE7 and made my background not fill the #MainBody resulting in white space under the left navigation.

    All in all, it now looks mostly the same in IE7/IE8 and it's usable in IE6, so I'm happy.

    Thanks for the help!

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I see, the heights on the span were giving haslayout to IE7 and because they were block levels they were dropping down. You were dealing with IE's broken float model and haslayout at the same time.

    You could have probably fixed it by floating the spans also.
    Still trying to fully understand haslayout. It makes me a sad panda. Does that property even apply to other browsers or IE8?

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KlingstedtBros View Post
    made my background not fill the #MainBody resulting in white space under the left navigation.
    If your happy with it now then that's good.

    I did not see that you set haslayout on the #MainBody , that is what causes IE to contain it's floats and extend the BG color.

    I still see this on your css

    Code:
    #MainBody {
        background-color:#FFFFFF;
        }
    All in all you are just having haslayout problems, they can be tricky and strange behavior is always a good indicator of it.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KlingstedtBros View Post
    Still trying to fully understand haslayout. It makes me a sad panda. Does that property even apply to other browsers or IE8?
    You can learn more about haslayout here.
    http://reference.sitepoint.com/css/haslayout

    And yes, I have heard rumors about haslayout in IE8 though I have never had any problems with it myself.
    http://jhop.me/browsers/ie8/haslayout-true

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help!


Bookmarks

Posting Permissions

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