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

Popular posts from this blog

sql - dynamically varied number of conditions in the 'where' statement using LINQ -

asp.net mvc - Dynamically Generated Ajax.BeginForm -

Debug on symbian -