Have Geek Brain

Ie7 strange floating point issue

here is the html code that gives me the problem in IE7

<div style="position:absolute;top:276px;left:194px;" class="drag layer_3">
<img class="deleteitem" height="12px" width="12px" title="Remove" src="/static/redclose.png" style="float:right;cursor:pointer;">
<img src="/static/18.png"  >
</div>

this is how it should look and it looks great in ie8, firefox

http://img200.imageshack.us/img200/189/ie8.png

but in IE7 the correct floating point image goes to the right end of the document as shown below.

http://img33.imageshack.us/img33/6239/ie7bug.png

how can i fix this? I tried to remove the height width attributes and use max-height, max-width. It did not help. many thanks

+1


a source to share


4 answers


Your question may have been answered: Floating too far!

He suggests using jQuery for this as it is written to be browser independent.



Also see the author's original solution at the bottom (not using jQuery).

+1


a source


You can either set the width of the div, or change the order of the images and float to the left instead of the right:



<div style="position:absolute;top:276px;left:194px;" class="drag layer_3">
    <img src="/static/18.png" style="float:left"  >
    <img class="deleteitem" height="12px" width="12px" title="Remove"
         src="/static/redclose.png" style="cursor:pointer;">
</div>
+2


a source


I believe this element floats to the right of the parent element "drag layer_3" as soon as you have made someone an absolute position it is out of the normal flow of documents.

+1


a source


I think we need to see .drag and layer_3. At the moment, I don't see a specific width for Remove parent. I believe the width of your div might be different in ie7. Try adding a border to it to see its calculated width.

+1


a source






More articles:


All Articles