{"id":46,"date":"2006-10-15T22:02:52","date_gmt":"2006-10-16T02:02:52","guid":{"rendered":"http:\/\/scott.sherrillmix.com\/blog\/programmer\/weird-first-letter-floating-bug-in-firefox\/"},"modified":"2008-11-25T22:59:33","modified_gmt":"2008-11-26T02:59:33","slug":"weird-first-letter-floating-bug-in-firefox","status":"publish","type":"post","link":"http:\/\/scott.sherrillmix.com\/blog\/programmer\/weird-first-letter-floating-bug-in-firefox\/","title":{"rendered":"Weird first-letter Floating Bug in Firefox"},"content":{"rendered":"<p>I&#8217;ve ran into a weird bug in Firefox. It seems to mess up <code>p.test:first-letter{float:left;}<\/code> when there are 2 or more <code>&lt;div&gt;<\/code> with <code>float:right;clear:right;<\/code>. Firefox seems to put the floating first letter at the bottom of the first div which seems incorrect to my inexpert judgement. I guess it&#8217;s not too common a problem but it&#8217;s a little annoying especially since Internet Explorer seems to handle it correctly. An example of the problem should be below. This is with <code>p.test:first-letter {color:blue; float:left; font-size:500%;}<\/code> in the css file since you can&#8217;t use <code>first-letter<\/code> inline (as far as I know).<\/p>\r\n<!--more-->\r\n<div style=\"float:right;clear:right;border: 1px dashed black;width:20%\">This is a sidenote with some text. Pellentesque auctor mauris eu sapien.<\/div><div style=\"float:right;clear:right;border: 1px dashed black;width:20%\">This is a sidenote with some other text. Pellentesque auctor mauris eu sapien. <\/div><p class=\"test\" style=\"color:red;\">This is a paragraph test. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis urna vitae ligula aliquam eleifend. Fusce pharetra eros eget purus. In libero. Pellentesque auctor mauris eu sapien. Nullam ultrices pretium neque. Vivamus tempor, diam non egestas pharetra, ante arcu egestas enim, eu sollicitudin dui arcu eu est. Phasellus sed diam posuere lectus pharetra volutpat. Ut bibendum neque sed diam hendrerit sagittis. Maecenas ut libero et urna semper faucibus. Donec dolor risus, tempus id, porta eu, feugiat in, mi. In pulvinar luctus tortor. Nulla lorem quam, molestie vitae, blandit quis, consequat eu, velit. Donec lobortis velit. Donec in ante vitae augue. Vivamus tempor, diam non egestas pharetra, ante arcu egestas enim, eu sollicitudin dui arcu eu est. Phasellus sed diam posuere lectus pharetra volutpat. Ut bibendum neque sed diam hendrerit sagittis. Maecenas ut libero et urna semper faucibus. Donec dolor risus, tempus id, porta eu, feugiat in, mi. In pulvinar luctus tortor. Nulla lorem quam, molestie vitae, blandit quis, consequat eu, velit. Donec lobortis velit. Donec in ante vitae augue.<\/p>\r\n\r\n<p>Here is the same paragraph with only one right floated <code>&lt;div&gt;<\/code>. On my Firefox at least, it does not display the bug.<\/p>\r\n\r\n<div style=\"float:right;clear:right;border: 1px dashed black;width:20%;\">This is a sidenote with some text. Pellentesque auctor mauris eu sapien.<\/div><p class=\"test\" style=\"color:red;\">This is a paragraph test. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec quis urna vitae ligula aliquam eleifend. Fusce pharetra eros eget purus. In libero. Pellentesque auctor mauris eu sapien. Nullam ultrices pretium neque. Vivamus tempor, diam non egestas pharetra, ante arcu egestas enim, eu sollicitudin dui arcu eu est. Phasellus sed diam posuere lectus pharetra volutpat. Ut bibendum neque sed diam hendrerit sagittis. Maecenas ut libero et urna semper faucibus. Donec dolor risus, tempus id, porta eu, feugiat in, mi. In pulvinar luctus tortor. Nulla lorem quam, molestie vitae, blandit quis, consequat eu, velit. Donec lobortis velit. Donec in ante vitae augue. Vivamus tempor, diam non egestas pharetra, ante arcu egestas enim, eu sollicitudin dui arcu eu est. Phasellus sed diam posuere lectus pharetra volutpat. Ut bibendum neque sed diam hendrerit sagittis. Maecenas ut libero et urna semper faucibus. Donec dolor risus, tempus id, porta eu, feugiat in, mi. In pulvinar luctus tortor. Nulla lorem quam, molestie vitae, blandit quis, consequat eu, velit. Donec lobortis velit. Donec in ante vitae augue.<\/p>\r\n\r\n<img decoding=\"async\" class=\"left\" src=\"\/res\/images\/firstletterbug_firefox.jpg\" alt=\"A screenshot of a first-letter bug in Firefox\" \/>\r\n<img decoding=\"async\" class=\"right\" src=\"\/res\/images\/firstletterbug_ie.jpg\" alt=\"A screenshot of a first-letter bug in Internet Explorer\" \/>\r\n\r\n<p>Here are screenshots just to make sure I&#8217;m not crazy. Firefox on the left and Internet Explorer on the right. I do like the way Firefox handles the spacing when it does display it correctly.<\/p> \r\n\r\n<p>I&#8217;ll try to submit it to Bugzilla. I&#8217;ve never tried that before but I don&#8217;t see it already submitted. Hope it&#8217;s actually a bug and not me doing something stupid. <\/p> ","protected":false},"excerpt":{"rendered":"I&#8217;ve ran into a weird bug in Firefox. It seems to mess up p.test:first-letter{float:left;} when there are 2 or more &lt;div&gt; with float:right;clear:right;. Firefox seems to put the floating first letter at the bottom of the first div which seems incorrect to my inexpert judgement. I guess it&#8217;s not too common a problem but it&#8217;s [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,17],"tags":[94,170],"_links":{"self":[{"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/posts\/46"}],"collection":[{"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":1,"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":262,"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions\/262"}],"wp:attachment":[{"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/scott.sherrillmix.com\/blog\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}