stillwaterfly — 2014-07-09T13:21:48-04:00 — #1
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: http://www.stillwaterflyshop.com
Here's what the icons look like in IE:
And what it looks like everywhere else:
paulob — 2014-07-09T15:41:18-04:00 — #2
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.
stillwaterfly — 2014-07-09T18:11:42-04:00 — #3
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!
williamforrest — 2014-07-10T02:47:58-04:00 — #4
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: http://validator.w3.org/