Comments on: Debugging CSS the Fast Way http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/ Wed, 20 Aug 2008 15:14:29 +0000 http://wordpress.org/?v=2.5 By: warhead http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-2581 warhead Thu, 22 May 2008 07:43:12 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-2581 @Travis Stone: Instead of setting the border-color to bright red, it is better to set the background-color, so you won't mess up your layout. @Travis Stone: Instead of setting the border-color to bright red, it is better to set the background-color, so you won’t mess up your layout.

]]> By: Joshua http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1354 Joshua Sat, 12 Apr 2008 01:42:39 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1354 @Franco: Thanks! I guess I'll have to try Notepad++ sometime since I've had a couple of people recommend it to me. @Franco: Thanks! I guess I’ll have to try Notepad++ sometime since I’ve had a couple of people recommend it to me.

]]> By: Franco Laiuppa http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1243 Franco Laiuppa Fri, 04 Apr 2008 03:22:36 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1243 Great job, I use notepad++ that's free and open source for all my projects, and also when I upload my files to the webserver, I pass them by the HTML Tidy (that also works with CSS). I really like your blog, you're in my RSS Feeds. Bye! Great job, I use notepad++ that’s free and open source for all my projects, and also when I upload my files to the webserver, I pass them by the HTML Tidy (that also works with CSS).
I really like your blog, you’re in my RSS Feeds.
Bye!

]]> By: Joshua http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1166 Joshua Fri, 28 Mar 2008 16:51:52 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1166 @Elvis: Yes, Firebug is an awesome extension. @Elvis: Yes, Firebug is an awesome extension.

]]> By: Elvis http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1162 Elvis Thu, 27 Mar 2008 18:15:30 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1162 Hey another great tip is to use this plugin for firefox called Firebug. It allows you to right click on any element in a webpage, and "inspect it" what that does is show you two things. The markup in DOM format of where that element sits, as well as all the CSS that is applied to it. From there you can dynamically make changes and see it on the webpage in realtime. *keep in mind it doesn't save the changes, just previews them for you. Hey another great tip is to use this plugin for firefox called Firebug. It allows you to right click on any element in a webpage, and “inspect it” what that does is show you two things. The markup in DOM format of where that element sits, as well as all the CSS that is applied to it. From there you can dynamically make changes and see it on the webpage in realtime.

*keep in mind it doesn’t save the changes, just previews them for you.

]]> By: Joshua http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1086 Joshua Tue, 25 Mar 2008 02:29:17 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1086 @Jeremy: Well, you can always say it again if you'd like. :-) @Harmony: I'll have to check into Aardvark. @David: That's a great idea. For some reason I never realized that you could do that with outlines. I guess there's always more to learn! I do use the Web Developer toolbar, but tend to use Firebug more often, because of its visualizations. @Jeremy: Well, you can always say it again if you’d like. :-)

@Harmony: I’ll have to check into Aardvark.

@David: That’s a great idea. For some reason I never realized that you could do that with outlines. I guess there’s always more to learn!

I do use the Web Developer toolbar, but tend to use Firebug more often, because of its visualizations.

]]> By: david http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1073 david Mon, 24 Mar 2008 16:20:39 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1073 Those are good tips - I actually even wouldn't call the first one, validation, a tip... it is ESSENTIAL! :) Other tips and tools that have become second nature for me when developing with CSS: 1. apply an outline to structural divs and other elements, as a visualization method - e.g. div#box {outline:1px dotted #c00;} --- this works much better than borders because it is drawn over the element but doesn't actually add dimension to the element's box (which borders do). Only drawback: outline doesn't work in IE. 2. in the same vein as using outline, apply background colors 3. the Web Developer tool bar offers built-in diagnostic tools and more. Use it with Firefox... you are of course, developing your site using Firefox or other modern (not IE) browser, right? :) Those are good tips - I actually even wouldn’t call the first one, validation, a tip… it is ESSENTIAL! :)

Other tips and tools that have become second nature for me when developing with CSS:
1. apply an outline to structural divs and other elements, as a visualization method - e.g. div#box {outline:1px dotted #c00;} — this works much better than borders because it is drawn over the element but doesn’t actually add dimension to the element’s box (which borders do). Only drawback: outline doesn’t work in IE.
2. in the same vein as using outline, apply background colors
3. the Web Developer tool bar offers built-in diagnostic tools and more. Use it with Firefox… you are of course, developing your site using Firefox or other modern (not IE) browser, right? :)

]]> By: Harmony http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1055 Harmony Mon, 24 Mar 2008 01:57:33 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-1055 Great tips :)! I also use the red border technique, and lately I've been using a fantastic little Firefox extension called Aardvark which definately speeds up my debugging process because it let's me see css blocks by mousing-over them in the browser window - http://karmatics.com/aardvark/ Great tips :)! I also use the red border technique, and lately I’ve been using a fantastic little Firefox extension called Aardvark which definately speeds up my debugging process because it let’s me see css blocks by mousing-over them in the browser window - http://karmatics.com/aardvark/

]]> By: Jeremy Steele http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-997 Jeremy Steele Fri, 21 Mar 2008 14:34:25 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-997 Darn, travis already said it. I use that technique as well - works like a charm. Darn, travis already said it. I use that technique as well - works like a charm.

]]> By: Joshua http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-979 Joshua Thu, 20 Mar 2008 17:52:22 +0000 http://joshuaclanton.com/blog/2008/03/20/debugging-css-the-fast-way/#comment-979 That's a good suggestion, Travis. I've used that a few times myself. That’s a good suggestion, Travis. I’ve used that a few times myself.

]]>