Matthew Hackett wrote:
I'm new to the group ...
Hi Matthew.
... It involves an image loading and occasionally jumping
across the page to the left and covering up the navigation ...
http://www.colourgen.com/printers/kodak_1200i_offer.php (keep
refreshing the page until it goes wrong)
<div class="content">
<h1>...</h1>
<p><img src=... class="float_img" height="152" width="200">
Take advantage of one of our two great offers when you ... </p>
You had to relatively position the floating image to prevent it from
disappearing, but now its positioned with no stable origin in IE: its
parent P is not positioned nor dimensioned.
So the options are at least
A: add position:relative to the parent P
B: add a dimension to the parent P and remove the position:relative from
the IMG
C: Take the image out of the P and remove the position:relative.
<div class="content">
<h1>...</h1>
<img src=... class="float_img" height="152" width="200">
<p> Take advantage of one of our two great offers when you ... </p>
I doubt if option A is a good one. In IE, position:relative is just too
buggy, but it depends. As in this case and in several others [1],
applying position:relative to a float to fix one bug often leads to
another bug which needs consecutively position:relative on the parent
... And you have to add an inline style or a separate class just to fix it.
Option B will end in containing the float, that means, the subsequent
paragraphs will start beyond the image's lower edge. Not good.
And C leads to the question why you initially had placed the image
inside the p. For vertically aligning the image and the first paragraph,
you should zero the margins and paddings of the H1 and P to bring all
the browsers in par, and then apply appropriate margins to the H1, P and
the img.float_img
Ingo
[1] http://archivist.incutio.com/viewlist/css-discuss/64573
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
