Wordpress Sidebar Problem in IE only

I'm using a 3 column template and the following: http://www.hannahmontanazone.com displays the column furthest to the right correctly and in the right place in Firefox. In IE, this is displayed at the bottom . Why on earth is it doing that ?

I've uploaded the sidebar.php file, hopefully someone can help!

Oh, and would it be complicated to turn this into a 2 column template? So the main text body and one of the sidebar columns are centered? I would prefer it more that way but have no idea where to start!

 

this is due to the way internet explorer handles css (usually due to margin or padding)

most people create a seperate css stylesheet that contains the ie fixes

have a search for ie css hacks

 

Great .. I don't know much about CSS so I'll need some help.

In the style.css file which I've also attached there's this line:

/* Side Right Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRR { width: 160px; float: right; padding: 0px;}

PHP:

Which I believe it detects the column furthest to the right.
I found on this website that I should add

display: inline;

PHP:

somewhere in a

<!--[if IE]>
do something
<![endif]-->

bracket ?

Where do I add this ?

 

change

to

should fix it?

 

Still the same .

I've also changed the widths of the two columns a bit but it didn't have any effect.

This is the full SR thing in the style.css


/* Side Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.SR { width: 415px; float: right; position: relative; padding: 0px 0px 20px 0px; }
.SR h2 { font-size: 14px; letter-spacing: -1px; font-weight: bold; background: url(images/SRH3.png) repeat-x left bottom; color:#666; padding: 5px 0px 5px 0px; margin: 0px; border-bottom: dashed 1px #efe4e4; }
.SR h3 { font-size: 14px; letter-spacing: -1px; font-weight: bold; background: url(images/SRH3.png) no-repeat left center; color:#666; padding: 5px 0px 5px 20px; margin: 0px; border-bottom: dashed 1px #efe4e4; }


.SR ul { margin: 0px; padding: 0px;}
.SR li { margin: 0px; padding: 2px 0px 3px 20px; list-style-type: none; background: url(images/CategLi.png) no-repeat left top; border-bottom: dashed 1px #efe4e4; font-size: 11px;}
.SR li a { color:#cc3366; }
.SR li a:visited { color:#cc3366; }
.SR li a:hover { color:#cc0066;}

/* Side Right Left +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRL { width: 230px; float: left; padding: 0px;}


/* Side Right Right +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.SRR { width: 160px; float: right; padding: 0px;}

 

I see both of them the same in IE and FF.

 

Is that a column of pictures properly on the right right column? I'm using IE 6 and I see them completely distorted.

Maybe if it's only a IE 6 problem I cba to fix it.

Ahhh! Done it, I made the thumbnails smaller They fit in the sidebar block now lol.

 

Well, congrats. And yes, I think its only IE6, as they looked good in IE7.

 

I have the same issue on my blog for IE6 ~X(

 

IE6 always seems hardest to code nowadays. Whenever Im slicing a template, things always go wrong in IE6.

 

I'm glad they launched Vista.. it has IE7 by default right ?

 

Probably, but still who cares about IE.. I hate IE so much, always messes up my websites, seriously.

If I was rich I would donate to Firefox just to convert more people!