IE 7 pushes images down on resize

Forum Moderators: not2easy

Message Too Old, No Replies

IE 7 pushes images down on resize

mike73

11:22 am on Apr 16, 2007 (gmt 0)

I have a layout with a content DIV and a floating-left side bar DIV. If there is an image in the content that is wider than IE's window, the image, and all the content under it, is shifted down to the end of the side bar. In FF, you just get a horizontal scroll, as you would expect.

Does anyone know how to fix this in IE?

Thanks :)

SilverLining

4:10 pm on Apr 16, 2007 (gmt 0)

mike73, have you tried

overflow: auto;

? This should display a scrollbar if the content overflows the set width. You could also set

overflow: scroll;

, but this will always display a scrollbar, even if the content fits inside the div.

Once you have set

overflow: auto;

you could also set

overflow-x: hidden;

to hide the overflow.

mike73

9:45 pm on Apr 16, 2007 (gmt 0)

Thanks for the reply. Unfortunately that didn't work.

The strange thing is, that if the page is in an IFRAME that isn't wide enough, the horizontal scroll appears, but the images still move down.

SilverLining

8:54 am on Apr 17, 2007 (gmt 0)

Hi. It would be easier to troubleshoot if you post some code when you get a chance.

SuzyUK

10:18 am on Apr 17, 2007 (gmt 0)

This is an old problem, but it should be fixed in IE7 so if you are seeing it in IE7 it depends on how you've coded it.

The problem is IE's "expanding box" problem whereby when content that is too large for a dimension constrained element that element would expand to fit - rather than overflow - and once the box expands width ways it thinks it can no longer fit in the space beside the float so it moves down below the it!

There are a couple of ways to workaround it for IE6 and below and it depends on whether you want to force an internal scrollbar or hide/crop the overflow. If it was just text you can use a MS proprietary property

word-wrap:break-word;

to force the line of text to break, however that won't work for images.

I think the best you can do for images, presuming you want the whole image to be seen, is force an internal scrollbar (what I mean by internal is that layout rather the view port gets the scrollbar)

I have some example code which works for IE7 - so only IE6 and below needs the workaround - I've also added nested divs to control the scrollbars because it needs some extra padding to cope with the horizontal scroll. The "inner" div could be used to pad the content for other browsers too so its not completely useless.

if you're happy with the scrollbars you could have all browsers scrolling and wouldn't need to put the code in an IE conditional comment.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-color on hover doesn't work in IE 7</title>
<style type="text/css">
#wrap {
width: 600px;
background: #eee;
}
#left {
float: left;
width: 200px;
background: #dad;
}
#content {
background: #cfc;
width: 400px;
float: left;
}
#content img {border: 1px solid #f00;}
</style>

</head>
<body>
<div id="wrap">
<div id="left">
<div class="inner">
left content<br />leftcontentleftcontentleftcontentleftcontent<br />left content<br />
</div>
</div>
<div id="content">
<div class="inner">
<h4>content in here</h4>
<p>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" width="510" height="100" />
</div>
</div>
<br style="clear: both" />
</div>
</body>
</html>

hth, and feel free to post your summary code to compare, I think it's because I floated both sides that IE7 works OK anyway, but I can't remember

Suzy

[edited by: SuzyUK at 10:20 am (utc) on April 17, 2007]

mike73

6:27 pm on Apr 17, 2007 (gmt 0)

SuzyUK, thanks! The problem is that many people use this page in a frame, so overflow-x: auto causes double scrollbars, and of course nobody wants their stuff cropped either.

Okay, don't laugh. Here's the layout:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<body>
<div id='wrap'>
<div id='content'>
<div id='sidebar'>
</div>
<div id='main'>
<div id='main2'>
<div id='post'>
</div>
</div>
</div>
</div>
</div>
<div id='footer'>
</div>
</body>
</html>

And here's the CSS:

body, td, h1, h2, h3, h4, h5, p, u, li{
font-family:Verdana,Arial;
font-size:12px;
}
body{
margin:0px;
padding:0px;
text-align:center;
background-color:#99CCFF;
}
#wrap{
position:relative;
margin: 0 auto;
padding:8px 0px 8px 8px;
text-align:left;
clear:both;
overflow:visible; /*test*/
}
#content{
margin:0px;
padding:0px; /*key*/
display:table-cell;
overflow:visible;
}
#sidebar{
overflow:visible;
float:left;
width:160px;
margin:0px;
padding:0px 8px 8px 0px;
}
#main{
margin:0px 0px 0px 168px;
padding:0px;
}
#footer{
margin:8px 0px 8px 0px;
padding:0px;
text-align:center;
width:100%;
clear:both;
}

SuzyUK

12:08 pm on Apr 18, 2007 (gmt 0)

Hi Mike, your layout is fine! there's a lot of unnecessary CSS in there but I take it that's because of all the things you tried ;)

I actually think I've found a solution, though it's untested under stress but again if used in a conditional comment it might work and if so it would be nice to get feedback as to how it stands up.

your main and main2 divs should suit the purpose very well..

I know this is messy, but I've left everything in and commented out, or commented on the bits that I changed as per my test, although I realise that my test code is likely simpler than yours.

the main crux of the "workaround" is in the IE only stylesheet (conditional comment) and because IE7 needed some help but not as much as IE6 and below I've used the * html filter to only target IE6 and below within the same conditional comment, you can of course separate it how you like if you want to try it but this should work for testing.

body, td, h1, h2, h3, h4, h5, p, u, li{
font-family:Verdana,Arial;
font-size:12px;
}
body{
margin:0px;
padding:0px;
text-align:center; /* not required unless there's a width on #wrap */
background-color:#99CCFF;
}
#wrap{
position: relative;
/*width: 700px;*/ /* I tested with this you didn't have a width but IE needs hasLayout triggered so zoom is in conditional comment */
background: #ffc;
margin: 0 auto; /* optional doesn't do anything without a width */
text-align:left; /* optional - only required if body is set to center */
padding: 8px 0px 8px 8px;
/* clear:both; */ /* not required */
/* overflow:visible; */ /*test - not required */
}
#content{
/* margin:0px; */
/* padding:0px; */ /*key*/
/* display:table-cell; */ /* not required */
/* overflow:visible; */ /* not required */
background: #dad; /* not required - added for visual in case you have a background here */
}
#sidebar{
/* overflow:visible; */
float:left;
width:160px;
margin:0px;
padding:0px 8px 8px 0px;
background: #eee; /* grey added for visual */
/* height: 400px; /* not required - I used to test wrap */
}
#main{
margin:0px 0px 0px 168px;
padding: 1px 0px; /* added to contain collapsing margins */
}
#footer{
margin: 8px 0px 8px 0px;
padding:0px;
text-align:center;
/* neither required as no floats to clear
width:100%;
clear:both;
*/
background: #ddd; /* mid grey added for visual */
}
</style>

hope that helps and ask away if any questions - I wanted to post it before I go out - I look forward to hearing how it passes your stress test!

Suzy

mike73

6:18 pm on Apr 28, 2007 (gmt 0)

Wow, SuzyUK, thank you very much for all the detailed help. Your solution worked great! The only thing that didn't work was that I actually needed an instance clear:both that you said I didn't need, but whatever, I'm very grateful for your help. Thank you!