Easy CSS Development with Firebug

In the past, I found myself spending countless hours tweaking my CSSand making everything work in Internet Explorer just as it would inFirefox. Everything changed when I found Firebug. In this tutorial, Iam going to discuss how to use Firebug to make CSS development faster,and share some tips for a consistent look between browsers.



Quick Nav:

• Installing and Getting around Firebug
  
• Live editing of CSS using Firebug
  
• Firebug for Internet Explorer
  

Materials Needed:

• Firebug (for Mozilla Firefox)
  
• Web Editor (Dreamweaver, Aptana, Notepad++, etc)
  

Part 1: Installing and Getting Around Firebug

Ifyou haven’t installed Firebug yet, Please go to the Mozilla plug-indirectory, download and install: The link can be found here:https://addons.mozilla.org/en-US/firefox/addon/1843Now,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 areall 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 thefirebug 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.
Onceyou select the element, look in the bottom right hand corner of yourfirebug window. Here you will see the CSS elements and attributes ofthose 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 CSSelement 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:

Moveyour mouse over the value of the margin property, and change 0 to 38px,Notice when you change the value, the appearance in the live documentinstantly 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 livebrowser environment, saving you from jumping back and forth betweenyour 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.Openyour webpage in firefox. Select the first element you wish to modify.Add/Remove/Modify properties until the element is positioned the wayyou want. Once you get the look you want, select the properties, selectcopy, open your document editor navigate to the appropriate line pastethe 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.
Tutorial on Using Firebug from Ryan Hickman on Vimeo.
Part 3: Firebug and Internet Explorer

Ofcourse, like many — I am not an advocate of Internet Explorer — sadthing is there are still many internet explorer users out there. Asa developer, I’ve been in a few instantces where I’ve prepared awebsite for a client who works for a government agency, and the agencyhas a contract to only use internet explorer at their offices – So Ifound that I HAD to build for ie6. I also learned how manypeople (which there are a lot) that still use IE and how many of thoseIE users still use IE6.Of course the Firefox plugin doesn’twork for Internet Explorer, so you have to use ‘FireBug Lite’. Which avery lightweight JS script that you embed in your code whiledeveloping, and remove when your all set. Here’s how, In your headerinsert the following code:view plaincopy to clipboardprint?

1. <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
   

<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:view plaincopy to clipboardprint?

1. <script type="text/javascript">
   
2. firebug.env.height = 500;
   
3. </script>
   

<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:view plaincopy to clipboardprint?

1. <script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>
   

<script language="javascript" type="text/javascript" src="/path/to/firebug/firebug-lite.js"></script>
Workingwith firebug in internet explorer is a bit different functionailitywise, as once you make change to your CSS, you have to manually run theCSS changes from the firebug consul window. Aside that, Its the sameprincipals 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.view plaincopy to clipboardprint?

1. <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
   

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> In between the tags, you can place CSS code or, like the aboveexample link to an external stylesheet. Any code you place in betweenthe tags will appear if the tags are true. The script below shows a DIVonly if the user is using IE6.view plaincopy to clipboardprint?

1. <!--[if IE 6]> <div id="ie6">
   
2. We reccommend that you upgrade to at least Interent Explorer 7
   
3. </div>
   
4. <![endif]-->
   

<!--[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

Didyou know you CAN do opacity in Internet Explorer with a Javascript.Many people don’t know how. Its every simple. In Firefox you use theproperty Opacity. When in IE you use filer: alpha(opacity = value); as show in the code below:view plaincopy to clipboardprint?

1. .logo {
   
2. opacity: 0.5; //For Firebox
   
3. filter: alpha(opacity = 50); //For Internet Explorer
   
4. }
   

.logo { opacity: 0.5; //For Firebox filter: alpha(opacity = 50); //For Internet Explorer}view plaincopy to clipboardprint?

1. <!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
   

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie.css" /><![endif]--> In between the tags, you can place CSS code or, like the aboveexample link to an external stylesheet. Any code you place in betweenthe tags will appear if the tags are true. The script below shows a DIVonly if the user is using IE6.view plaincopy to clipboardprint?

1. <!--[if IE 6]> <div id="ie6">
   
2. We reccommend that you upgrade to at least Interent Explorer 7
   
3. </div>
   
4. <![endif]-->
   

<!--[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 downthe page, artifacts make the page look all messed up. What is happeningis a DIV element that has nothing behind it on the page is rendered bitby bit (for efficiency says Microsoft) as the page scrolls. If thescrolling is anything other than 100% smooth the rendering failsleaving the sorts of glitches shown above. To fix, we have to insert anull object behind the DIV. Simple fix, see blow:view plaincopy to clipboardprint?

1. html {
   
2. background : url(null) fixed no-repeat;
   
3. }
   

html { background : url(null) fixed no-repeat; }4. Min-Width and Min-Height Issues

IE doesn’tunderstand these commands, so to make this work, you’ll need to useconditions to access customs styles to make it work in InternetExplorer. So Lets say we have a div called wrapper:view plaincopy to clipboardprint?

1. #wrapper{
   
2. min-width: 750px;
   
3. width:expres​sion(
   
4. document.body.clientWidth < 750? "750px": "auto"
   
5. );
   
6. }
   

#wrapper{ min-width: 750px; width:expres​sion( document.body.clientWidth < 750? "750px": "auto" );} 5. A:Hover, Button:Hover — Hover Issues

:hover enables you to have cool effects for HTML elements like buttonrollovers, etc. Most browsers have no problem with this, except IE(once again of course) which look at the stylesheets and eachindividual rule with Javascript.
If :hover rules can be tracked,and .htc can be used to change an elements behavior, then it should bepossible 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:view plaincopy to clipboardprint?

1. body {
   
2. behavior: url("csshover3.htc");
   
3. }
   

body { behavior: url("csshover3.htc");} You can download the csshover3.htc file here.
Unpacked (9k)Packed (2.5k)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:view plaincopy to clipboardprint?

1. #divname { text-align: center;}
   

#divname { text-align: center;}Note: IF YOU MAKE THE DIV CENTER, YOU MUST RE-ADJUST THE INNER CONTENT view plaincopy to clipboardprint?

1. #p { text-align: left;}
   

#p { text-align: left;}7. Margins Too Large

Ihate this one the most. Setting the margin attribute for any CSSelement in Internet Explorer will often appear with added width, whichcan seriously mess up detailed layouts. By using the {display: inline;}property/value on the tag containing your margin setting can fix thisview plaincopy to clipboardprint?

1. <div id="special" style="display: inline; margin-left: 10px;"></div>
   

<div id="special" style="display: inline; margin-left: 10px;"></div>8. Lightbox’s (modal boxes) don’t hide Flash underneath

Everyoneis using Lightbox script’s nowadays. If ever your running into theproblem of a flash element (swf or even a video) and you want the flashelement to continue to play… heres how:view plaincopy to clipboardprint?

1. <param name="wmode" value="transparent"/>
   

<param name="wmode" value="transparent"/>If your using SWFObject:view plaincopy to clipboardprint?

1. so.addParam("wmode","transparent");
   

so.addParam("wmode","transparent");Final Thought:

Donttest User-Agents to detect the users Browser, cause Google will look atthat as Cloaking and ban your site, believe me, I know

thanx