Irritating IE6 Issue (possibly CSS related)

[kkbigal]

I've got a fairly simple page layout with a flash object embedded in a div.

When I shrink the width of the browser window so that the view-port isn't big enough to show everything, IE shoves the flash object down the page, leaving a huge amount of whitespace.

I've just tried this in Safari, Firefox 2 and Opera 9 and NONE of them do this - the flash object stays where it should be and you just get horizontal scroll bars as expected.

Any ideas?

*** Edit ***

Tried it on IE7 on XP and it does the same as IE6

 

[adamph]

Two Suggestions:

1) Try adding "overflow: hidden;" to the div and specifying a fixed width.

2) Put an IE style sheet and increase the width of the div.

Put this code in your head after you call the other style sheets:

<!--[if IE]>
<link href="css/msie.css" rel="stylesheet" media="screen" type="text/css" />
<![endif]-->

Then you can adjust the properties of the DIV in that separate style sheet without having to break the layout for the other browser.

You can target separate IE browsers in it.

This would work for all IE browsers:

#right-column {
margin-top:0px;
}

This would work for IE 6 and under only

* html #right-column {
margin: 0px;
}

Edit *** The above code is just a copy and paste of something I did and its not supposed to solve the problem ,merely highlight how you can change the css per browser.