{"id":285,"date":"2006-11-22T23:25:13","date_gmt":"2006-11-22T14:25:13","guid":{"rendered":"https:\/\/regex.info\/blog\/2006-11-22\/285"},"modified":"2006-11-22T23:25:13","modified_gmt":"2006-11-22T14:25:13","slug":"internet-explorers-selective-understanding-of-css","status":"publish","type":"post","link":"https:\/\/regex.info\/blog\/2006-11-22\/285","title":{"rendered":"Internet Explorer&#8217;s Selective Understanding of CSS"},"content":{"rendered":"\n\n<p>I've decided to take a gamble and Windows Update into SP2 and beyond\nagain. I've done it a <a\nhref=\"\/blog\/2006-02-10\/146\">number<\/a> of <a\nhref=\"\/blog\/2005-09-23\/75\">times<\/a> in the past, to\ndisastrous results (<span class='nobr'>a system<\/span> that's flaky even by Microsoft standards,\ncrashing every few hours). I've been living at pre-SP2 for <span class='nobr'>a long<\/span> time,\nwith <span class='nobr'>a machine<\/span> that crashes only every few days, but lately it's gotten\nworse. <span class='nobr'>I made the<\/span> mistake of using IE to see something that didn't seem to\nwork in Firefox, and <span class='nobr'>I wonder<\/span> if <span class='nobr'>I picked<\/span> up something bad, because the\nmachine seemed much more flaky after that.<\/p>\n\n\n\n<p>So, <span class='nobr'>I did a<\/span> full Windows Update (having to reboot <span class='nobr'>a miraculously<\/span>-little\nthree times), upgrade to IE7, and ran Microsoft's anti-spyware <a\nhref=\"http:\/\/www.microsoft.com\/athome\/security\/spyware\/software\/default.mspx\">Windows\nDefender<\/a>. It didn't find anything amiss, and <span class='nobr'>I haven't<\/span> crashed in the 8\nhours since, so maybe things are okay this time? <span class='nobr'>I won't<\/span> hold my breath,\nthough.<\/p>\n\n<p>Anyway, so now I'm preparing a web post with <a\nhref=\"\/blog\/2006-11-22\/286\">more fall foliage pics<\/a>\nfrom my <a href=\"\/blog\/2006-11-21\/284\">trip yesterday<\/a>,\nand in testing with IE7, <span class='nobr'>I realize<\/span> that if you don't have a\n<b>&lt;DOCTYPE&gt;<\/b> declaration, it doesn't understand some CSS, but\noddly, does understand some. Specifically, <span class='nobr'>I noticed<\/span> that it doesn't\nunderstand <b>padding<\/b> ascribed to an image, but does understand\n<b>margin<\/b>. This seems..... odd.<\/p>\n\n<p>Here's a test that should look fine on this page, because it has <span class='nobr'>a DOCTYPE<\/span>:<\/p>\n<style type=\"text\/css\">.invis { display: none }<\/style>\n\n<div class='invis'><p>(See this <a href='\/blog\/2006-11-22\/285'>blog post<\/a>\nfor information about this CSS test)<\/p><\/div>\n\n<p>Three images with red borders, each within its own green-background\n<b>div<\/b>: the only difference among them is that the center image has a\n<b>margin<\/b>, and the right-most has <b>padding<\/b> (the left-most has\nneither).<\/p>\n\n<table border='0' cellpadding='20' style='border: solid 1px black; margin:20px auto'>\n<tr align='center'><td>In upper-left<\/td><td colspan='2'>&mdash;&mdash;&mdash; Should be Centered &mdash;&mdash;&mdash;<\/td><\/tr>\n<tr><td>\n\n  <div style='background-color:green; width:142px; height:92px'>\n    <img loading=\"lazy\" decoding=\"async\" noindex='1' src=\"\/i\/gray_100x50.jpg\" width=\"100\" height=\"50\" style='border: solid 1px red'\/>\n  <\/div>\n\n<\/td><td>\n\n  <div style='background-color:green; width:142px; height:92px'>\n    <img loading=\"lazy\" decoding=\"async\" noindex='1' src=\"\/i\/gray_100x50.jpg\" width=\"100\" height=\"50\" style='border: solid 1px red; margin: 20px'\/>\n  <\/div>\n\n<\/td><td>\n\n  <div style='background-color:green; width: 142px; height:92px'>\n    <img loading=\"lazy\" decoding=\"async\" noindex='1' src=\"\/i\/gray_100x50.jpg\" width=\"100\" height=\"50\" style='border: solid 1px red; padding: 20px'\/>\n  <\/div>\n\n<\/td><\/tr>\n<tr align='center'>\n  <td>no margin\/padding<\/td>\n  <td>margin:20px<\/td>\n  <td>padding:20px<\/td>\n<\/tr>\n<\/table>\n\n<div class='invis'><p>If both <b>margin<\/b> and <b>padding<\/b> are\nunderstood, the image should be centered within the center and left-most\ngreen boxes.<\/p><\/div>\n\n\n<p>However, if you view it on a <a\nhref=\"\/blogposts\/IE7-include.html\">standalone page without\n<span class='nobr'>a DOCTYPE<\/span><\/a>, it suddenly no longer recognizes the <b>padding<\/b>, so the\nright-most image is no longer centered within its <b>div<\/b>.<\/p>\n\n<p>The solution is to include a <b>DOCTYPE<\/b> for all pages, such as:<\/p>\n\n<pre style='color:#888; font-size:85%; border: solid 1px #888; padding: 5px 10px'>\n&lt;!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\"\n                      \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\"&gt;\n&lt;html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"&gt;\n<\/pre>\n\n<p>But this just seems silly to me, and of course, Firefox and Safari don't\nhave such <span class='nobr'>a selective<\/span> understanding of CSS.<\/p><p>Sigh.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>I've decided to take a gamble and Windows Update into SP2 and beyond again. I've done it a number of times in the past, to disastrous results (a system that's flaky even by Microsoft standards, crashing every few hours). I've been living at pre-SP2 for a long time, with a machine that crashes only every few days, but lately it's gotten worse. I made the mistake of using IE to see something that didn't seem to work in Firefox, and I wonder if I picked up something bad, because the machine seemed much more flaky after that.<\/p> <p>So, I did [...]","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/posts\/285"}],"collection":[{"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/comments?post=285"}],"version-history":[{"count":0,"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/posts\/285\/revisions"}],"wp:attachment":[{"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/media?parent=285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/categories?post=285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/regex.info\/blog\/wp-json\/wp\/v2\/tags?post=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}