CODEWITHSUNDEEP
csshtmlinternet-explorermarkup
dannyrose
dannyrose

Reputation: 13

CSS not working in Internet Explorer: missing borders img and nav with anchor tags (but works in Firefox)

I thought I had finished the markup for this website that I am creating for my mom’s dog walking business, but then I realized that my CSS is only partially applied to my site in Internet Explorer. It’s strange because the body background image in my CSS displays but my nav image and nav's anchor tags don’t show and the borders to my divs are missing in IE. Everything works fine in Firefox.

Also the padding and margins are crazy in ie.

I’ve read from people that ie generally isnt too friendly towards margin-left margin-right padding-left and paddin-top- stuff like that. That it generally prefers for example padding: 20px; or margin: 30px; But I don’t know if that was what I did wrong. I don’t see how that would make my borders and nav image disappear in ie. Very frustrating.

The url is www.grinningpup.com/dannytesting/grinningpup.com/index.html

I tried to write semantic markup. I hope the solution isn't due to a stupid mistake I made.

Upvotes: 1

Views: 762

Answers (3)

Saif Khan
Saif Khan

Reputation: 7

HTML "nav" tag and "section" tag not support IE 8 and earlier versions. So, you only use "div" tag solve all problem.

Upvotes: 0

Stuart Burrows
Stuart Burrows

Reputation: 10814

Welcome to SO!

I've taken a quick look at your site and I can see the issue is that you've used HTML 5 elements which aren't supported in older versions of IE.

Easiest fix is to add Modernizr which is a javascript library aimed at detecting browser support, and in most cases, polyfilling them (only in this case). There are numerous resources on the subject. My fvourite is this; http://diveinto.html5doctor.com/ but just google and check SO for more information.

I hope this helps you!

Upvotes: 1

user625860
user625860

Reputation:

You are using HTML5, which IE8 and below don't interpret right.
You'll need to include html5shiv and add the following to your css:

 article, aside, figure, footer, header, hgroup,
 menu, nav, section { display: block; }

Upvotes: 1

Related Questions