{"id":634,"date":"2006-12-22T17:33:22","date_gmt":"2006-12-23T01:33:22","guid":{"rendered":"http:\/\/www.wiredatom.com\/blog\/?p=634"},"modified":"2007-01-06T14:19:55","modified_gmt":"2007-01-06T22:19:55","slug":"get-rid-of-dotted-outlines-on-windows-browsers","status":"publish","type":"post","link":"https:\/\/www.wiredatom.com\/blog\/2006\/12\/22\/get-rid-of-dotted-outlines-on-windows-browsers\/","title":{"rendered":"Get Rid of Dotted Outlines on Windows Browsers"},"content":{"rendered":"<p>For you web developers, I am sure your clients have often tried to make you do the impossible &#8212; correct mistakes and\/or idiotic decisions made by Microsoft on how browsers should behave on the Windows operating system. Fortunately some of these mistakes can be corrected with hacks and work arounds. Here&#8217;s another one&#8230; <\/p>\n<p>Some browsers (namely IE and Firefox) have this annoying behavior that&#8217;s a Windows-only trait &#8212; upon clicking an active link, it leaves a ghosting outline of dots around the link enclosed by the anchor tag. There are two work arounds that I know of to get rid of, or rather, prevent this from happening.<\/p>\n<p>Method 1: Javascript &#8212; Yes, yes, I know client-side scripting is not reliable and all that jazz. All I am saying is, this is A work around. The idea is to make these links sans-anchor tags&#8230; That is to say, write a Javascript to respond to &#8220;onClick&#8221; events within, say,<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; div&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>or<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; span&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>tags.<\/p>\n<p>EXAMPLE:<\/p>\n<blockquote>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; div onClick=&quot;doSomething();&quot;&gt;Click Me&lt; \/div&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<\/blockquote>\n<p>Method 2: <i>Div<\/i> tags &#8212; If you are trying to avoid Javascript at all costs,<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; div&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>or<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; span&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>tags may be your best friend. Simply enclose your links with a<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; div&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>or<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; span&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>tag immediately following the<\/p>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; a&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<p>anchor tags, the ghost dots will disappear all by themselves. Sweet, huh?<\/p>\n<p>EXAMPLE:<\/p>\n<blockquote>\n<div class=\"codecolorer-container text railscasts\" style=\"overflow:auto;white-space:nowrap;width:680px;\"><table cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td class=\"line-numbers\"><div>1<br \/><\/div><\/td><td><div class=\"text codecolorer\">&lt; a href=&quot;linkToSomething.html&quot;&gt;&lt; span&gt;Click Me&lt; \/span&gt;&lt; \/a&gt;<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n<\/blockquote>\n<p>Again, if Microsoft had bothered to adhere to industry standards, there wouldnt&#8217; be a need to use work arounds like these. So I beg of you, use an alternative browser as much as possible. And only use IE sparingly when you must (for those idiots who develop sites that work ONLY with IE).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For you web developers, I am sure your clients have often tried to make you do the impossible &#8212; correct mistakes and\/or idiotic decisions made by Microsoft on how browsers should behave on the Windows operating system. Fortunately some of these mistakes can be corrected with hacks and work arounds. Here&#8217;s another one&#8230; Some browsers &hellip; <a href=\"https:\/\/www.wiredatom.com\/blog\/2006\/12\/22\/get-rid-of-dotted-outlines-on-windows-browsers\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Get Rid of Dotted Outlines on Windows Browsers&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[21,10,4],"tags":[],"class_list":["post-634","post","type-post","status-publish","format-standard","hentry","category-coding","category-geek-stuff","category-tips-tricks"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p54IqZ-ae","_links":{"self":[{"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/posts\/634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/comments?post=634"}],"version-history":[{"count":0,"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/posts\/634\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/media?parent=634"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/categories?post=634"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wiredatom.com\/blog\/wp-json\/wp\/v2\/tags?post=634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}