{"id":92,"date":"2010-12-08T00:38:32","date_gmt":"2010-12-08T07:38:32","guid":{"rendered":"http:\/\/www.keganv.com\/?p=92"},"modified":"2016-06-26T08:29:44","modified_gmt":"2016-06-26T15:29:44","slug":"font-family-float-drop-issues","status":"publish","type":"post","link":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/","title":{"rendered":"Font Family Float Drop Issues"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-108\" title=\"Font Family Float Drop\" src=\"https:\/\/www.keganv.com\/wp-content\/uploads\/floatDrop.jpg\" alt=\"Font Family Float Drop\" width=\"561\" height=\"246\" \/>Recently I ran into a font family float drop issue while working on a new project for a client, (more specifically the navigation bar). The nav bar was your usual horizontal navigational menu that ran along the bottom of the header and the top of the content.\u00a0 The containing element for the nav bar was a fixed width of 940 pixels. I had the anchor tags set to display block and floated left with a fixed left and right padding. The font family chosen for the navigation menu was plain ole Arial. On a PC the menu looked perfect in IE 8 and below, Firefox (all versions), Safari, Opera, and Google Chrome. HOWEVER, on a MAC the last anchor menu item dropped out of the navigation bar breaking the page as well as IE9 beta on a PC.<br \/>\n<!--more--><br \/>\nHas this happened to you? Here&#8217;s the scoop I found. Apparently on Mac&#8217;s and IE9 beta, they render Arial typeface slightly thicker than a PC thus making the anchor tags wider in pixels.<\/p>\n<p>The fix? Use a wider font family like Verdana or Geneva. Once I changed the font to Verdana, and changed a few css issues, the float drop problem was solved on all browsers, both PC and Mac. In fact, if you have <a href=\"http:\/\/getfirebug.com\/\" target=\"_blank\">firebug<\/a> and access to a PC and a MAC, change the font family of the nav bar on this website to Arial and you&#8217;ll see exactly what I&#8217;m talking about.<\/p>\n<p>Share any other odd font family cross compatibility issues you&#8217;ve found below.<\/p>\n","protected":false},"excerpt":{"rendered":"Recently I ran into a font family float drop issue while working on a new project for a client, (more specifically the navigation bar). The nav bar was your usual horizontal navigational menu that ran along the bottom of the header and the top of the content.\u00a0 The containing element for the nav bar was &#8230; <br\/> <a class=\"view-article btn btn-primary flip pull-left\" href=\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\"><span>View Article<\/span><\/a>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-92","post","type-post","status-publish","format-standard","hentry","category-coding-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Font Family Float Drop Issues Between Mac &amp; PC<\/title>\n<meta name=\"description\" content=\"Odd font family width difference between Mac and PC. No worries, there is an easy fix.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Font Family Float Drop Issues Between Mac &amp; PC\" \/>\n<meta property=\"og:description\" content=\"Odd font family width difference between Mac and PC. No worries, there is an easy fix.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\" \/>\n<meta property=\"og:site_name\" content=\"KeganV\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-08T07:38:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-26T15:29:44+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.keganv.com\/wp-content\/uploads\/floatDrop.jpg\" \/>\n<meta name=\"author\" content=\"Kegan V.\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kegan V.\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\"},\"author\":{\"name\":\"Kegan V.\",\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\"},\"headline\":\"Font Family Float Drop Issues\",\"datePublished\":\"2010-12-08T07:38:32+00:00\",\"dateModified\":\"2016-06-26T15:29:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\"},\"wordCount\":258,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\"},\"articleSection\":[\"Coding &amp; Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\",\"url\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\",\"name\":\"Font Family Float Drop Issues Between Mac & PC\",\"isPartOf\":{\"@id\":\"https:\/\/www.keganv.com\/#website\"},\"datePublished\":\"2010-12-08T07:38:32+00:00\",\"dateModified\":\"2016-06-26T15:29:44+00:00\",\"description\":\"Odd font family width difference between Mac and PC. No worries, there is an easy fix.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.keganv.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Font Family Float Drop Issues\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.keganv.com\/#website\",\"url\":\"https:\/\/www.keganv.com\/\",\"name\":\"KeganV\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.keganv.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276\",\"name\":\"Kegan V.\",\"logo\":{\"@id\":\"https:\/\/www.keganv.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/www.keganv.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Font Family Float Drop Issues Between Mac & PC","description":"Odd font family width difference between Mac and PC. No worries, there is an easy fix.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/","og_locale":"en_US","og_type":"article","og_title":"Font Family Float Drop Issues Between Mac & PC","og_description":"Odd font family width difference between Mac and PC. No worries, there is an easy fix.","og_url":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/","og_site_name":"KeganV","article_published_time":"2010-12-08T07:38:32+00:00","article_modified_time":"2016-06-26T15:29:44+00:00","og_image":[{"url":"http:\/\/www.keganv.com\/wp-content\/uploads\/floatDrop.jpg"}],"author":"Kegan V.","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kegan V.","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#article","isPartOf":{"@id":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/"},"author":{"name":"Kegan V.","@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276"},"headline":"Font Family Float Drop Issues","datePublished":"2010-12-08T07:38:32+00:00","dateModified":"2016-06-26T15:29:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/"},"wordCount":258,"commentCount":0,"publisher":{"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276"},"articleSection":["Coding &amp; Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.keganv.com\/font-family-float-drop-issues\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/","url":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/","name":"Font Family Float Drop Issues Between Mac & PC","isPartOf":{"@id":"https:\/\/www.keganv.com\/#website"},"datePublished":"2010-12-08T07:38:32+00:00","dateModified":"2016-06-26T15:29:44+00:00","description":"Odd font family width difference between Mac and PC. No worries, there is an easy fix.","breadcrumb":{"@id":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.keganv.com\/font-family-float-drop-issues\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.keganv.com\/font-family-float-drop-issues\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.keganv.com\/"},{"@type":"ListItem","position":2,"name":"Font Family Float Drop Issues"}]},{"@type":"WebSite","@id":"https:\/\/www.keganv.com\/#website","url":"https:\/\/www.keganv.com\/","name":"KeganV","description":"","publisher":{"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.keganv.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/412e7755f594475dc403b6d774b80276","name":"Kegan V.","logo":{"@id":"https:\/\/www.keganv.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/www.keganv.com"]}]}},"_links":{"self":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts\/92"}],"collection":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/comments?post=92"}],"version-history":[{"count":15,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts\/92\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/posts\/92\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/media?parent=92"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/categories?post=92"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.keganv.com\/api\/wp\/v2\/tags?post=92"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}