html - Why my styles are breaking when I try to apply a clear fix method? -


i'm working on page here skeleton inside of body tag:

<div id="site-nav-container">     <nav id="page-navigation"></nav> </div> <header id="site-header"></header> <div class="content-container clearfix">     <section id="blog-post-sum"></section>     <aside id="site-sidebar"></aside> </div> <footer id="site-footer"></footer> 

so here facing: styling purpose had float section "blog-post-sum" id left , float aside id "site-sidebar" right. prevent margin collapse wrapped section , aside tag in div container , gave "clearfix" class use clear-fix method. method used follows:

.clearfix:before, .clearfix:after {     content: "";     display: table; } .clearfix:after {     clear: both; } <!--[if  lt ie 8]> /*for ie < 8(trigger haslayout)*/ .clearfix {     zoom: 1; } <![endif]--> 

it works charm problem if try put method in begging of css file styling rules right after clear fix method breaks. that! please me find out solution solve problem.

you have invalid comments in css:

<!--[if  lt ie 8]> ... <![endif]--> 

this comment html file. won't work in css file.

you can either move entire comment chunk html file (don't recommend) or consider using way target less-than ie8 browsers. here's how boilerplate used handle until (in html file, replace <html> tag this):

<!--[if lt ie 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> <!--[if ie 7]> <html class="lt-ie9 lt-ie8 ie7" lang="en"> <![endif]--> <!--[if ie 8]> <html class="lt-ie9 ie" lang="en"> <![endif]--> <!--[if ie 9 ]> <html class="ie9" lang="en"> <![endif]--> <!--[if (gt ie 9)|!(ie)]><!--><html lang="en"> <!--<![endif]--> 

this adds class html tag indicating browser. can target in css this:

.lt-ie8 .clearfix {     zoom: 1; } 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -