SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2007
    0 Post(s)
    0 Thread(s)

    Floats rendering diferent in IE vs Firefox

    Hello all.

    I just made some changes to a client site, Nola Tiles.

    At the bottom of the page there are product listings with links to the owner's online store. I previously had three product links at the bottom; however, this morning the owner decided to add two more. It's causing some problems in the way my design looks now, and I am hoping someone can help!

    I would like them to stretch three across, then fill out the 2nd row starting from the left. Firefox seems to get this correct, but IE7 makes it look awful. In IE7, only two are listed on each row instead of three.

    Can anyone help me understand why it doesn't look the same as in Firefox?!

    Thanks in advance for your help!
    Independent Web Designer/Developer in Mandeville, LA USA

  2. #2
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Jacksonville, Florida
    1 Post(s)
    0 Thread(s)
    The site looks exactly the same in Firefox, IE7 and WebKit for me - 2 columns of products. In IE6 it is 3 columns of products.

    First of all, may I ask why you are using unordered lists (li) for the majority of layout on this page?

    I would try changing all of the product boxes to a width of 31-32% and see if that doesn't solve it.

    Best regards,
    Alex Stanford
    Alex Stanford @alexstanford tumblog in fb G+ K
    TechTalkin The Premier Community for Technology Enthusiasts and Professionals
    Full Ambit Media Zero Sacrifice Web Design & Development; Made in the USA @fullambit in fb G+ K

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    0 Post(s)
    0 Thread(s)
    I would think Alex's suggestion will work. I think this renders differently in IE7 than other browsers because different browsers use different amounts margin and padding on different elements. The ul#product_list is at 100% which is good, but then the li's inside have fixed widths which may be interfering with the different amounts of margin and padding IE7 is applying. So changing the fixed widths to what Alex said should work. If it doesn't I would start to suspect a hasLayout issue.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    180 Post(s)
    6 Thread(s)

    There are are only 2 blocks across in Firefox 3 also.

    The reason is simple maths

    You have space available of 910px.

    Inside this you have an element set to 100% and then you have given it a border. This can't possibly fit inside 910px because 100% + 2px = 912px.

    If you remove the 100% then the element will fit inside the 910px but the borders on the inner element make the space available only 908px.

    Your three blocks add up as follows.

    275 + 330 + 305 = 910px

    Therefore the three blocks are 2px too big to fit.

    You must loses the border or make the elements widths total 908px.

    li#products {
        width: 910px;
        clear: both;
        margin: 0 auto;
        padding-bottom: 5px;
    li#products ul {
        overflow: hidden;
        /*width: 100%;*/
        margin: 0;
        padding: 0;
        font-family: "century gothic", Verdana, Arial, Helvetica, sans-serif;
        background: url( top left repeat;
        /*border: 1px solid #6699ff;*/
    * html li#products ul{height:1%;}
    Without a border the 3 elements line up across the page in FF3 and IE7

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Countryside, Sweden
    0 Post(s)
    0 Thread(s)
    Quote Originally Posted by socalcane
    Can anyone help me understand why it doesn't look the same as in Firefox?!
    In addition to what Paul said, I'll mention that you also had overflow:auto on the ul.

    That I think made IE reserve space for a scrollbar induced (in error) by the overflow that is visible in the items, as their heights are set. (Of course the equal item heights are necessary for the floats to slide in place.) Paul changed the overflow to hidden.

    IE 6 just stretched the height to fit and it is just a coincident that the floats slided in place. To ensure the equal item heights also in IE6 I you could hide the eventual overflow:
    Code CSS:
    li#products ul li {
    	float: left;
    	color: #433e40;
    	height: 350px;
    	overflow: hidden;
    Happy ADD/ADHD with Asperger's


Posting Permissions

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