I have been wracking my brain over some IE issues with some CSS I am trying to use. The site being developed can be found [URL=http://www.dev.ircdig.com/products.html]here[/URL] . I am trying to float an image to the top right of a text box. It looks fine in ALL browsers except IE. In IE the image appears above the text box and I can not get it anywhere close even using negative margins. Even if I could, this would throw off all other browsers. Is there something I am doing wrong? Is there any way I can get this to look like it does in FireFox in IE?
@toicontienDec 29.2005 — #First thing, I noticed in your code that you've nested <p> tags inside each other, and tables inside <p> tags. Change them to DIVs for the sake of valid HTML. Some browsers can be quirky about nesting tags properly. However, I don't think that will solve your problem. [code=html] <div style="width: 70%;"> <img class="floatright" src="/images/basket-weave.gif" alt="" width="150" height="135"> <div style="width: 60%; text-align: left;" class="description"> <table cellspacing="0" cellpadding="0"> <tr align="left"> <td colspan="2"><b>Basket Weave Card Box with Pearls or Rhinestones</b></td> </tr> <tr align="left"><td colspan="2"> </td></tr> <tr align="left"> <td colspan="2"> This card box is made with satin fabric and ribbon and is accented with pearls. This card box can be made in white or ivory and your choice of ribbon color. </td> </tr> <tr align="left"><td colspan="2"> </td></tr> <tr align="center"> <td width="50%" align="left" class="navlink"><a href="">More Details</a></td> <td width="50%" align="right"><b>Price: $35.00</b></td> </tr> </table> </div> </div> [/code]
Your problem actually stems from not understanding the hasLayout Document Object Model property in Internet Explorer. It's the savior of Web designers trying to hack a layout into line for IE-Win, and the bane of Web designers because it changes IE-Win's behavior. Sometimes fairly drastically.
The above snippet of code is your problem. The floated image is outside that DIV with the 60% width. Giving that DIV a width trips the hasLayout property in IE-Win, which makes any floated elements [i]outside[/i] of the DIV float along side it, not over top of it as per the CSS spec. Move the image inside the 60% wide DIV.
I made the changes suggested and removed the tables. It now at least looks the same in both browsers; however, the image is inside the border of the "description" class when it is suppose to be hanging off the corner (half in and half out, like the others). How can I get from where I am at now to where I want to be?
I left the others the way they were and only changed the top one so you can see what I am wanting it to look like if you view the site in FireFox.