![\"Firefox](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/03\/firefox-error-console.jpg\")
<\/p>\n<\/p>\n
Some of the best tools in any web developer\u2019s toolset are completely free. Today I\u2019m going to talk a bit about the Firefox Error Console, and how it can help you become a better CSS author.<\/p>\n
First, it\u2019s important to mention that not only is the Error Console completely free, but it\u2019s a pre-installed function of Firefox \u2013 you don\u2019t have to go hunting down any special plugins or anything. Simply open a webpage and go to Tools –> Error Console to open the console.<\/p>\n
Once you\u2019re there, you\u2019ll see a selection of buttons across the top like in the image above. The one we\u2019re most interested in is the \u201cWarnings\u201d button, because that\u2019s where all of our CSS errors show up. Simply click the Warnings button and you suddenly have a very precise and concise view of what Firefox thinks of your CSS. I\u2019ll warn you, though: it isn\u2019t always pretty.<\/p>\n
Take the first item in the list of the image above, for example. Firefox is telling me that it\u2019s had some problems parsing a \u201cdisplay\u201d property in the CSS of one of my (many) WordPress<\/a> plugins<\/a>. If I click the URL below the error, it pops open a \u201cview source\u201d window with the offending line already selected. In this case, here was the line in question:<\/p>\n As the comment behind the property states, this style only works in Opera and Internet Explorer. Firefox doesn\u2019t support an inline-block display setting. Therefore, it throws an error and ignores the property. This can be pretty useful knowledge if Firefox isn\u2019t behaving like you\u2019d expect it to, or if another browser is rendering better than Firefox.<\/p>\n Or consider the third (highlighted) item in the image. Here, Firefox is having problems with a vertical-align property, but Firefox understands vertical-align. Sometimes you will find an error<\/a> in the code so in regards to finding an error I clicked the URL to look at the source and found this code:<\/p>\n Here, the problem lies with the code, not the browser. There is no \u201ccenter\u201d value for the vertical-align property. The author of the code should have written \u201cvertical-align: middle<\/strong>\u201d instead. It\u2019s a small difference in semantics, maybe, but it makes a big difference in how that element is displayed.<\/p>\n So I encourage you to check out the Firefox Error Console sometime. I think you\u2019ll find that it\u2019s a great resource for figuring out why your CSS isn\u2019t behaving like you thought it should. As I mentioned earlier though, it can sometimes be a bit scary to see how many errors a single page can through. The front page of CSSnewbie, for example, throws 18 CSS errors! My only (small) consolation is that all of those errors come from plugins I have installed \u2013 my template\u2019s style sheet is clean.<\/p>\n If you have another commonly available tool that you use on a regular basis and would like to see mentioned, please let me know. I\u2019d love to do a review on it. You can either leave a comment on this post or use the contact form.<\/a> Thanks!<\/p>\ndisplay:inline-block; \/*for Opera & IE*\/<\/pre>\n
vertical-align:center;<\/pre>\n