ansaurus

Question

Block alignment woes with IE7, how to solve?

Answer 1

A:

In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Are your boxes <div>s? If yes, it should work.. Do you have a test case? (See quirksmode.org for more info!)

IE block level element inline-block hack: this may be useful for you

Andreas Bonini 2009-12-21 01:56:14

Using `inline-block` cross-browser is easier than that: `your selector { display: -moz-inline-box; /* Firefox < 3, will be quirky in some edge cases... */ display: inline-block; *display: inline; *zoom: 1; /* Star hack targets IE < 8; zoom triggers hasLayout with no other side-effects */`

eyelidlessness 2009-12-21 02:01:50

Answer 2

+3 A:

Firstly, put a DOCTYPE at the top of your document. This forces IE into standards compliant rather than quirks mode (both euphemisms). For example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

Secondly, if you want IE6 compatibility use floats (Andrew is quite correct in stating that display: inline-block only works in IE7 on elements with natural display: inline and <div> has natural display: block). This should work:

<div id="outer">
  <div id="left"></div>
  <div id="right"><>/div>
</div>

with:

#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }

as long as the widths of left and right are less than the width of outer including padding, borders and margins. If not, right will drop down to the next line.

cletus 2009-12-21 01:57:29

Note: not just **a** doctype, but a **strict** doctype. See the table at bottom of this site for a list of all doctypes and the browser behaviour (you at least don't want quirks mode): http://hsivonen.iki.fi/doctype/

BalusC 2009-12-21 02:03:35

Vote up.. just after using floats add <div style="clear:both;"></div>

c0mrade 2009-12-21 09:28:38

You don't need the "clear: both" bit if you change the overflow property on the container.

cletus 2009-12-21 09:34:12

ansaurus

tags:

views:

answers:

Block alignment woes with IE7, how to solve?

related questions