Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] IE7 Formatting issue (with floats)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #30181

    Hello all!

    I’ve been informed by some of our testing group that our site has some formatting errors with IE7: http://www.plaidzebra.com/index3.php

    The formatting issues arise on the homepage (should have 3 columns but the center content is pushed below the floated content) and on the “About” pages (should have a right sidebar floated right with content on the left – IE pushes the content below the float).

    Does anyone have some IE7 expertise? (I have a MAC and haven’t found a good way to test IE usability yet – if you know of a good way, please post that as well!) From what I’ve tried, I think it has something to do with the widths of the float vs. content. Something isn’t adding up but I am having a hard time pinpointing it.

    Link to the “About” pages: http://www.plaidzebra.com/about.php

    (I’m sorry I can’t figure out how to post the code – it keeps telling me it’s too many characters, even though I’m using the “code” element, so please view the source on the live site. Thanks for your help!)

    #80341
    virtual
    Participant

    You are not understanding floats.

    The floated content #link_sidebar on the about page has to be placed inside the #content_about at the top, then the float will go to the right. As you have given #content_about 900px width, anything floated outside of it will float to the right either above or below depending on where you place the div in the html. You can actually do away with content_about and place the float first then the content (h2 tag and p tags only) within the #main_content.

    The issue on the home page is probably similar. With 3 columns, you have to separate them and float.
    So you need to rearrange the html and the css
    HTML

    	

    New Lime Green Flower Clip with Crochet HeadbandDeal of the Month


    Upcoming EventsFeatured ProductSign Up for the Newsletter











    CSS

    #promotions {
    text-align: center;
    vertical-align: top;
    float: left;
    width: 305px;
    }

    #sidefeatures {
    float: right;
    width: 290px;
    text-align: center;
    }

    You should also add overflow: auto; to #maincontent otherwise the image at the bottom of the first column is flowing over the footer.

    To test with IE if you have an Intel Mac you can install VMWare or Parallels and set up a virtual PC on which you install all the Windows browsers, IE8 with developper toolbar shows IE7 as well, Chrome, Safari, Firefox. Otherwise your only solution is to get a really cheap 2nd hand PC for testing purposes.

    #80259

    Fantastic! Thank you! I definitely see the mix up with the div’s – I’ll do your fix and see if that works. Sometimes I get so into the small things on a page, the large, glaringly obvious bugs are hard to find, lol.

    I appreciate the help!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.