the gnome and the window seat - Kyle Crouse / frogblog / frog design

Don’t Block the Float

Here’s a CSS tip to get started while I work on a larger piece about a GE.com feature. This was recently asked of me by a friend and may not be common knowledge.

When an element has a float property applied to it with a value of left or right, it automatically becomes a block-level element. I often see the following code:

display:block;
float: left;

The display rule in this case is redundant, as the block is implied through the float. Save a few bytes and remove this unnecessary line from your stylesheet.

For those not-so-savvy with IE6 bugs, using the above rule when combined with a margin applied to the same direction as the float, like so:

display:block;
float:left;
margin-left:10px;

…will double the size of …

Read More...

Under the Hood of GE.com

Welcome to The Gnome and the Window Seat, a new frogBlog chronicling our adventures developing GE.com. As a lead front-end developer for GE.com at frog, I worked intimately with the outline and creation of the HTML, CSS and JavaScript of the site. Through this blog I’ll provide you with a behind-the-scenes look at coding techniques for producing an accessible, valid site that is easily maintained by the GE team. As new problems arise, I’ll attempt to live-blog the development process with details and examples to assist you when you encounter similar problems within your own sites.

Here goes nothing…

Read More...