I have been learning different styles of CSS models and would like to how bad or acceptable this cross-browser HTML/CSS Markup is? Is it done right? What is it missing? I would highly appreciate any pointers or feedbackHERE IS THE LIVE EXAMPLECSS body { margin:0; padding:0; background:rgba(255,255,255,1.0); font-family:'arial'; font-size:.8em; } .wrapper { overflow:auto; width:100%; height:100%; background:rgba(85,85,85,0); } .siteWrapper { margin:0 auto; padding:.5em; width:80%; height:auto; background:rgba(255,255,255,1); } .header { padding:.5em 0 .5em 0; width:100%; height:auto; background:rgba(135,125,125,0); } .header ul {margin:0; padding:0; text-align:right;} .header li {list-style-type:none; display:inline;} .header li a { display:inline-block; margin:0 1em; text-decoration: none; color:#ff6644; curson:hand; } .banner { width:100%; min-height: 350px; height:auto !important; height: 350px; margin:.2em 0 .5em 0; background:rgba(240,240,240,.5); } .content { width:100%; min-height: 200px; height:auto !important; height: 200px; background:rgba(240,240,240,.5); } .footerWrapper { overflow:auto; margin:0; padding:0; width:100%; min-height:100px; height:auto !important; height:100px; background:rgba(0,0,0,.5); } .footer { margin:0 auto; padding:1em; width:79%; height:auto; background:rgba(255,255,255,0); } .textCenter { text-align:center; }HTML <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> <link rel="stylesheet" type="text/css" media="screen" href="http://stackoverflow.com/questions/15455130/assets/css/style.css"> </head> <body> <!-- WRAPPER --> <div id="wrapper" class="wrapper"> <!-- SITE WRAPPER --> <div id="siteWrapper" class="siteWrapper"> <!-- HEADER --> <div id="header" class="header"> <ul> <li><a href="http://stackoverflow.com/questions/15455130/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15455130/#">About</a></li> <li><a href="http://stackoverflow.com/questions/15455130/#">Work</a></li> <li><a href="http://stackoverflow.com/questions/15455130/#">Contact</a></li> </ul> </div><!-- HEADER ENDS HERE --> <!-- BANNER --> <div id="banner" class="banner"> BANNER GOES HERE </div><!-- BANNER --> <!-- CONTENT --> <div id="content" class="content"> CONTENT HERE </div><!-- CONTENT ENDS --> </div><!-- SITE WRAPPER --> <!-- FOOTER WRAPPER --> <div id="footerWrapper" class="footerWrapper"> <!-- FOOTER --> <div id="footer" class="footer textCenter"> FOOTER </div><!-- FOOTER --> </div><!-- FOOTER WRAPPER ENDS --> </div><!-- WRAPPER END --> </body> </html>
Cross Browser HTML markup?
- Thread starter 3234ja
- Start date