Forum Moderators: not2easy
In firefox, sometimes on a page load where we are serving images dynamically and not defining the height, the floated divs we have come outside of their parent div and lay ontop of the image. If i refresh the page though everything is correct. Is there something I can do to make sure the div stays inside the parent?
The div that comes out is the second div with width 588.
Here is the code we are using:
<div style="width:593; padding: 3;">
<div style="background-color:#eeeeee; position: absolute; width: 588;">
<div style="float: left;" class="true14"><strong><a href="/users/1.html" id="ud">admin</a></strong> writes:</div>
<div style="float: right;"> (10/04/05) Post id <a name="69"></a><a href="#69" id="ud">69</a></div>
</div>
this is my comment
</div>
This may not be the problem solver but it will then be using W3C standards.
Question:
Are all your images 588 in width?
Yes all images are actually 575 (we autothumbnail when users upload) - height is the only variable.
<!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" xml:lang="EN" lang="EN">
<head>
<title></title>
<style type="text/css" media="screen">
<!--
.clear{
clear:both;
}
-->
</style>
</head>
<body>
<div style="width:593px; padding:3px; background-color:#666666;">
<div style="background-color:#eeeeee; position:relative; width:593px;"><img src="any.gif" width="593" height="365" />
<div style="float: left;" class="true14"><strong><a href="/users/1.html" id="ud">admin</a></strong> writes:</div>
<div style="float: right;"> (10/04/05) Post id <a name="69"></a><a href="#69" id="ud">69</a></div><br class="clear" />
</div>
this is my comment
</div>
</body>
</html>
The BGcolor in the first div is just for testing.
You must also apply px etc. to your padding otherwise it wont work.
I take it you want the first div to be 593px + 3 + 3 + 3 + 3, having a total width of 599px and padding top and bottom of 3px.
With you placing the <div> as "absolute" your first div isnt being expanded, i´ve changed it to relative and it works for me here in 3 browsers.
I have also changed the image and container div widths, filling the size of the wrapper(main div)
I hope you can do something with this and if it helps great stuff.
