some text
Geek Answers Handbook

IE float fix in css

<div id="simg1" style="display: inline"> <img src="images/image.jpg"> </div> <div id="sbdy"><a href="www.google.com">some text</a></div> CSS Style: #simg1 { background-color: #fff; float: left; width: 85px; height: 80px; border-width:5px; border-right: solid 2px #fdd61e; border-left-top: solid 25px #fdd61e; border-left: solid 3px #fdd61e; border-top: solid 3px #fdd61e; border-bottom: solid 3px #fdd61e; border-radius: 15px 0px 0px 15px; overflow: hidden; } #sbdy { background-color: #fff; position: relative; color: #000; float: left; width: 160px; height: 75px; padding: 5px 6px 0px 2px; border-right: solid 3px #fdd61e; border-top: solid 3px #fdd61e; border-bottom: solid 3px #fdd61e; border-top-right-radius: 15px 15px; border-bottom-right-radius: 15px 15px; }

This code works fine in every browser, but in IE a text div appears below the image. There is no problem with the width since I tested it with a larger width. I tried everything, but I can’t figure out how to fix this error.

+4
source share
2 answers

There is a double float error that is neutralized by the display: inline and DOCTYPE standards. - Crof Dracula

This is the correct answer given by Crof Dracula to my question. I had to choose the answer to my question.

+4
source

I would suggest looking in jquery, they usually have plugins for this.

I think that depending on your version of IE, they work differently in each version. I would try to play with the position: relative ;. I had the same problem for IE7 with one of my floating divs and giving position: absolute; did the trick.

0
source

More articles:


All Articles