Mon, 2007-07-16 20:49
Hi. I'm new here, and I have a strange problem.
I've seen from several sources that IE does not recognize max-width, and I've seen the hacks that are often suggested to get around that. I have the opposite problem: IE does indeed seem to be doing something with my max-width tags -- it's just a very nasty something.
Specifically, I have a column of text that I wish to wrap around a table containing google ads (along with sometimes other things) that sits on the right side of the main page area, which also contains my body text. I know, I shouldn't be using tables for layout, but that's a bit of a red herring as I've tested it with a div wrapper, and the effect (and problem) is the same.
The total width of the combined text and ad areas is about 640px. I've tried to set the text max-width at 500px. The fact that IE does not recognize max-width is fine -- IE readers can suffer with a bit of wider text if they aren't willing to use a better browser. However, what is unacceptable is that IE 7 seems to recognize "max-width:500px;" as some sort of command to have a "let's stop wrapping our body text around the ad box AT ALL" party. Mr. Gates' browser is almost audibly giggling as it limits the text width not to 500px but to less than 300 pixels. When I comment out the max-width property, IE wraps the text around the ad block just fine, albeit a bit wide. Here's a simplified version of the code that should exemplify the problem locally:
Keeping an
eye on your nest egg - Business
Headline goes here
Google ad skyscraper runs here.
This is the first paragraph of the
story. It is text. It is in its own div.
This is the
main body of the story. It is text. It goes on and on.
This is
the main body of the story. It is text. It goes on and on. This is
the main body of the story. It is text. It goes on and
on.
This is the main body of the story. It is text. It goes on
and on. This is the main body of the story. It is text. It goes on
and on.
This is the main body of the story. It is text. It
goes on and on.
This is the main body of the story. It is
text. It goes on and on.
This is the main body of the story.
It is text. It goes on and on. This is the main body of the story.
It is text. It goes on and on.
This is the main body of the
story. It is text. It goes on and on. This is the main body of the
story. It is text. It goes on and on.
This is the main body of
the story. It is text. It goes on and on.
This is the main
body of the story. It is text. It goes on and on.
This is the
main body of the story. It is text. It goes on and on. This is the
main body of the story. It is text. It goes on and on.
This is
the main body of the story. It is text. It goes on and on. This is
the main body of the story. It is text. It goes on and
on.
This is the main body of the story. It is text. It goes on
and on.
This is the main body of the story. It is text. It
goes on and on.
This is the main body of the story. It is
text. It goes on and on. This is the main body of the story. It is
text. It goes on and on.
This is the main body of the story.
It is text. It goes on and on. This is the main body of the story.
It is text. It goes on and on.
This is the main body of the
story. It is text. It goes on and on.
This is the main body of
the story. It is text. It goes on and on.
This is the main
body of the story. It is text. It goes on and on. This is the main
body of the story. It is text. It goes on and on.
This is the
main body of the story. It is text. It goes on and on. This is the
main body of the story. It is text. It goes on and on.
This is
the main body of the story. It is text. It goes on and on.
Does anyone know of a workaround for this? If necessary, I suppose I will just turn maxwidth off and let both browsers' users suffer with text that's over 500 pixels wide. Hopefully someone has a better solution.
I think this is a new problem, but since there are several thousand posts here, it's possible that I've missed it, either here or by not googline enough. Let me know if I haven't looked far enough.
Added clarification: I'm mainly talking about the max-width property as it applies to the "col_story_text" class.
Tue, 2007-07-17 20:09
#1
max-width is a haslayout-trigger in IE7
max-width is a haslayout-trigger in IE7. The whole element is displaced by the float, and the text does not wrap around the float. Read about elements next to floats. There is no fix other than not to apply a haslayout trigger to elements next to floats.
Mon, 2007-07-23 20:06
#2
Thanks!
Thanks!
We decided to just scrap max-width in order to avoid any hacks that might cause problems down the road (we already have too many hacks anyway). In either case, however, it's always good to know a little more about why things behave the way they do. The information was very appreciated.