SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Chicago, IL
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help Wanted, Will Pay

    I'm primarily a Flash/PHP/MySQL developer, but got stuck with a pure XHTML/CSS site that I just can't seem to nail down. It's looking almost perfect on Safari and Mozilla, but (surprise) has a few issues on IE. If cleaning up my CSS errors in a prompt manner is something you think you can do, please let me know. The site is:

    https://www.jfistore.com/store

    Try drilling into some of the category and details pages. Basically, it seems like elements that should be side-by-side are jumping down to the next line. Something with my widths and floats in the box model, no doubt.

    Thanks,
    -Jed

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You've more or less answered your own question lol

    Its the broken box model of ie and the way you have handled some hacks and the places that you have missed some out.

    For instance in the code below you have defined a style for ie only where you have supplied different widths but then in the very next style block you have over-ridden them so they are pointless.
    Code:
    * html #midCol {/* ie only style*/
     text-align: left;
     float:left;
     width: 657px;
     w\idth: 587px;
     padding:15px 35px 30px 35px;
     border-left:solid 2px #FFF;
     background-color:#647Fbb;
    }
    #midCol {
     text-align: left;
     float:left;
     width: 587px;/* this one wins out*/
     padding:15px 35px 30px 35px;
     border-left:solid 2px #FFF;
     background-color:#647Fbb;
    }
    The styles need to be the other way around so that ie gets its styles afterwards.
    Code:
    #midCol {
     text-align: left;
     float:left;
     width: 587px;
     padding:15px 35px 30px 35px;
     border-left:solid 2px #FFF;
     background-color:#647Fbb;
    }
    
    * html #midCol {/* ie only style*/
     text-align: left;
     float:left;
     width: 657px;/*ie5 and 5.5. gets this*/
     w\idth: 587px;/* ie6 now gets this*/
     padding:15px 35px 30px 35px;
     border-left:solid 2px #FFF;
     background-color:#647Fbb;
    }
    However that still won't work because you have overlloked one mmore thing

    You are using the xml prologue which throws ie6 into quirks mode and uses the broken box model. Therefore you cannot give ie6 the correct size you have to give it the same sizes as ie5 and 5.5. Therefore the correct code is this.

    Code:
    #midCol {
     text-align: left;
     float:left;
     width: 587px;
     padding:15px 35px 30px 35px;
     border-left:solid 2px #FFF;
     background-color:#647Fbb;
    }
    
    * html #midCol {/* ie only style*/
      width: 659px;/*All Ie gets this*/
      }
    There is no need to repeat all the declarations only those that are different. You also forgot to add in the 2px for the borders as borders and padding must be added on for the broken box model.

    I've listed a few major elements that you have coded wrong and supplied the correct code to get you back on track. However you should look thoroughly through your code for any other instances.

    Code:
    #pageFrame {
     margin-left: auto;
     margin-right: auto;
     padding: 0px;
     width:811px;
     border-right:solid 2px #FFF;
     border-left:solid 2px #FFF;
     background-color:#DAD7D2;
    }
    * html #pageFrame {width:815px}
    #leftCol {
     text-align:left;
     width:150px;
     float:left;
    }
    * html #midCol {width: 659px;}
    #midCol {
     text-align: left;
     float:left;
     width: 587px;
     padding:15px 35px 30px 35px;
     border-left:solid 2px #FFF;
     background-color:#647Fbb;
    }
    * html ##midCol {width:659px;}
    #rightCol {
     padding-left: 2px;
     text-align: center;
     float:left;
     width:168px;
    }
    * html #rightCol{width:170px}
    #midColFull {
     float:right;
     width:623px;
     padding:5px 15px 10px 15px;
     border-top:solid 1px #FFF;
     border-left:solid 2px #FFF;
     border-right:solid 2px #FFF;
     background-color:#FFF;
    }
    * html #midColFull {width:657px}
    Hope that helps.

    Paul

  3. #3
    SitePoint Member
    Join Date
    Nov 2003
    Location
    Chicago, IL
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul-
    Wow! Thank you for the lengthy reply. I'll give it a go and see if I can fix things.

    Regards,
    -Jed


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
  •