[thelist] IE display behavior - image too wide for window

Michael Slater michaels at adobe.com
Sun Feb 26 20:04:27 CST 2006


I'm struggling with a display behavior that I'm hoping folks on the list
will recognize.
 
Take a look at www.boatingsf.com/test.html. Try it in IE and in Firefox, and
try narrowing your window size as you look at it in each.
 
There is a fixed-width div floated to the left, and then a picture in a div
that sits next to it. It is a very simple piece of code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE display bug test</title>
</head>
 
<body>
<div style='background-color: #99BBDD; float: left; width: 180px;
height:200px;'>
<p>Left Bar</p>
</div>
 
<div style='margin-left: 185px;'>
<img src='/photos/031105/DSC00727_edited-1.jpg'>
</div>
 
</body>
</html>
 
As long as the window is big enough to display the whole picture, Firefox
1.5 and IE 6 both show the same, expected behavior. But if the window is too
narrow to display it all, Firefox just truncates the right edge of the
picture (which is the behavior I want), whereas IE knocks the start of the
image down below the end of the left bar (which is a big problem!).
 
Am I doing something wrong here? Or is there a bug in IE that I need to work
around?
 
Thanks,
 
Michael Slater




More information about the thelist mailing list