Social Media Icons Appear as Steps in IE 7

[kblake]

I’ve changed my CSS a variety of ways and I just can’t get my social media icons aligned for IE7. I even have an IE7 style sheet and no luck. Here is the link, http://newmetj.com

Any ideas?

[Senff]

No idea, things look good in my IE7 on Windows 8.

[ChrisP]

`ul.icons li {
display: inline-block;
}`

[Senff]

…and looks bad on my IE7 on Windows 7, even with display: inline-block. Not sure if that’s just on my end, but if @ChrisP’s solution doesn’t work, I would personally go with float:left; though.

[ChrisP]

you could just try `display: inline` I know it’s an IE7 bug that I’ve dealt with before..the `float: left;` should work as well.

[Staircase Bug](http://www.virtuosimedia.com/dev/css/ultimate-ie6-cheatsheet-how-to-fix-25-internet-explorer-6-bugs#staircase-bug “Staircase Bug”)

[kblake]

Got it! Thanks.

What I don’t get is I have

ul.icons li a { float: left; }

but I still need to use

ul.icons li { float: left; }

or

ul.icons li { display: inline; }

Both work and I just have it in my ie.css. I tried it i my styles.css and it worked fine there too.

[Senff]

@kbespinoza: you’ll need to put that on the LI’s because those “interact” with eachother (the A’s within the LI’s are kinda independent and aren’t really relevant to this issue). I believe you can even remove the float:left; from ul.icons li a, as long as the style for ul.icons li is still the same.

[Author]

Posts