{"id":137,"date":"2005-09-21T16:48:03","date_gmt":"2005-09-21T14:48:03","guid":{"rendered":"http:\/\/www.maratz.com\/blog\/archives\/2005\/09\/21\/common-css-forgettables-part-1\/"},"modified":"2006-04-06T20:57:23","modified_gmt":"2006-04-06T18:57:23","slug":"common-css-forgettables-part-1","status":"publish","type":"post","link":"http:\/\/www.maratz.com\/blog\/archives\/2005\/09\/21\/common-css-forgettables-part-1\/","title":{"rendered":"Common CSS Forgettables Part 1"},"content":{"rendered":"<p>This post is a quick reminder to all of us who code and test web sites on Macs. We often take some common Safari behavior for granted, but the reality is a little bit different. No matter how much one dislikes PCs and has an aversion to anything but the divine Mac OS, the truth is &#8211; <a href=\"http:\/\/www.thecounter.com\/stats\/2005\/September\/browser.php\">there&#8217;s more visitors with IE5.x than with Safari<\/a>. Said that, here\u2019re the most common CSS flaws. Workarounds included.<!--more--><\/p>\n<h3>Negative text-indent and underline<\/h3>\n<p>This one is huge. Even the most respected standards aware ladies and gentlemen are forgetting it, project after project.<\/p>\n<p>The <a href=\"http:\/\/phark.typepad.com\/phark\/2003\/08\/accessible_imag.html\">Phark image replacement<\/a> is very popular, since the screen reader is still able to read the replaced content. Here\u2019s the common HTML and CSS setup:<\/p>\n<pre>...\r\na.replaced {\r\n    display: block;\r\n    width: 100px;\r\n    height: 50px;\r\n    text-indent: -9999px;\r\n    background: url(cool_image.gif);\r\n}\r\n...\r\n&#60;a class=\"replaced\" href=\"http:\/\/www.coolsite.com\/\">Cool site&#60;\/a>\r\n...<\/pre>\n<p>No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the <a href=\"http:\/\/www.mozilla.org\/products\/firefox\/\">Firefox<\/a>. So, even though the text itself is virtually somewhere in the next room, I\u2019d say 3.5 meters to your left, the space of the link itself is right there where it has always been &#8211; in the browser on your screen.<\/p>\n<p>The trouble is &#8211; nobody likes too many default underlines in their designs, but one often applies underline for the <code>hover<\/code> state, simply to inform the user about interaction existence for the given element. It\u2019s usually done at the beginning in a CSS as a site-wide generic rule and by the time you start styling those replaced links, you completely forgot about the underlines.<\/p>\n<p>The workaround is more than obvious and it\u2019s best to apply it automatically:<\/p>\n<pre>...\r\na.replaced,\r\n<strong>a.replaced:hover<\/strong> {\r\n    display: block;\r\n    width: 100px;\r\n    height: 50px;\r\n    text-indent: -9999px;\r\n    background: url(cool_image.gif);\r\n    <strong>text-decoration: none;<\/strong>\r\n}\r\n...\r\n&#60;a class=\"replaced\" href=\"http:\/\/www.coolsite.com\/\">Cool site&#60;\/a>\r\n...<\/pre>\n<p>To be continued&#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post is a quick reminder to all of us who code and test web sites on Macs. We often take some common Safari behavior for granted, but the reality is a little bit different. No matter how much one dislikes PCs and has an aversion to anything but the divine Mac OS, the truth [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/137"}],"collection":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":0,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.maratz.com\/blog\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}