html - Why is there extra "white space" between these floated Div's in FF and not IE? -
Why is there so much extra space between two blocks in Firefox?
& lt; Html & gt; & Lt; Top & gt; & Lt; Style type = "text / css" & gt; # Container-9 00px {Width: 900px; Padding: 10px; Limit: 1px solid #CCCCCC; } # Container-900px Left {float: left; Width: 435px; Height: 300px; } # Container-900px .right {float: right; Width: 435px; Height: 300px; } / * Float clearing for IE6 * / * html. Chalerphics {height: 1%; Overflow: visible; } / * Float Clearing for IE7 * / * + html Chalerphics {Hi-height: 1%; } / * Float clearing for everyone * / .clearfix: after {clear: both; material: "."; Display area; Height: 0; Visibility: hidden; Font-size: 0; } / * CSS3 styles * / # container-900px {-moz-box-shadow: 0px 0px 12px #CCC; / * Firefox * / -bid-box-shadow: 0 px10px12pxl #ccc; / * Safari, Chrome * / Box-Shadow: 0 px 0 px 12 pixels # ccc; / * CSS3 * ## Container-9 900px Left {background-color: RGB (238, 238, 238); } # Container-900px .right {background color: RGB (238, 238, 238); } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; H1 & gt; Software & lt; / H1> & Lt; Div id = "container-900px" & gt; & Lt; Div class = "left" & gt; & Lt; / Div & gt; & Lt; Div class = "right" & gt; & Lt; / Div & gt; & Lt; Div class = "clearfix" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
Because it is omitted which renders IE (which is bad) . If you have accepted it, then it should also be disqualified about the missing substance.
By linking a hard doctype, HTML and CSS should be consistent between all major browsers (except for the fact that MSIE still skips potentially to fix has gone).
& lt ;! Doctype html & gt; & Lt; Html lang = "en" & gt; & Lt ;! - Here you go - & gt; & Lt; / Html & gt;
Even further
# container-9 00px A width of left
and# container-900px .right
445px
so that it fits well with the 10px margin of the container.# container-9 00px Left {float: left; Width: 445px; Height: 300px; } # Container-900px .right {float: right; Width: 445px; Height: 300px; }
In this way it looks good and similar in all browsers.
Comments
Post a Comment