All these bugs have been resolved in IE 7.<\/p>\n
The Peek-A-Boo Bug<\/strong> \u2013 In it the content disappears and reappears at random hence, its name. It appears in IE 6 with the use of a left float or a right float or a background on the containing element. An example is given below<\/p>\n <head><\/p>\n <style type=”text\/css”><\/p>\n body { background: #fff url(ph150_888.gif) fixed; \u00a0\u00a0\u00a0 color: #000; }<\/p>\n .container { \u00a0\u00a0\u00a0\u00a0 background-color: #bbf; }<\/p>\n .float { float: left; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width: 200px; background-color: #f00; }<\/p>\n .clearB { \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 clear: both; \u00a0\u00a0\u00a0\u00a0 height: 0; }<\/p>\n <\/style> <\/head><\/p>\n <body><\/p>\n <div class=”container”><\/p>\n <div>Sempre caro mi fu quest’ermo colle, e questa siepe, che da tanta parte de m’è dolce in questo mare.<\/div><\/p>\n <div class=”float”>float<\/div><\/p>\n <div class=”clearB”><!– –><\/div><\/p>\n <\/div> <div>After.<\/div><\/p>\n <\/body><\/p>\n The CSS and markup results in the bug as the content in the \u2018container\u2019 element is missing. Resizing the window, trying to select the text, or dragging another window over this one makes parts of it to appear and disappear. The result in IE 6 when some text is selected, is shown as<\/p>\n This bug can be resolved by<\/p>\n The Guillotine Bug<\/strong> \u2013 In it only a part of the content disappears. It appears in IE 6 due to<\/p>\n An example is given below<\/p>\n <!– Example Layout for a Guillotine Invoking Situation –><\/p>\n <div id=”container”><\/p>\n <div id=”floated”> This is the floated content. It is vulnerable to the Guillotine. <\/div><\/p>\n This is the non floated content inside the container.<\/p>\n Guillotine invoking links should be in this content.<\/p>\n <\/div><\/p>\n \/* Example Style Rules for a Guillotine Invoking Link *\/<\/p>\n a:hover {<\/p>\n background: none #FFFFCC scroll repeat 0% 0%;<\/p>\n padding: 5px;<\/p>\n text-style: italic;<\/p>\n border-bottom: #0000FF 1px solid;<\/p>\n }<\/p>\n The lines of text are missing, chopped off at the edge of the container element. The result in IE 6 when some text is selected, is shown as<\/p>\n This bug can be resolved by<\/p>\n .clear { <div class=\u201dfloat\u201d>Floated Content<\/div> <div class=\u201dclear\u201d><\/div><\/p>\n The Three-Pixel Jog<\/strong> \u2013 It causes 3 pixels of blank white space to come between text inside an element that follows a floated element and the inner border of that element. IE 6 applies 3 pixels to any inline element next to a float, even if those elements are contained by a block level element<\/p>\n An example is given below<\/p>\n <head><\/p>\n <style type=”text\/css”><\/p>\n #floatholder { position: absolute; left: 30px; top: 5em; border: 4px solid;<\/p>\n border-color: #fe6 #cb4 #a92 #ed5; width: 240px; background: #ec8;<\/p>\n }<\/p>\n #floatbox {<\/p>\n float: left;width: 65px; height: 17em;border: 6px solid #68f;<\/p>\n font-size: 1.2em; font-weight: bold; color: #46d;<\/p>\n }<\/p>\n #textwrapper { border: 2px solid #000; }<\/p>\n <\/style> <\/head><\/p>\n <body><\/p>\n <div id=”floatholder”><\/p>\n <div id=”floatbox”>Float<\/div><\/p>\n This text touches the blue float directly, and has the 3px space on the left.<\/p>\n <p id=”textwrapper”><\/p>\n This text is wrapped in a paragraph (black border), and see, the space is still there, deep inside the <p>! <\/p><\/p>\n <div id=”jog-box”><\/p>\n This box is margined on the left, the width of the float and more, to keep it separate from the float.<\/p>\n Still, the space continues, until.. hey! Where’d it got to?! Well, it appears that: no adjacent float, no 3px space.<\/p>\n <\/div><\/p>\n <div style=”clear: both;”><\/div><\/p>\n <\/div> <\/body><\/p>\n There is a space of 3 pixels between the text and the border. The result in IE 6 is shown as<\/p>\n This bug can be resolved by applying to the element which follow the float<\/p>\n![\"IE](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/IE-6-Float-Bugs-1.png\")
<\/p>\n\n
\n
![\"IE](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/IE-6-Float-Bugs-2-1.png\")
<\/p>\n\n
\nclear: both;
\nvisibility: hidden;
\n}<\/p>\n![\"IE](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/IE-6-Float-Bugs-3-1.png\")
<\/p>\n
![\"IE](\"http:\/\/www.vskills.in\/lms\/wp-content\/uploads\/2016\/07\/IE-6-Float-Bugs-4-1.png\")
This bug can be resolved by applying to the element a display: inline declaration to the floated element.<\/p>\n