SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 Bug breaks my page

    Hi,

    On this site, http://www.hardpackvt.com, I have an IE7 bug that drives the photos in my right floated div down under the text on the inside pages like this one: http://www.hardpackvt.com/storage.html . Any ideas as to why this is happening?

    Thanks,

    luciano

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Try adding a width to .oneColFixCtrHdr #mainContent

    Code:
    .oneColFixCtrHdr #mainContent {
      width: 100%;
    }
    I would probably go further, and change things to this:

    Code:
    .oneColFixCtrHdr #mainContent {
      width: 780px;
      overflow: hidden;
    }
    and remove the float on that div.

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, remove the height, and remove clear/float on it, and add overflow:hidden;
    Code:
    .oneColFixCtrHdr #mainContent{float:none;height:auto;clear:none;overflow:hidden;}
    Also, on the images in the right column, you set a bottom margin of 10px or so, and IE won't recognize that unless you have a hard clearing element in the HTML (so if you want that, then remove the overflow:hidden; I just gave you, and put a clearing div before "#mainContent" closes

    Ralphs won't work . (Sorry to say. It needs the clear/float/height removed (the height may not need to be removed but it couldn't hurt))
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    Thanks for the help. Problem solved, I think...;-)

    Giving the width to the #mainContent div was the answer. Removing the float for that div broke the site in Firefox. Maybe it was the way I did it. Never underestimate my clumsiness with code. Turns out, though, that it works with float left in.

    Anyone tell me why this is an issue in IE7? Sometimes I think IE7 is the next IE6 but that's just my experience.

    Hope you all have a great weekend. It's been amazingly cold here in Southern Vermont this weekend. Struggling to keep warm.

    Thanks for your amazing help and your wonderful community.

    All the best,

    luciano

    PS If it still looks bad in your browsers, let me know. BTW, what do you guys like for browser testing?

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It didn't break the site for me .

    I just took out all 3 (clear/float/height) because all 3 were not needed.

    This was an issue in IE7 because if the parent of a comlicated structure (to IE7 this was because floats etc) it needs haslayout often otherwise you will get random float drops along with other weird absurdities that can happen .

    FF2+
    Opera 9+ (or whatever you can get)
    Safari 3+
    IE6+ (IEtester for that)
    Chrome
    Konqueror
    etc.

    Basically get as many modern browsers as you can .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, if I take the float:left/clear:left out of #mainContent, the first thing that happens is that my green background disappears in Firefox. If I take the floats out of #mainRight and #mainRight-inside then everything goes haywire. This is in Firefox 3.6.

    luciano

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    If you take float/clear out then YES the background will disappear

    THat's why I gave you overflow:hidden;
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I see. But after removing the float from #mainContent and inserting overflow:hidden you have to remove the float from the #header h2. Then it works. I see that now.

    luciano

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I didn't have to remove the float from the header . You and I must be doing something slightly different. The code I posted was all I needed for consistant results . All is fixed so it doesn't matter.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •