Image float issue in IE6/7

HTML & CSS
1

I’ve been reviewing some layout problems on a current project, but have been vexed by a couple of image float issues that only seem to appear in IE 6/7. Perhaps someone will note the fix right off.

There are two cases.

Example One: Image floated without a <div> wrapper.

http://mainlinerestaurantweek.com/restaurants/mangomoon

In this case the flower image is floated right without using a <div> wrapper. The .alignright class is applied to <img>. Text wraps left in most browsers, however in IE6/7 the first paragraph of text (“Here at MangoMoon…”) begins under the image.

Example Two: Image and caption floated with a <div> wrapper.

http://mainlinerestaurantweek.com/win-a-secret-night-out-with-secrets-limousine.html

The car image is floated right using the <div> which wraps the images and its caption. The .alignright class is applied to the <div>. Text wraps the image and caption correctly in most browsers, however in IE6/7, the first paragraph begins under the image <div>.

Both issues have the feeling of something obvious that is escaping me at the moment.

Any thoughts are appreciated. :slight_smile:

Thanks!

2

Hi Paul,

Thanks for taking a look at it.

I was finally able to track down the issue to part of the reset.css I was using:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
        zoom:1
}

I rewrote it – basically removing this portion of the rule:

p, a {zoom:1;}

3

Yes,well spotted that would be the culprit and make the layout behave like I said above:)

Haslayout is a fix that you should only use when needed and not applied to all elements as it will cause more bugs than it cures. If you apply haslayout to inline elements then they behave like inline-block elements instead and are completely different in their behaviour.

Haslayout on all block elements stops the wrapping of floats and breaks all list numbering systems. It should be applied with care and only to elements that need it (such as a parent that contains more than simple content) and not to all inner elements.

4

Hi,

I guessed you must have fixed this as the text seems to be wrapping ok for me in IE6 and 7.:slight_smile:

You would need to ensure that the actual text content doesn’t have a dimension (or must not be in haslayout mode) or it won’t wrap around the image.