By Paul McCarthy on 2 June 2009
I think it’s probably fair to say that we (CSS developers) owe the people who created Firebug a big wet kiss. But there are still people muddling on without this wonderful Firefox toolbar.
The more time I’ve spent with Firebug, the more I’ve come to rely on it and the more I discover it can do. So it’s got me thinking, maybe there’s stuff it does that I just haven’t discovered yet.
So I’d like you to take a moment to tell me your firebug top tip, that really saves you time. It doesn’t matter how small or obvious. To get the ball rolling here are two features I love:
The net panel - amongst other things it ensures you aren’t referencing any missing files plus checking things aren’t taking too long to load. Great for making sure you haven’t referenced any old files and that everything is neat and tidy.
The lovely layout panel - more obvious but so useful. Just inspect an item and it’s margin, border, padding are shown as a box model diagram! Brilliant.
Let us know what your favourite Firebug feature is?
Comments:
Share & bookmark this post
By Paul McCarthy on 12 May 2009
Having contributed to a feature in last month’s Web Designer Magazine on great CSS secrets, we thought that the blog would be a great place to share the tip we came up with for clearing a float container without extra HTML mark up:
If a floated element is nested within a box that has a border or a background colour applied to it, the floated element will not force its container to stretch all the way down (mainly in standards compliant browsers).
To force the container box to enclose the floated div(s), it needs a ‘cleared’ element added after the last floated div. Rather than adding extra HTML mark up such as a clearing div or paragraph we can use CSS.
Using the pseudo-class :after it’s possible to add content at the end of an element with the following CSS commands:
#id:after {
content:".";
clear: both;
height: 0;
visibility: hidden;
display: block;
}
Sometimes the container will also collapse in Internet Explorer. Unfortunately IE still doesn’t support the :after pseudo-class yet, so a simple declaration of height: 1% to the floated containing div will stop it from collapsing.
#id {
height:1%
}
Comments:
Share & bookmark this post
