IE CSS Issue

HTML & CSS
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:

Thanks!

2

Hi,

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.


#socialmedia{width:114px}

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.

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!

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/