5 replies [Last post]
krko
Offline
newbie
Last seen: 14 years 12 weeks ago
Joined: 2008-05-13
Posts: 4
Points: 0

hello all,

first i'd like to say i've spent the last afternoon looking for an answer but couldn't find it.

i have a valid xhtml transitional page which has 3 columns. one on the left, one in the middle and one on the right. the column on the left is 180px, middle is 450px and the right one is 180px as well. basically what i have in css is like this:

.leftcol { float: left; width: 180px; margin: 0 30px 16px 0; } .middcol { float: left; width: 450px; margin: 0 30px 16px 0; } .leftlast { float: right; margin: 0; }

and in the page is like this:

some text...

some text with some images...

some text...

it displays ok in all browsers but problem begins when i insert in the middle column an image that's wider than 450 pixels. in ff and safari that image just stretches over the right column (which is just what i want) but in ie, the middle column and the right one, go down, under the left column because that's where there's place for both columns. i don't want this. i want ie to do basically the same thing as ff and safari.

how do i do it?

thank you in advance,
krko

krko
Offline
newbie
Last seen: 14 years 12 weeks ago
Joined: 2008-05-13
Posts: 4
Points: 0

please ignore this comment

please ignore this comment i accidentally wrote it and i couldn't find a way to del it. the question however remains... Smile

krko
Offline
newbie
Last seen: 14 years 12 weeks ago
Joined: 2008-05-13
Posts: 4
Points: 0

anyone?

anyone?

Caposoft
Caposoft's picture
Offline
Enthusiast
Last seen: 7 years 26 weeks ago
Timezone: GMT+1
Joined: 2008-03-16
Posts: 330
Points: 118

I can't imagine why you

I can't imagine why you would want to force something wider than your set width and expect every browser behaves like you would want them to. Ever thought about that IE interprets your error correct while the rest tries to correct your error and fail?

krko
Offline
newbie
Last seen: 14 years 12 weeks ago
Joined: 2008-05-13
Posts: 4
Points: 0

it doesn't matter if ie

it doesn't matter if ie interprets my error correctly and other browsers fail or vice versa. it's not a browser contest... i have a problem and i'd like to solve it...
i'm asking this question because i have huge amounts of info to transfer into the new design (from another site) and i don't have time to resize and rearrange the content. there must be a way to make ie display a div over/under another div and z-index doesn't work.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

The problem is that IE≤7

The problem is that IE≤7 has a WAD bug called hasLayout. Once layout is triggered, a container will expand to enclose its content. Period. Full stop. That's what you're bumping into. Modern browsers correctly allow the image to overflow; IE doesn't and won't. It's no help now, but MSFT promises IE8 will not have hasLayout.

Once you're aware of the issue, you tend not to allow over-sized content. If there's a fix, I don't know it off-hand. All I can suggest is that you scale back the image 'til it fits. You could use a conditional comment to feed IE special instructions restricting the width.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.