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.

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.