IE CSS Issue

I just changed the social icons we’re using in our header and footer the other day. Looks fine in FF, Chrome and Safari. Then there’s IE - for whatever reason, it’s completely jacked there. Hoping someone has a relatively easy fix (aside from nuking IE off the planet).

site is:

Here’s what the icons look like in IE:

And what it looks like everywhere else:



You are floating the social media icons container without a width which means that the element will try and stretch to 100% if it can and when it does it no longer fits in that little space.

I’ve a feeling that IE may actually be the right one here as I would have assumed that the parent container should just keep stretching with the content and not wrap its internal content.

You will need to apply a width to the container to make iE behave as the others.


You may have to increase that width if you have margins applied.

Note: the XHTML 1.1 DOCTYPE you are using should only be used when Web pages are served as XML and not when served as text/html. There are some slightly different behaviours associated with this doctype also so unless you are serving the page as XML then use 1.0 or some other valid doctype instead.

Adding the width worked like a charm, thanks!

I’ll look into the doctype - I’m not sure how to change that in Netsuite.

Thanks for all your help!

since you are using XHTML mark-up, you should follow how xHTML should be, it is strict in using HTML tags.
you can validate your xHTML mark-up here: