Hey,

The social box in the sidebar of my website looks correct in IE8, Firefox, Safari and Google Chrome etc, but I am trying to get it to look correct in Internet Explorer 7.

My site: http://www.lilwaynehq.com

Here is what it currently looks like in IE7:



And here is what I would like it to look like and what it currently looks like in all other browsers:



Anyone know the problem and how I can fix it?

Thanks

Who is going to notice or even care??

Originally Posted by chrishirst

Who is going to notice or even care??

Thanks for the help, much appreciated.

No, No I'm being serious.

Your target audience are not likely to be browsing on ten or twelve year old machines which will be running IE 7. And they are not likely to be comparing pages in side by side browsers.
Contrary to popular belief the number of people looking at your pages in different browsers on the same machine is zero plus you.

I know for a fact that some of my visitors are using IE7.

All I want to try and do is make my website look good in every browser.

What kind of percentage? because you have to weigh up the time it takes to fix what is purely a cosmetic problem.

The visitors using IE7 are not likely to be comparing the pages side by side so will simply accept the layout as is.

It's a low percentage. I understand what you are saying, but I just like to make sure everything is near-perfect... I'm just one of those type of guys.

In that case you'll need to use conditional comments and load a IE7 specific style sheet

That is what I have already been doing Chris. I'm using one already to correct a few fixes in IE - http://www.lilwaynehq.com/blog/wp-co...hq/css/ie7.css

I have been playing about with positions, but I can't seem to get the right fix for IE7.

This is why I was hoping someone on here may be able to help me out with a css fix.

Without really looking deep into the code at the moment, I do think it could be a floating issue. Looks like your child elements are floating and the parent element (#socialwidget) isn't properly clearing.

Originally Posted by Puddlemut

Without really looking deep into the code at the moment, I do think it could be a floating issue. Looks like your child elements are floating and the parent element (#socialwidget) isn't properly clearing.

Thanks.

I just needed to remove the float and add a "display: inline-block;".

Appreciate it

Glad to help