CODEWITHSUNDEEP
cssinternet-explorer-7css-float
Kevin
Kevin

Reputation: 567

IE7 Display issues

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 8

IE 7:

IE 7

Upvotes: 2

Views: 674

Answers (4)

Ammi J Embry
Ammi J Embry

Reputation: 637

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

Upvotes: 1

Robert
Robert

Reputation: 21388

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.

Upvotes: 1

tau
tau

Reputation: 6749

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.

Upvotes: 1

jdc0589
jdc0589

Reputation: 7018

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;
}

Upvotes: 0

Related Questions