From: Scott Holdeman <[EMAIL PROTECTED]> >My demo page: >http://demo.tectonicsolutions.com/test/ie_3px_fix.html > >I am wanting to float an image (block) to the left of a container then >using a large left margin position the accompanying text in what would >become a right column. > >I am encountering the 3px jog bug in ie but the Holly Hack is not entirely >working for my needs because following paragraphs are not getting indented.
First, take a look at your code. Even when you create demos (especially?) you should make sure that you are dealing with valid code. You have four instances of two different IDs on your page. While I don't think that is causing any problem for IE in this case, you still should change those to classes for the purposes of reusing them on the same page. Additionally, you have wrapped two paragraphs in a span in your last example. Paragraphs are block elements and therefore cannot be placed within a span (an inline element). If you change that element to a div, you will have greater success in getting what you want. Finally, you have competing selectors that are making it impossible for browsers to do what you want them to do. The following should do what you'd like, assuming you're willing to wrap your right column content in a div. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"; > < html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en" > < head > < title >Three Pixel Gap Fix< /title > < meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" / > < style type="text/css" > body { margin: 20px ; padding: 0; font-size: 80%; background: #cdc; font-family: verdana,sans-serif; } #wrapper { /*** This wrapper is just to make the demo the same at all screen sizes. ***/ width: 500px; border: 3px solid red; margin: 0 0 50px 0; } #floatbox { float: left; width: 100px; height: 50px; font-size: 1.4em; font-weight: bold; color: #46d; background: #6d6; } p {background: #dd9;} #textbox {margin: 0 0 0 110px;} #textbox p { margin: 0; border: 1px solid #fff; } /* \*/ * html #textbox { height: 1%; argin-left: 0; } /* */ < /style > < /head > < body > < div id="wrapper" > < div id="floatbox" > Float < /div > < div id="textbox" > < p > The red bordered box is a wrapper to give the demo a consistent width, and has no effect on the various IE problems in question. It can be eliminated without changing the jog fix.< br / > This paragraph (black border) should have a 10px gap between it and the float. There will be no 3px text jog within the paragraph where the float ends in IE/win. Take that, M$! Buahaha!!< br / > < /p > < p > The red bordered box is a wrapper to give the demo a consistent width, and has no effect on the various IE problems in question. It can be eliminated without changing the jog fix.< br / > This paragraph (black border) should have a 10px gap between it and the float. There will be no 3px text jog within the paragraph where the float ends in IE/win. Take that, M$! Buahaha!!< br / > < /p > < /div > < /div > < /body > < /html > (Do note that there are spaces added in all the tags in the above example so that my mail client doesn't render the HTML.) I hope that helps, ~holly ______________________________________________________________________ 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/
