{"id":1000498,"date":"2007-03-28T11:51:01","date_gmt":"2007-03-28T16:51:01","guid":{"rendered":"http:\/\/www.elharo.com\/blog\/software-development\/web-development\/2007\/03\/28\/styling-abbr-with-css\/"},"modified":"2007-04-01T09:16:29","modified_gmt":"2007-04-01T14:16:29","slug":"styling-abbr-with-css","status":"publish","type":"post","link":"https:\/\/www.elharo.com\/blog\/software-development\/web-development\/2007\/03\/28\/styling-abbr-with-css\/","title":{"rendered":"Styling abbr with CSS"},"content":{"rendered":"<p>Proper use of the <code>abbr<\/code> and <code>acronym<\/code> elements is good for accessibility and good for conversational style writing. No longer do you have to write phrases that grate on the ear such as, &#8220;Many problems are much easier to solve with a native Extensible Markup Language (XML) database and XQuery than with a relational database and Structured Query Language (SQL).&#8221; Instead, you just assume 99% of your audience knows what you&#8217;re talking about, and instead you write:<\/p>\n<p><code>Many problems are much easier to solve with a native &lt;abbr title=\"Extensible Markup Language\">XML&lt;\/abbr> database and XQuery than with a relational database and  &lt;abbr title=\"Structured Query Language\">SQL&lt;\/abbr>.<\/code><\/p>\n<p>However, there are two problems with this:<br \/>\n<!--more--><\/p>\n<ol>\n<li>Many browsers including Safari and Internet Explorer essentially ignore the <code>abbr<\/code> and <code>acronym<\/code> elements. They do not show the user the <code>title<\/code> text.<\/li>\n<li>Firefox does show the <code>title<\/code> text in a tooltip but it also adds an annoying dotted underline to each such element.<\/li>\n<\/ol>\n<p>Has anyone figured out how to write a CSS rule that fixes either or both of these issues? I&#8217;d like the title to be shown in a tooltip if&#8211;and only if&#8211;the user mouses over the abbreviation. Otherwise I&#8217;d like the user not to be alerted to it. Has anyone made this work?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Proper use of the abbr and acronym elements is good for accessibility and good for conversational style writing. No longer do you have to write phrases that grate on the ear such as, &#8220;Many problems are much easier to solve with a native Extensible Markup Language (XML) database and XQuery than with a relational database [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[410],"class_list":["post-1000498","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-flash"],"_links":{"self":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/1000498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/comments?post=1000498"}],"version-history":[{"count":0,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/1000498\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/media?parent=1000498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/categories?post=1000498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/tags?post=1000498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}