CSS Help Wanted, Will Pay

[woodyChicago]

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

[Paul O'B]

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.

* 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.

#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.

#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.

#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

[woodyChicago]

Paul-
Wow! Thank you for the lengthy reply. I'll give it a go and see if I can fix things.

Regards,
-Jed