0

I am doing a site for my php class and have just about finished my project except for a weird floating issue in IE. I'm only floating left and right, but the site seems to be clearing left and not sure why IE is causing this issue. Any suggestions? http://ectweb.cs.depaul.edu/AHARDEN2/project/index.php

Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
Nerdysyntax
  • 367
  • 1
  • 6
  • 16
  • 1
    Since you're doing a floated layout, you may want to make sure those floats are cleared. Adding `overflow:hidden` to `div#main` would do that and also fixed the issue in IE9 for me. – ajm Jul 11 '12 at 13:48
  • Thank you. Overflow: hidden does work and fixes the issue. But why overflow: hidden instead of clear: left or right. – Nerdysyntax Jul 11 '12 at 13:54
  • 1
    Well, in this case `overflow:hidden` is another way of ensuring that an element is cleared. Here's a good explanation of various methods of clearing floats: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best – ajm Jul 11 '12 at 14:01
  • Oh I got you. I did this project really fast and should have done my calculations better so as not to use the overflow. But it works and I've learned. I can't accept any of your answers, but thanks again. – Nerdysyntax Jul 11 '12 at 14:05

2 Answers2

0

This is probably because IE8 and lower do not recognise tags such as <nav>, <section> and so on. Consequently they do not match your CSS selectors like nav ul li a {...}

Try rewriting your CSS to not use these tags in their selectors.

Side-note: IE9 works fine.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
0

You could try adding a css reset like this one: http://meyerweb.com/eric/tools/css/reset/

And an html5 shiv like this one: http://code.google.com/p/html5shiv/

Billy Moat
  • 20,792
  • 7
  • 45
  • 37