css [spugbrap’s blog]

August 7th, 2006

A Handy CSS Debugging Snippet

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

This code, if placed in your stylesheet, outlines every element on the page with colored boxes. I like this because it’s simple, and I learned something from it. I had no idea that you could use an asterisk for a css selector. Then, the idea of stringing them together to represent the elements that are most deeply nested with different colored outlines. Pretty slick!

I will probably still use the many functions in the Outline menu of the Web Developer Extension for Firefox, and the Internet Explorer Developer Toolbar, for most of my everyday outlining-for-debugging needs. There are also bookmarklets out there to do this type of thing. But, this snippet deserves a spot in my toolbox, because it seems like it could could come in handy someday.

March 1st, 2006

html form tag without the top/bottom padding

This seems like such a simple thing, but I’m really happy to be able to add it to my collection of useful code snippets:

The important part (HTML code snippet):
<form style=”display: inline; margin: 0px;”>

Explanation/history/context:
For years, now, I’ve just accepted (but been annoyed by) the fact that the HTML FORM tag causes some whitespace to display above and below the form contents:

html	screenshot
Form outside table:Text above table <form> <table border=”1″> <tr> <td>table cell</td> </tr> </table> </form> Text below table

One common way of avoiding that whitespace padding is to stick the FORM tag inside a TABLE tag, floating freely without being inside any particular row/cell, like this:

html	screenshot
Form inside table:Text above table <table border=”1″> <form> <tr> <td>table cell</td> </tr> </form> </table> Text below table

I’ve never bothered to find a better way, until recently, when I decided that I didn’t like HTML validators complaining about that. So I searched and found a method of avoiding that whitespace that’s simple, seems to work fine in multiple browsers, and passes HTML validation:

html
Form outside table with style:Text above table <form style=”display: inline; margin: 0px;”> <table border=”1″> <tr> <td>table cell</td> </tr> </table> </form> Text below table
screenshot

spugbrap’s blog

August 7th, 2006

A Handy CSS Debugging Snippet

March 1st, 2006

html form tag without the top/bottom padding

Site Info

Feeds

My Other Sites