The problem may be caused by the different way Internet Explorer renders box model in terms of padding and margins.
IE does not add margin and padding to the div, but includes it within the total width of a container. This often throws off horizontal alignments.
Look at the values for the following (for the container box, probably your #outercontainer div) :
border-left, margin-left, padding-left, or width values.
Internet Explorer often needs the width:XXpx specified. (XX representing some number in pixels)
I have linked the issue here:
http://www.1stpersonpress.com/links/archives/css-problems-with-ie.html#trackbacks
The post references an explanation via Elise LearningMovableType.com, but the problem isn’t specific to MT templates.
I have a couple of box model illustrations somewhere, let me see if I can locate and I’ll post those here as well.
http://www.1stpersonpress.com/links/archives/css/ has a couple of links that are great for visualizing the CSS Box Model.
Note – for shorthand CSS expressions (all four directions displayed as one line) the value for left will be the last number. CSS shorthand rules are written clockwise, starting from the top:
example:
margin: 10px 20px 30px 40px
is the same as
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
Regarding why the problem occurs on a category page but not on the home page:
Think boxes within boxes here… The home page template may in effect be wrapping the same area in an extra container – problems with IE box model can often be solved by wrapping the container in an extra set of <div>...</div> and applying the style to that outer container.
I noticed that your template has an #outercontainer as well as an #innercontainer.
Play with those horizontal margin and padding values and see if that’s where the variance is happening.
Thanks, after changing the margin I’ve managed to make the page look slightly better, and I’ll try again further later.
Pesky IE!
Like I’ve been saying… IE is, and always will be, a lost cause.
I wish more people would start using a better browser. Luckilly, only 31% of my visitors use IE and 57% use Firefox. The other 12% are scattered amongst other browsers and RSS readers.
Good luck with trying to get it to render perfectly in both!
