Tutorial9 | The Best Tutorials and Resources. Free.

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.

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.

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>  

 <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]--> 

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)

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:

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