A week or so ago, I posted some information on how to quickly style your WordPress images. After recently updating my company's web site (SDAC Inc. - I noticed if you used captions, my custom CSS would not work. Here is some CSS that will work with and without image captions:

The difference? I used img.align.. which worked if you did not use captions, but if you use caption, there is an outer div class called align... The more generic CSS posted here takes care of both issues.

Previously - I introduced a nice way to create drop down menus using HTML (lists), Javascript (drop down), and CSS (styling of menu). I put all of this together and called it: Jappler Menus. (See previous post about Jappler Menus).

Since writing that post - I have found a better, faster, cleaner way to work with drop down menus. I had originally seen some nice menus: http://help-developer.com and decided with some changes - that would be a much nicer way to work with menus. For this - I give you Jappler Menus version 2.

Here is an example of Jappler Menus in action: http://jappler.com/downloads/jappler-menus_v2/

There are 3 main components to the Jappler menus: HTML, Javascript (jQuery), and CSS.

1. The HTML to generate the menu contents. All you need to use to create the menu is create a simple HTML list:
   [html]
   • Home
   • About Us
     • Our Story
     • Our Clients
     • Our Philosophy
   • Our Products
     • WordPress Themes
     • WordPress Plugins
     • WordPress Consultation
   • HOWTOs
     • bbPress

     ... [more]

If you install WordPress and use the media uploader to manage your images in your posts - you can easily style your images quickly by adding the following code to your theme's stylesheet.

This code will set up your images to float appropriately, as well as give a nice border as seen below.

Note* This information is now updated: Updated CSS

Ever need a list which you can easily show/hide the content? Check out: http://cssglobe.com/post.asp?id=940

I am not a "quick fix" or "work around" type of person. When a CSS debugging project comes my way I look first at fixing the problem systemically vs. applying the quick fix. Recently though I was brought into a project with an insane amount of CSS and conflicting styles all over the place. Since I did not have ample time to fix the issues systemically (this was a super stat job) I was forced to use something that would take precedence over the problematic styles already in place to quickly fix the issues.

If you have worked with CSS before I am sure you have seen "!important" used but probably were not really sure what it was. I ended up using a "fixes.css" style sheet which was called in after all the other style sheets and then using "!important" with the styles I needed to correct (override). This was very helpful and if you ever run into a similar situation or have a certain style that you cannot seem to figure out why something is not showing up ("I set this to have a margin-bottom:20px; but there is no margin at all") try ... [more]

I was talking to one of my friends today who does a lot backend programming but often needs a quick and easy 3 column layout that has the floats all figured out. His frustration with floats prompted me to make a very basic layout for him to use. If you find yourself in the same situation - check out my basic 3 column layout.

After spending an hour on something that should have taken me 20 minutes - I wanted to pass on something I should have caught right away. The problem: you use CSS to lay something out and it looks great in Firefox and Safari - but not in IE. At this point I validate the CSS to make sure I did not forget a bracket or something stupid. Next step - validate the XHTML. This is where I would have solved my problem, but I failed to take this step. At that point I would have seen that the script I was working with did not have a doctype defined. Once I added in the doctype - everything loaded as expected and I could not believe I missed something so basic. Lesson learned - and hopefully you will know now as well to make sure a doctype is always set.

I have been busy this week with a few really cool projects - one of them to create a widget for any site that will show the latest news items from a RSS feed - while not limiting the widget to servers with PHP. After putting that together, I had to add inline CSS to style the feed output. Everything looked great but I could not figure out how to add a :hover to an inline style...until I realized I could fake it by adding some basic javascript: onmouseover and onmouseout to change the font color.

[html]
Title

If you are not comfortable with CSS or want to get a layout together really quick - check out the YUI CSS Grid Builder. You can easily create a layout, add content, and get the code in a matter of minutes. At the very least - this is a great starting point for beginners! Check it out!

After working on clients' web sites all day long, I often realize that this web site could benefit from things I learn while working on other projects. In the past few months I have put together some pretty amazing web sites that really bend WordPress so that the users can do just about any update to any text via the WordPress admin. I also have put together some other pretty advanced sites which rely heavily on template logic and really neat CSS. I had a few moments last night to update this site (cleaned up a lot of the templates, changed the home page, re-arranged the page content for the main pages, put in an archives section, and started thinking about how I could improve this web site to make it more useful for others. If you have any ideas - please let me know! For now - enjoy the changes, and optimized code.

There have been two great menu and navigation techniques I have used over the last few years:

1. Sliding Doors of CSS
2. Sons of Suckerfish (for drop down menus)

I have used both of these techniques on several web sites, but crazily not together...until a week ago when a client decided they wanted to move away from their antiquated menus that relied on hundreds of lines of javascript, HTML tables, and over 40 image files (for seven tabs). This technique works in IE 6, IE 7, Firefox, and Safari.

After I had put the code into place I thought it might be helpful for others to see exactly how it is done. These techniques give you a lot of flexibility with very lightweight code.

Code/Files Needed

1. Two tab images (left and right, with both an active and hover (highligted) option
2. Sub-menu arrow (not required)
3. Sons of Suckerfish javascript
4. CSS for both the drop downs and the sliding doors techniques
5. Menu list code (your menu items)

Two tab images
The sliding door technique is great because you do not need to make tab specific images, nor do you need to worry about the tab length - it is all taken care of by two images and some CSS. For ... [more]

I have been working on a number of half baked sites - sites that some other developer started and I was called in to complete them. Two of the sites had the same issue - major differences in height/spacing. If you ever run into this, please take a look to see what the "line-height" is set to. If it is not set at all, set it to something and work from there. If it is set to something, make sure it is not set in multiple places for the same element. Line height is one of the most overlooked way to troubleshoot IE/other browser spacing/height issues.

What do you do when you have thousands of lines of CSS and probably have hundreds of lines within the thousands that are no longer used...but you have no idea because multiple people have contributed? You use the CSS Redundancy Checker.

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.

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 ;).

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.

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:

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 ... [more]

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:

General Information:
Although it is very ... [more]

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:

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 ... [more]