Firefox’s 1 pixel indent on the caption tag

I was making a table that has a <caption> tag on it and I noticed that in Firefox there was a 1 pixel indent on the left side of the Caption and in Safari (Ver – 3.1.2) there is a 1 pixel right indent.

I could not figure out why that was until I found this “Styling Table Captions“. This page is outdated but has some useful information.

You would think that the basic fix for Firefox and safari would be this:

caption {
    margin-left:-1px;
  }

This only fixes Firefox and not the issues with Safari or Google Chrome.
I guess My immediate fix for this is to add a <td> with colspan and a class called caption.

Anyone has any Ideas how to fix this?

Update

Some more information on styling captions on tables.

This page has the fix for Firefox and some versions of Opera. Warning the fix does contain a hack.

Styling table captions with CSS: fixing the width problem

UI Elements Showcases

I have found some good resources for UI Elements Showcases. This is mostly Single elements within a web page for example a calendar, menus, tables etc etc. Now lets get to the Links

Smiley Cat Web Design

  1. Blog Comment Forms
  2. Blog Comments
  3. Calendars & Date Pickers
  4. Carousels
  5. Code
  6. Flash Video Players
  7. Footers
  8. Icons
  9. Image Captions
  10. Pricing Tables
  11. Pull Quotes
  12. Registration Forms
  13. Search Boxes
  14. Typography for Headlines

Smashing Magazine

  1. CSS-Based Footers
  2. CSS-Based Forms
  3. CSS Forms 2
  4. CSS-Based Tables
  5. Data Grids and Tables
  6. Navigation Menus
  7. Data Visualization 1
  8. Data Visualization 2
  9. Date Stamps
  10. Pagination
  11. Shopping Carts
  12. Slideshows & Lightboxes
  13. Tab based inferface
  14. Tag clouds

CSS-based Navigation, Screenshots (CSS Showcase)

If you know of any more please let me know and ill keep this post up to date.

Css Editors

Looking back at Smashing Magazines List of 35 Useful Source Code Editors I wanted to make a list of Css Editors that I think you should know about.

If you know of any that I missed (Which I have) please dont hesitate to Contact me or Comment about them. Ill keep adding to the list in other post.

Ill be putting up a poll soon to see what people prefer using for their CSS Editor.

Style Master:

Here is what they have to say about it.

“What can Style Master do?

We could go on about the features of Style Master. From beginner to expert, Style Master will make working with CSS more efficient, more productive, and more enjoyable. But why not just download our demo? Fully featured for 30 days, you can keep using it forever with some features turned off after that. It includes a heap of standards based templates as well as our hands-on tutorial which you can work through in your own time and learn the ins and outs of CSS using both Style Master and hand coding CSS.

No other software helps you design, code and debug your CSS better. Period.”

Version: 4.6 released November 2006
Platforms:
Windows 2000/NT/XP/Vista
MacOS X 10.3 or higher (Universal for PowerPC and Intel)
Cost: $US59.99
Demo limit: 30 days


CoffeeCup StyleSheet Maker:

Version: 5
Platforms:
Windows 2000/NT/XP/Vista
Cost: $US34.99
Demo limit: 30 days

Here is what they have to say about it.

“CoffeeCup StyleSheet Maker allows you to construct full-featured cascading style sheets, giving you full control of text placement, fonts, backgrounds, and more. You just have to change the tag definitions in the CSS file, because each Web page will look to that file for reference in terms of how to set itself up. You’ll also be able to overlap text, create links that aren’t underlined, place image backgrounds in tables, and even create your own tags with the functions you assign them.”


TopStyle:

Version: 3.5
Platforms:
Windows 2000/NT/XP/Vista
Cost: $US79.95
Demo limit: 30 days

Here is what they have to say about it.

You can edit your HTML, XHTML and CSS in a single program.

  • Preview CSS while you write it.
  • Style Checker to validate style sheets against multiple browsers.
  • Style Upgrade tool to quickly replace all outdated HTML code.
  • Site Reports to see at-a-glance where styles are used in your site.

The program offers many unique features, including the option to upgrade your HTML documents by replacing outdated markup with equivalent styling. You can also convert HTML to XHTML and check your CSS syntax against multiple browsers, using a side-by-side preview. A harmonious colors feature allows you to easily create pleasant color schemes for your site and more. TopStyle Pro offers complete site management with the built-in File Explorer, clip libraries and resource manager and integrates with existing web authoring tools.

They do have a Free Lite version of it.

TopStyle Lite is a free version of TopStyle that contains an extremely small subset of the features found in the Pro version of TopStyle. Most importantly, TopStyle Lite is strictly a simple CSS editor, whereas TopStyle Pro is a full-blown XHTML, HTML and CSS editor. However, if all you want is a very basic CSS editor, TopStyle Lite will serve you very well.

I personally use this editor and have been using it before Newsgator bought them. IMHO it is the best CSS editor out there and recomend it to anyone that I know or dont know.


Stylizer

Version: Can’t Find Version Info
Platforms:
Windows XP/Vista
Cost: $US69.95
Demo limit: 14 days

Here is what they have to say about it.

Stylizer is the CSS editor for getting things done. It’s loaded with enoumously powerful features and sports a gorgeous interface. Download it now and start knocking hours off each project.

6 Reasons You Can’t Live Without Stylizer

  • Live Preview
  • Adjust Sizes in Real-Time
  • Powerful Color Tweaking
  • Edit & Diagnose
  • Automatic Validation
  • Superior Interface

Dreamweaver

Version: CS3
Platforms: XP/Vista
Cost: $US399.00
Demo limit: 30 days

Here is what they have to say about it.

Complete CSS support

Discover the advantage of visual CSS tools that make it easy to view, edit, and move styles within and between files, as well as see how your changes will affect the design. Accelerate your workflow with new CSS layouts, and test your design with the new Browser Compatibility Check.


CSSEdit

Version: 2.6
Platforms: Mac OS X 10.4 or higher
Cost: 29.95€
Demo limit: 30 days

Here is what they have to say about it.

CSSEdit offers unrivaled real-time styling of absolutely any web page. Even when your dynamic Web App is powered by a complex database or makes use of advanced AJAX, you can style and analyze it without the hassle of uploading or refreshing.


Coda

Version: 1.1
Platforms: Mac OS X 10.4 or higher
Cost: $US 79.00
Demo limit: 30 days
Here is what they have to say about it.

Coda gives you a choice of two editing modes when working on your CSS. In visual mode, you’ll get convenient GUI controls that let you edit your style sheets with point and click simplicity. With text mode, your CSS styles are organized and you can edit the details, hard-core style, directly