2 replies [Last post]
patrickom
patrickom's picture
Offline
newbie
Last seen: 14 years 19 weeks ago
Joined: 2007-07-16
Posts: 2
Points: 0

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.

IChao
Offline
Enthusiast
Göttingen, Germany
Last seen: 12 years 38 weeks ago
Göttingen, Germany
Timezone: GMT+2
Joined: 2005-08-16
Posts: 148
Points: 0

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.

patrickom
patrickom's picture
Offline
newbie
Last seen: 14 years 19 weeks ago
Joined: 2007-07-16
Posts: 2
Points: 0

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.