Quick & Easy CSS Development with Firebug
In the past, I found myself spending countless hours tweaking my CSS and making everything work in Internet Explorer just as it would in Firefox. Everything changed when I found Firebug. In this tutorial, I am going to discuss how to use Firebug to make CSS development faster, and share some tips for a consistent look between browsers.
Quick Nav:
Materials Needed:
- Firebug (for Mozilla Firefox)
- Web Editor (Dreamweaver, Aptana, Notepad++, etc)
Part 1: Installing and Getting Around Firebug
If you haven’t installed Firebug yet, Please go to the Mozilla plug-in directory, download and install: The link can be found here:
https://addons.mozilla.org/en-US/firefox/addon/1843
Now, the Firebug is installed its time to understand what we’re looking at, and how we can use it. First, lets navigate to Tutorial9.net so we are all working with the same example.
Next click on the little bug in the bottom right corner of your browser (see photo below).
You’ll see the firebug window expand. And you’ll see the menu below. In the top menu you will see Inspect and Edit. Click on Inspect. If you mouse over the website, you will see a blue box outline around whichever html object you hover over.
Now, when you click an element you will see that the right side of the firebug window show the CSS elements and attributes of that item. For our example we’re going to click inspect and select the tutorial9.net logo.
Once you select the element, look in the bottom right hand corner of your firebug window. Here you will see the CSS elements and attributes of those elements that relate to the object you selected in the web site. To the right of each element you will see the Location of the CSS element in the document as well as the line it appears on.
So using our example, The Tutorial9.net logo inherits its CSS styles from ID masthead (#masthead) in Styles.CSS on line 54.
So lets Play around a little but:
Move your mouse over the value of the margin property, and change 0 to 38px, Notice when you change the value, the appearance in the live document instantly change as well.
Element, Attributes and Properties????
The Red – CSS Element (Class, ID, or Tag)
The Blue – Element Property (Margin, Width, Height, Etc)
The Teal – Property Value
Now, if you play with the properties you can preview your CSS in a live browser environment, saving you from jumping back and forth between your doucment editor, browser and ftp server.
Moving on, If you mouse over an element title and right click you have the ability to add a new property, to adjust the CSS element as well.
Part 2: Edit YOUR web page’s CSS with firebug
Now that we understand firebug, and what it does, its time to dig into how we can use it to edit CSS in your document.
Open your webpage in firefox. Select the first element you wish to modify. Add/Remove/Modify properties until the element is positioned the way you want. Once you get the look you want, select the properties, select copy, open your document editor navigate to the appropriate line paste the new properties, save and reopen in your browser. You will see the new changes.
In the video below you can see how to I use firebug to adjust various objects in my live document.
Part 3: Firebug and Internet Explorer
Of course, like many — I am not an advocate of Internet Explorer — sad thing is there are still many internet explorer users out there. As a developer, I’ve been in a few instantces where I’ve prepared a website for a client who works for a government agency, and the agency has a contract to only use internet explorer at their offices – So I found that I HAD to build for ie6. I also learned how many people (which there are a lot) that still use IE and how many of those IE users still use IE6.
Of course the Firefox plugin doesn’t work for Internet Explorer, so you have to use ‘FireBug Lite’. Which a very lightweight JS script that you embed in your code while developing, and remove when your all set. Here’s how, In your header insert the following code:
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
If you need to adjust the size of the firebug window you can by inserting the following script, below the one above:
<script type="text/javascript"> firebug.env.height = 500; </script>
For those of you who are developing on your local machine, you can download firebug lite here. Note: you must replace your script with the follow:
<script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>
Working with firebug in internet explorer is a bit different functionaility wise, as once you make change to your CSS, you have to manually run the CSS changes from the firebug consul window. Aside that, Its the same principals as developing for Firefox.
Part 4:The CSS Im using works in Firefox but Not IE
Okay — we’re making progress, but it seems some CSS properties Dont look the same in Firefox as they do in Internet Explorer.
1. Conditional Styles
Since IE is very quirky and non-compliant with w3 Schools CSS standards, often you must create a custom style sheet, that only loads when the user is browsing from that particular version of internet explorer.To do so, simply add the following code to the <head> of your document.
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
In between the tags, you can place CSS code or, like the above example link to an external stylesheet. Any code you place in between the tags will appear if the tags are true. The script below shows a DIV only if the user is using IE6.
<!--[if IE 6]> <div id="ie6"> We reccommend that you upgrade to at least Interent Explorer 7 </div> <![endif]-->
Here are a few other Conditions:
- IE (Any version of Internet Explorer)
- lt IE 7 (Versions less than version)
- lte IE 6(Versions less than or equal to version)
- IE 6 (Only version)
- gte IE 6 (Versions greater than or equal to version)
- gt IE 7 (Versions greater than version)
2. Opacity
Did you know you CAN do opacity in Internet Explorer with a Javascript. Many people don’t know how. Its every simple. In Firefox you use the property Opacity. When in IE you use filer: alpha(opacity = value); as show in the code below:
.logo {
opacity: 0.5; //For Firebox
filter: alpha(opacity = 50); //For Internet Explorer
}
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
In between the tags, you can place CSS code or, like the above example link to an external stylesheet. Any code you place in between the tags will appear if the tags are true. The script below shows a DIV only if the user is using IE6.
<!--[if IE 6]> <div id="ie6"> We reccommend that you upgrade to at least Interent Explorer 7 </div> <![endif]-->
3. IE6 Scroll Renders Artifact
What happens is IE6 (which again sadly, people still use) is when scrolling vertically down the page, artifacts make the page look all messed up. What is happening is a DIV element that has nothing behind it on the page is rendered bit by bit (for efficiency says Microsoft) as the page scrolls. If the scrolling is anything other than 100% smooth the rendering fails leaving the sorts of glitches shown above. To fix, we have to insert a null object behind the DIV. Simple fix, see blow:
html {
background : url(null) fixed no-repeat;
}
4. Min-Width and Min-Height Issues
IE doesn’t understand these commands, so to make this work, you’ll need to use conditions to access customs styles to make it work in Internet Explorer. So Lets say we have a div called wrapper:
#wrapper{
min-width: 750px;
width:expression(
document.body.clientWidth < 750? "750px": "auto"
);
}
5. A:Hover, Button:Hover — Hover Issues
:hover enables you to have cool effects for HTML elements like button rollovers, etc. Most browsers have no problem with this, except IE (once again of course) which look at the stylesheets and each individual rule with Javascript.
If :hover rules can be tracked, and .htc can be used to change an elements behavior, then it should be possible to create a behavior that enables :hover for any element in IE.
In my building I’ve found the only effective work-around is using a small JS file. Which you insert like below:
body {
behavior: url("csshover3.htc");
}
You can download the csshover3.htc file here.
Unpacked (9k)
6. Margin + Centering your Div
When centering DIV tags using either the margin-left: auto; or margin-right: auto; settings, will not work in Internet explorer. Your would have to conditionally add the following code:
#divname { text-align: center;}
Note: IF YOU MAKE THE DIV CENTER, YOU MUST RE-ADJUST THE INNER CONTENT
#p { text-align: left;}
7. Margins Too Large
I hate this one the most. Setting the margin attribute for any CSS element in Internet Explorer will often appear with added width, which can seriously mess up detailed layouts. By using the {display: inline;} property/value on the tag containing your margin setting can fix this
<div id="special" style="display: inline; margin-left: 10px;"></div>
8. Lightbox’s (modal boxes) don’t hide Flash underneath
Everyone is using Lightbox script’s nowadays. If ever your running into the problem of a flash element (swf or even a video) and you want the flash element to continue to play… heres how:
<param name="wmode" value="transparent"/>
If your using SWFObject:
so.addParam("wmode","transparent");
Final Thought:
Dont test User-Agents to detect the users Browser, cause Google will look at that as Cloaking and ban your site, believe me, I know ;)
Got any tips to add that I may have missed? Please share in the comments below!
125 Comments
Great resource! This helped me out a lot getting started with firebug, so I must thank you very much!
Flag as inappropriateI think it is impassioned. Anyone can carry his burden, however hard, until nightfall. Anyone can do his work, however hard, for one day. Anyone can live sweetly, patiently, lovingly, purely, till the sun goes down. And this is all life really means. ~Robert Louis Stevenson
Flag as inappropriateIf you use jQuery, then FireQuery is a great addition to Firebug.
https://addons.mozilla.org/en-US/firefox/addon/12632/
Flag as inappropriatethank you for tutorial
Flag as inappropriatevery good tutorial
Flag as inappropriateHelpful read! Firebug is saving me a huge amount of time.
Flag as inappropriatei really liked the contents you published.can we use firebug and css editor to edit anyone’s page… i mean friend’s page. can u give me some tips to edit pictures of website using both.. thank u
Flag as inappropriateI noticed you mentioned firebug, but no mention of firediff. If you’ve never used firediff, you don’t know what your missing. Firediff adds a “changes” tab to firebug, so after you make all your changes and you forgot what you’ve done along the way, you just scroll through the changes and edit your files as needed.
Flag as inappropriateExcellent tutorial!
For ie Internet Explorer users visit
Flag as inappropriateFirebug for IE
Thanks buddy, this is the first tut I’ve found for Firebug specifically, and I appreciate how you elaborated on how to deal with IE… I’m sure I’m not the only one, but I tend to forget to test pages in IEx (I know, we’re all supposed to…).
Thanks again. ;-)
Flag as inappropriateThank you for a good share. Have a good resource in your blog. Very useful post.
Flag as inappropriateVery useful info thanks for sharing
Flag as inappropriateGreat thank to you!
Flag as inappropriateVery useful info thanks for sharing ! :)
Flag as inappropriateGreat tip , Thank you for your share.
Flag as inappropriateThank you for your information.
Flag as inappropriateThanks for the article useful,Thanks for the article useful
Flag as inappropriateThese are GREAT tips
Flag as inappropriateThanks for the article useful
Flag as inappropriateI can not remember how i used to do css debugging without firebug. It has saved me hours/days on every project. THANKS!
Flag as inappropriateОтличная статья! Спасибо Вам огромное! Только вчера я мучилась с отображением моего сайта в IE6, но теперь я знаю, как его победить!. Ура!
Flag as inappropriateSomeone commented about splitting this article or perhaps adding IE hacks and tricks in the title, there is very very valuable info here not pertaining to Firebug that web designers who need to also target ie6 users need.
Much kudos for the opacity hack, hovering and the margin thingy.. headaches no more….
Flag as inappropriateGreat Thank for shar Very intriguing article.Best Buy Products
Flag as inappropriateASUS Republic of game
Toshiba Satellite NoteBook Computer Store Cheap Price.
Select a New Hologram accessories should use more
Flag as inappropriateThanks for the Explorer tip I’ll give this a try. I have been using IETester which is nice but not nearly enough web developer tools
Flag as inappropriatethx ok
Flag as inappropriateThanks for the Explorer tip
Flag as inappropriateGreat reading! Thanks for sharing139
Flag as inappropriateGreat reading! Thanks for sharing132
Flag as inappropriatewow Cool tip thank for sharing.129
Flag as inappropriatethanks for sharing. So mush
Flag as inappropriateGreat article.Thank you
Flag as inappropriateThank very nice
Flag as inappropriateNice Tutorial
Flag as inappropriateArt is beautiful much different
Flag as inappropriateThanks for the article useful
Flag as inappropriateNumber 3 is the greates
Flag as inappropriateNice tutorial on Firebug. I’d just make it more clear that you have to copy the style changes from Firebug and paste them into the actual style sheet in order for them to work.
And don’t forget to install the YSlow add-on to Firebug. It provides a lot of great information you can use to optimize your pages.
Flag as inappropriateYeah Firebug editing is great and all, but how the heck are you supposed to save your changes afterward? None of the tutes I’ve looked at explain that.
Flag as inappropriateI love firebug. I’m using it. Thanks for useful tutorial.
Flag as inappropriateFor me Firebug has revolutionized the way I write, edit and troubleshoot CSS. I’m an old-school code-by-hand type of guy and Firebug is an invaluable asset to my development tool belt.
Flag as inappropriateThe Firebug lite doesn’t work in ie it is too slow as my ie hangs while using it
Flag as inappropriateThanks for the Explorer tip I’ll give this a try. I have been using IETester which is nice but not nearly enough web developer tools.
Flag as inappropriateDont test User-Agents to detect the users Browser, cause Google will look at that as Cloaking and ban your site, believe me, i know… i guess it happened to you and it wasn’t the best thing that ever happened to you
Flag as inappropriateThanks for the Firebug explanation.
Flag as inappropriateYeah, IE sucks… when will Microsoft do something that doesn’t suck (like a vacuum cleaner) ?
Nice Tip i’ll use it! thx
Flag as inappropriateAs nice and informative this tutorial is, it seems a large part of this is about how to get IE6 to play nice with CSS. I do think those issues are important, but people may not be able to find them by seeing the title of this tut?
Flag as inappropriateI think separate them out would be nice, a IE6-fixit tut and a firebug tut (add link between them if that’s helpful).
thanks!!! :)
Flag as inappropriateThis is the first article that explains axactely wath I need. However I have a question. Are these tips enought to make a simple web page to run in IE 6? I mean, If I use simple css rules and semantic xhtml or is there anything else I need to have in mind?
Flag as inappropriateGreat teaching about firebug.
Flag as inappropriateI really enjoyed this tutorial and I totally agree that live editing is the most efficient way of coding. I do however find that firebugs way of editing the CSS is very slow. I prefer the Web Developer Tool bar where you can just edit the css like it was in notepad and the changes seen instantly. Firebugs way of highlighting an element the adding the value slows me down. However with Firebug you can easily see your HTML as well as your CSS, this is useful when you can`t remember the name of all your ID and saves you time that way.
Overall a thumbs up from me ;)
Flag as inappropriateThanks a TON ryan ,nice to hear about fire bug tool ,this article is really nice and usefull hope i can save some time while creating my css and integrating it to my works ,hopefully this will help me thanks once agai nto psot such kind of article
Flag as inappropriateThese are GREAT tips, thanks a ton!
Flag as inappropriateI’d love to see a bit more about transparent png’s across browsers…?
Thanks!
1.IE still sucks, even IE7…and yes, people still use it…even IE6
2.A very welcome tut and firebug+ff just kicks ass
3.I learned to test in a early stage also with IE although I refuse to optimize for IE anymore
Flag as inappropriateweb designers usually wont like IE but with the help of
Flag as inappropriateFirebug u can handle the IE pretty well.Thanks Ryan and final thought is also quite useful :)
Hmmm. seems need to start to use Firebug….
Thanks for the article.
Flag as inappropriatenice article
but the fix for min-height and min-width by ie expressions is a headache i think …
for min-height dustin diaz’s css hack is much better
Flag as inappropriateGreat article – I won’t fault the content, but simple proof reading can go a long way to making it look professional. “These script’s are awesome” looks as if it’s been written by a 12 year old. Also, please learn about your -> you’re. There *is* a difference.
Flag as inappropriateThis was a very informative post! I didn’t know you could use transparency in IE. Welcome to Tutorial 9 and thanks for this!
Flag as inappropriateNice post! It’s time to download Firebug and test it out on some direct response marketing sites. Keep up the good work and thanks for great content!
Flag as inappropriateRyan,
Flag as inappropriateI have been looking for this post for a while. Everyone raves about Firebug. And I got to do the changes but could never work out how to save them. Never thought about copying them lol. it would be really cool if there was a save changes via ftp button don’t ya think? Thanks much!
Gary
You know, you cant forget ie6 — Lots of government agencies, schools and commercial workplaces ONLY allow ie — and many aren’t upgraded to the latest yet… The site used in the demo above has 60% ie users, 40% of which are ie6….. go figure?
I will say this. The more ‘design-centric’ your site, the less ie6 support you’ll need. Or, as an alternative do a hidden div with a big warning message saying “UPGRADE YOUR BROWSER NOW OR ELSE…” which is set visible if a ie6 condition is true…. that’s a common technique that I see…
Flag as inappropriateThe “upgrade your browser” message is a good idea.
The main problem being that the very same users you are talking about that sitll use IE6, government agencies, schools and commercial workplaces… etc, well those, they usually cannot upgrade their browsers as they dont have admin rights on their machines… Otherwise, I’d suppose most of them would have already.
Flag as inappropriateThanks, found some nice workarounds for IE 6! But still, the only good workaround would be to… forget IE 6 :p
Flag as inappropriatenice article!
You said: “Dont test User-Agents to detect the users Browser, cause Google will look at that as Cloaking and ban your site, believe me, I know”
This wont affect me if I detect the user’s agent server-side, will it? At the moment, using PHP I look for a value in the user agent sting and if I find it, include an additional notice telling the user to upgrade their browser.
Flag as inappropriateAnd don’t forget FireCookie
Flag as inappropriatethanks a ton! i’d been using firebug for a while but apparently was missing out on some of it’s basic functionality. :/
Flag as inappropriatedon’t forget all the great Firebug addons like firephp, yslow, senseo, etc. really a great tool for developers overall.
Ryan, would you teach me Ruby on Rails?
Please!
Flag as inappropriategr8 man
Flag as inappropriateQuick and Easy….
Flag as inappropriateMan, this is great. I can’t wait to implement this. And please, keep em comin.
Flag as inappropriateNice and really helpful post, Ryan! I often use firebug in my work and advice others to do the same ;)
Flag as inappropriateGood stuff here. Don’t forget about SitePoint’s reference plugin for Firebug. ;)
Flag as inappropriateAwesome, now I can finally get stuff to work with IE…
Flag as inappropriateExcept the tutorial entirely misses the point. Doesn’t state anything about how it works to efficiently make your CSS crossplatform’d.
He also relies on a video that is much to do about nothing.
More of a mediocre article written to advocate the general use of Firebug instead of how it works with IE or the benefits thereof.
He recommends Dreamweaver, but fails to show where this outpaces the dual window functionality that’s been in Dreamweaver for a decade.
Massive Fail.
Flag as inappropriateThanks. Everyone. Thanks. Your satisfaction is my fuel to go on ahead and write some more.
Flag as inappropriateGreat post Ryan :) Very glad you decided to share with Tutorial9, and hope you’ll keep writing more for our community!
Really appreciate you including the links for Firebug Lite and the additional documents, will be grabbing those for my future projects.
Flag as inappropriateThanks for explaining Firebug from first principles from a user perspective. This helped me launch right into using it for editing and not just diagnostics. Great stuff.
Flag as inappropriatenice useful article.. thx
Flag as inappropriateThis is a great tutorial and explanation on how to use Firebug. Awesome tutorial!!!
Flag as inappropriate- Greg
Stellar article, tons of useful bits of info that will (hopefully) take at least some of the headaches out of developing my next website. Thanks!
Flag as inappropriateGreat article. There need to be more out there like this. I don’t know what I would do without firebug, it’s saved me hours upon hours of work. Thanks for showing how to integrate it with IE6, too.
Flag as inappropriate