height/width problems

Forum Moderators: not2easy

Message Too Old, No Replies

height/width problems

dragon master mokuba

11:03 am on Feb 16, 2010 (gmt 0)

I have two divs, one inside the other. the inside div has some text and an image. the divs height is smaller than the height of the image. this should cause the image to extend past the div, not the div extending to fit the image. it works in webkit/gecko browsers, not others like ie and opera. Using overflow:hidden brings the divs to normal height, but i need the images on top, not cut off.

Example code:


<html>
<head>
<title>Test 1</title>
<style type="text/css">
#div1 {
margin: 75px auto 0px auto;
background: red;
width: 250px;
height: 200px;
}
#div2 {
background: blue;
width: 230px;
height: 180px;
position: relative;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<img height="250px" width="500px">
</div>
</div>
</body>
</html>

bzgzd

1:55 pm on Feb 16, 2010 (gmt 0)

I tried this in different browsers so just for info:
For me this works correct in Opera 10.10

It works also correct in IE 8 and IE 7 with strict doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

but in IE 6 divs are extended also with strict doctype

Without doctype or not strict also IE 8 expand divs and put them to the left.

If you can use strict doctype it will help.
And also setting for image position: absolute; can help for ie6

birdbrain

2:01 pm on Feb 16, 2010 (gmt 0)

Hi there dragon_master_mokuba,

this example may possibly help your cause....


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Test 1</title>

<style type="text/css">
#div1 {
width:250px;
height:200px;
margin:75px auto 0;
background-color:#f00;
}
#div2 {
position: relative;
top:10px;
left:10px;
width:230px;
height:180px;
background-color:#00f;
}
#div2 img {
 position:absolute;
 top:30px;
 left:30px;
 width:500px;
 height:250px;[blue]
 background-color:#0f0; /*this is for display purposes only*/[/blue]
 }
</style>

</head>
<body>

<div id="div1">

<div id="div2">
<img src="myimage.jpg" alt="my image">
</div>

</div>

</body>
</html>

birdbrain