Great CSS Buttons

I am working on a project that started small and got really big. Good for the company, bad news for the code. I am in the process of going through the code and to fix and optimize it for multiple browsers. One word of advice for developers: when starting a new project, expect exceptions. One issue I have run into: not all buttons will be 90px wide like once thought by the original designer. By using flexible code, your big and small sites can benefit from changes in the future. If you are going to create buttons for your site, check out the “sliding doors” buttons. I also recommend the “sliding doors” tabs – I use those on almost every site I do.

WordPress Jobs

I was approached a few months ago with a project that sounded like a great opportunity: to design the UI and logo for the new WordPress Jobs web site (which my company does about 90% overall business on WordPress development). If you missed the announcement for the site, check it out. If you need WordPress consulting, you could go to the site, or you could go to the company who helped build the site ;).

css containers: one image, fixed width, rounded corners.

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the third of three articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I have used this code on several large and small sites and have enjoyed the flexibility of both changing the height and the width. (Also see css containers: simple, fixed width, rounded corners, and css containers: fancier, fixed width, rounded corners..)

There are some sites where you need to have some flexibility with both height and width of the containers. This technique is known as the “ThrashBox” and I will not go into detail about it because it is well documented: ThrashBox. If you want to use something like this, there is a great web site that offers to create the graphic needed based on your input of color, height, weight, and corner radius. Check it out:Spiffy Box.

CSS Containers: Fancier, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the second of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I created this code from scratch and use this for any fancier fix width boxes I might need for sites I create. Height is not fixed. (Also see css containers: simple, fixed width, rounded corners.)

The container:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url(“/downloads/rounded-corners/top-rounded.gif”) no-repeat bottom;}
.roundedBoxMiddle{background: url(“/downloads/rounded-corners/middle-rounded.gif”) repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url(“/downloads/rounded-corners/bottom-rounded.gif”) no-repeat top;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

.roundedBox {width:300px;}
.roundedBoxTop{height:10px; background: url("/downloads/rounded-corners/top-rounded.gif") no-repeat bottom;}
.roundedBoxMiddle{background: url("/downloads/rounded-corners/middle-rounded.gif") repeat-y; padding:0 10px 0 10px;}
.roundedBoxMiddle p {margin:0; padding:0;}
.roundedBoxBottom{height:15px; background: url("/downloads/rounded-corners/bottom-rounded.gif") no-repeat top;}


<div class="roundedBox">
<div class="roundedBoxTop"></div>
<div class="roundedBoxMiddle">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<div class="roundedBoxBottom"></div>
</div>

General Information:
This is based on a simple graphic I created in Photoshop using the rounded corner box tool, a drop shadow, a stroke, and a left to right gradient. I then cut it up into three pieces: top, middle, bottom. *The .roundedBoxMiddle p {margin:0; padding:0;} is specific to my layout and is not needed if you want to use this.

CSS Containers: Simple, Fixed Width, Rounded Corners

I use reuse a number of CSS/XHTML layouts everyday and feel it is time to share. This is the first of 4 articles in a series on how to create various CSS rounded corner or “fancier than a simple box” container with CSS and XHTML that work in IE 6, IE 7, Firefox 1.5, Firefox 2.0, and Safari 2.0. I did not create this code from scratch – but I will use it if I need something really simple and really quick. Height is not fixed.

The container:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent{margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

Content

This is a quick and easy way to do something that looks better than a square box.

The code:

b.rtop, b.rbottom{display:block;background: #FFF;}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA;}
.jzcontainer{width:200px;background: #9BD1FA;margin-bottom:10px;}
.jzcontent {margin: 5px;}
.jzcontainer p{margin:0;}
b.r1{margin: 0 5px;}
b.r2{margin: 0 3px;}
b.r3{margin: 0 2px;}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}

<div class="jzcontainer">
<b><b></b><b></b><b></b><b></b></b>
<div class="jzcontent">
<h2>Content</h2>
<p>This is a quick and easy way to do something that looks better than a square box.</p>
</div>
<b><b></b><b></b><b></b><b></b></b>
</div>

General Information:
Although it is very simple, I am not a fan of the code at all. My next example in this series will look at a fancier and more elegant solution for rounded corner containers. *The .jzcontainer p{margin:0;} is specific to my layout and is not needed if you want to use this.

Page Shift Fix for Safari and Firefox

Ever have a site that when clicking through pages would slightly shift to the left or right? This was driving me crazy and finally after doing some research I found a hack that will do until I can find the solution:

/*this is to keep page from shifting to left on load in safari and firefox*/
html { min-height: 100%; margin-bottom: 1px; }
html { overflow: -moz-scrollbars-vertical !important; }

jappler.com 14.7 update: a tune up.

Over the past few months I have been busy working on client web sites and have neglected jappler.com. I have been using WordPress for a few years now with this site and had a number of plugins, CSS styles, and other items that needed to be pruned while I wanted to spruce up and clean up some other layout items.
Summary of the jappler.com tune up:

  • Went through all my plugins and disabled and removed anything that could be replaced with a template tag
  • Removed all old and un-used CSS styles
  • Removed CSS code that I could do better or that was not needed
  • Re-validated my code
  • Added the rounded corner/drop shadow boxes around my content
  • Re-arranged my post meta information (author, date, tagged, comments, etc)
  • Began organizing my categories better
  • Removed any duplicative code and either used a WordPress function or an includes file to handle the content/code (links, search, etc)
  • Created a WordPress 404 page with my old 404 standby
  • Went through my pages and cleaned up the text and updated any outdated information
  • Re-organized my sidebars and their content
  • Removed any un-used images

Every once and awhile it is good to clean up your sites so they do not become overly bloated. Don’t know where to start – check out the list above 😉

CSS Tips and HOWTOs From W3C

I have been very busy working on CSS for a big up and coming web site and I have spent the last few nights doing some research on best practices and came across a W3C site I used when I first started coding with CSS that is very useful. There are a number of tips and howtos for the very things you think should be “easy” when laying out a page…and that your clients always want like:

If you are just starting out with CSS or are looking for some help with something you *think* should be simple, spend some time at the W3C Web Style Sheets CSS tips & tricks web site.

Keep It Simple!

I am currently working on a big project which includes wrangling over 12k lines of CSS. Tonight it took me an hour to create a very simple form when it would normally take me 5 minutes. Why? Overcomplicated CSS. At this point I am using so many default values (like vertical-align: baseline; and float:none;) that it is insane.

Why can’t I start from scratch and just toss all the old code that is messing everything up? I wish I could, but so much of the project is reliant on it, that I am forced to plow through it.

Just a quick reminder to all those people who work with CSS: keep it simple and define the bare minimum.