DIV background, IMG float: right / IE problem

Images below DIV, that they are inside him

[gregbike]

Hello Everybody,

i have a problem with my CSS layout and IE browser v6.0.

I have HTML code (4.01):

<DIV CLASS="product_list" STYLE="background: red;">
  <H1><IMG SRC="some_image.jpg" class="image">Name of product</H1>
  <P>Product description [...]</P>
</DIV>

And I have CSS in external file:

DIV.product_list {position: relative; top: 0px; left: 0px; right: 0px; padding: 10px;}
IMG.image   {float: right;}

Now, in FF is everything all right, the product image is align to right. But in IE, image is hidde. It looks like image is bellow DIV what have background set to red. But image is inside this div.

I have the same effect if I set <IMG> tag to ALIGN=RIGHT attribute.

What I have to do? Please help.

Best regards,
Greg

[4css]

Hi, Welcome to WebmasterWorld!

I'm not sure, but I think it could be because you have the image within the heading element? Remove the heading element and just put in your image element and see what happens.

Also, there are some elements which add default space depending on which browser you are using, this could be the problem here as well because there is default spacing around your header.

In your style sheet or the begining of your embedded styles you can put a global style like this:
* {
margin: 0px;
padding: 0px;
border: 0px;
}

Then as you need to place these within your styles you can do so as you need them. Like within the h1, you might want to have a margin of 5px's so you add that at the h1 rule. (I hope this makes sense for you!)

[gregbike]

Hi,

thanks for your reply ~4css.

I resolve this problem now.

IE, must have to set width, atributte in CSS for DIV with background and IMG tag inside (if IMG have float or align).

Big thanks again!

Regards,
Greg