IE7 Display issues

Question

A lot of my floats are showing up on a separate line when viewing in IE7 ... in Ffox, chrome, IE8 etc they look fine.

The site in question is:

http://208.43.52.30

The places where the float is not working are the location for "events near me", "Show" for the show month buttons ..

I'll attach some screenshots

IE 8:

IE 7:

Answer 1

First off, 'float' is pretty well supported, even on IE. When validating the HTML on you website, I am getting 43 errors (wont really be that many). Correct those and see if it fixes the problem. Earlier versions of IE (<= 7) are not as friendly to slightly invalid markup as IE8, chrome, firefox, etc...

Second, if you are really just trying to display block elements inline, 'display:inline-block' is the easiest way. Contrary to popular belief, this is supported on IE7 & 8. Here is the css for cross browser support:

.inline-element {
  display:-moz-inline-stack;
  display:inline-block;
  zoom:1;
  *display:inline;
}

Answer 2

I personally can't see the difference (the closest thing I have to IE7 is compatibility view in IE8), but based on your screenshots it looks like the "Upcoming Events" font-size is much bigger in the IE7 screenshot.

Did you define font-size for your h1 tag? Different browsers sometimes handle the size and margins of header tags different, so if you put h1{font-size:14px;} in your stylesheet maybe it'll fix it.

Answer 3

The Upcoming Events problem is being causes by IE7 pushing the float:right to the next line instead of keeping it in line with the h1, despite no clear I can't figure out a way to get that to stop. An alternative I came up with was to float the h1 left instead and give the default text-alignment:right; This will cause the same layout, and IE7 is happy.

http://jsfiddle.net/znRxq/

Same solution for the show button.

Answer 4

IE7 might be making your input larger (from experience), you should set a different width for IE7.