I am trying to switch over to css for my clients instead of continuing to use tables. My design works in IE8 and IE7, but not in IE6. It seems to render using the old box model where padding + width/height is the size that things appear...however i thought this only happens in quirks mode for IE6...my page is valid xhtml strict. thoughts: http://kashurbamultimedia.com/somersettrust/design1/template.html
That's what I thought as well but I just checked. Apparently around 10% of people still do! http://www.w3schools.com/browsers/browsers_stats.asp
About 5 years ago, when I first got into web development, I complained IE6 was the worst browser on the planet and everyone should switch to Opera or this new Firefox browser. I was told how stupid I was and IE6 was the greatest in the world. People got much smarter since then. IE7 and IE8 are much better than IE6 but are inept compared to any other browser. W3Schools shows stats for technical people visiting that site. IE6 usage is 20% unfortunately and mostly among large corporate users.
Taking a look at the page - I'm not TOO surprised you have issues. You've got the farthest thing from semantic markup you can have while still validating in a strict doctype - which frankly I'm trying to figure out why the validator isn't bitching about the lack of legends in your fieldsets... wait, or the 'required' for parameter... How the *** is this validating as strict? I think you've got some deeper issues in there as I'm seeing elements that the validator SHOULD be throwing errors on and it's not! Bad character encoding or premature null acting as a 'end' or something? You've thrown div's around everything willy-nilly, have a nonsensical heading order to the point you might as well have not bothered using headings (jumping from H1 to H5, are those h5's subsections of the h1? NOT!) use nonbreaking spaces, vertical breaks and horizontal rules to do padding and border's job, do NOT compensate in the CSS for LI's white-space, and have piss poor graceful degradation images off. That you are wasting time throwing that stupid conditional comment nonsense at IE to send it a different CSS file instead of writing one CSS that works in everything is just icing on the cake; Since a few haslayout triggers and margin-fixes on floats is usually all you need. I'm increasingly convinced that the majority of people's layout problems in IE have NOTHING to do with IE or CSS and everything to do with outdated/invalid/just plain broken MARKUP. Had I written that same page, the markup would probably be something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <title> $pageTitle - Somerset Trust Company </title> </head><body> <!-- empty tags like SPAN, B and DEL below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! Horizontal rules and .jumpto menus should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> Somerset <span>Trust <small>Company</small></span> <b></b> </h1> <form action="" method="post" id="search_form"> <div> <input name="submit" type="button" name="search_button" value="Search"/> <input name="search" type="text" name="search_text"/> </div> </form> <ul id="topMenu"> <li><a href="">Promotions</a></li> <li><a href="">Account Switch Kits</a></li> <li><a href="">Upcoming Events</a></li> <li><a href="">Rates</a></li> </ul> <ul id="mainMenu"> <li><a href="" class="current">Home</a></li> <li><a href="">Personal</a></li> <li><a href="">Business</a></li> <li><a href="">Online Services</a></li> <li><a href="">Investments</a></li> </ul> <div id="content"> <img src="images/large_image.jpg" alt="Somerset Trust to Establish Branch in Vicino, PA!" width="570" height="305" /> <h2>Welcome to Somerset Trust Company!</h2> <p> Aenean neque diam, tincidunt sed gravida ac, dignissim vitae lacus. Donec et libero vulputate nisi interdum euismod. Aliquam volutpat consectetur eros vitae euismod. Morbi diam orci, imperdiet at venenatis et, eleifend vitae elit. Aliquam gravida vestibulum urna, vel vehicula erat sodales at. In porta metus non quam imperdiet suscipit. Pellentesque lacinia facilisis ante. Cras fringilla congue tempor. </p><p> Quisque lectus lacus, porttitor id hendrerit at, semper vitae tellus. Donec sit amet augue ipsum. In vestibulum congue mattis. Donec egestas semper imperdiet. Pellentesque vitae est id purus consequat auctor. Aliquam erat volutpat. Mauris nisl erat, porta eu sollicitudin et, rutrum sed enim. Proin rhoncus dui id nibh congue et vulputate tortor luctus. Suspendisse ut bibendum sem. </p> <!-- #content --></div> <div id="sideBar"> <div class="borderBox"> <form action="" method="post" id="login"> <fieldset> <legend><span><b></b>Account Login</span></legend> <label for="username"> Username: <input id="username" name="username" type="text" /> </label><br /> <label for="password"> Access Code: <input name="password" type="password" id="password" /> </label><br /> <input name="submit" type="image" value="Login" src="images/sign_in.jpg" alt="sign in button" /><br /> <a href="">Register</a> <a href="">Forgot Password?</a> </fieldset> </form> <!-- .borderBox --></div> <div class="borderBox"> <form action="" method="post"> <fieldset> <legend><span><b></b>Other Secure Logins</span></legend> <select name="others_secure_logins"> <option>Please Select Login »</option> <option>Credit Card Login</option> <option>Trust Account Login</option> </select> </fieldset> </form> <!-- .borderBox --></div> <div class="borderBox"> <h2><i></i>Links of Interest</h2> <div class="borderContent"> <p> Aliquam erat volut Mauris nisl erat, porta eu sollicet, rutrum sed enim. </p> <ul class="linksOfInterest"> <li><a href="">« Mauris nisl erat</a></li> <li><a href="">« Porta eu sollicitudin</a></li> <li><a href="">« Aliquam erat</a></li> <li><a href="">« Aliquam lorem</a></li> </ul> <!-- .borderContent --></div> <!-- .borderBox --></div> <!-- #sideBar --></div> <div id="footer"> <ul> <li class="first"><a href="">Privacy</a></li> <li><a href="">Security</a></li> <li><a href="">Notices</a></li> <li><a href="">Terms of Use</a></li> <li><a href="">Site Map</a></li> <li><a href="">Contact Us</a></li> </ul> <img src="images/small_logo.jpg" alt="somerset trust company" width="67" height="23" class="footerLogo" /> <img src="images/memberships.jpg" alt="member fdic" width="100" height="39" class="memberFDIC" /> <p> © 2010 Somerset Trust Company. All rights reserved.<br/> This page last modified: February 18, 201 </p> <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): I have time later I'll write up the CSS to show you the difference in approach.
... and here it is. http://www.cutcodedown.com/for_others/jkashu/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/jkashu/ Is unlocked so you can grab the gooey bits. Valid XHTML 1.0 strict, would be valid CSS 2.1 if not for the use of zoom and -moz to make IE and gecko behave. Tested working 100% in IE 5.5, 6, 7 & 8, Opera 9.6 and 10.10, FF 2 & 3.6, and the latest flavors of safari and chrome. Not too tricky. Gilder-levin image replacement on the h1, switched it to png with some CSS sliding backgrounds taking it down from 159k in 20 files to 79k in 13 files, now has graceful degradation for images off and CSS off, etc, etc... Hope this helps, or at least points you at where you were constantly getting buggered in IE.