Example:

.font_example {font-size:1.1em;}
@-moz-document url-prefix() {
     .font_example {font-size:1.075em;}
}

Safari, Chrome, IE, etc will use the first .font_example code while Firefox will use the code within @-moz-document url-prefix(){}.

While this is not recommended for everyday usage – when and if you hit a wall, this could be something that will save a lot of time and headaches!

After creating over one hundred custom WordPress themes – I decided to take my most requested features, coupled with a slick admin interface, and some really simple XHTML and CSS and put it together to create a really easy to use and customize theme.

If you looking for something really easy and clean – take a look at the CSS used. You can see that a little goes a long way!

Just remember – keep it simple. When you overcomplicate – you will end up with sloppy code, hacks, and problems with old/new browsers alike.

If you are looking to add some style to your breadcrumbs and want to take it to the next step – check out how she used some CSS and clean XHTML to accomplish something like this:

Something that I recently found that will allow you to override inline styles:

<p style="margin:20px">The inline style (style=) will give the paragraph a 20px margin.</p>

Let’s override that because I think 20px is overkill and I only have access to the stylesheet:

p[style] {margin:10px !important;}

Of course that will override any paragraph tag that has an inline style – but you can see where this is going.

Reference: http://css-tricks.com/override-inline-styles-with-css/

Add this little bit of code to your CSS that controls the button or image and you will no longer see these ugly outlines:

outline:none;

Outlined

Not Outlined

.alignright, .aligncenter, .alignleft {padding:4px;background:#ecece2;border:1px solid #c7c7bb;}
.alignright {float:right;margin-left:5px;}
.alignleft, .alignnone {float:left;margin-right:5px;}
.aligncenter {display: block;margin-left: auto;margin-right: auto;}

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.

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:

   <ul>
   	<li><a href="#">Home</a></li>
   	<li><a href="#">About Us</a>
   		<ul>
   			<li><a href="#">Our Story</a></li>
   			<li><a href="#">Our Clients</a></li>
   			<li><a href="#">Our Philosophy</a></li>
   		</ul>
   	</li>
   	<li><a href="#">Our Products</a>
   		<ul>
   		       <li><a href="#">WordPress Themes</a></li>
   		       <li><a href="#">WordPress Plugins</a></li>
   		       <li><a href="#">WordPress Consultation</a></li>
   	         </ul>
   	</li>
   	<li><a href="#">HOWTOs</a>
   		<ul>
   			<li><a href="#">bbPress</a></li>
   		        <li><a href="#">WordPress</a></li>
   		        <li><a href="#">General</a>
   		        	<ul>
   					<li><a href="#">CSS</a></li>
   					<li><a href="#">XHTML</a></li>
   					<li><a href="#">Javascript</a></li>
   				</ul>
   			</li>
   	         </ul>
   	</li>
   	<li><a href="#">Archives</a></li>
   	<li><a href="#">RSS Feed</a></li>
   </ul>
   

2. The javascript that makes the drop downs fade in and out. This uses jQuery and then some custom JS that takes care of our menu:

   function japplerMenu(){
   $(" #navigation ul ").css({display: "none"}); // Opera Fix
   $(" #navigation li").hover(function(){
   		$(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(200);
   		},function(){
   		$(this).find('ul:first').css({visibility: "hidden"});
   		});
   }
    $(document).ready(function(){
   	japplerMenu();
   });
   

   }

3. The CSS to make things look pretty.Here is the custom CSS that is needed:

   #mainNav {height:30px;background: url('images/mainNav_bg.gif') repeat-x;width:623px;}
   #navigation, #navigation ul{position:relative;z-index:1000;list-style-type:none;list-style-position:outside;margin:0;padding:0;}
   #navigation a {display:block;padding:0 20px 0 20px;font-size:1.1em;font-weight:bold;color:#fff;text-decoration:none;line-height:30px;}
   #navigation li:hover {background: url('images/mainNav_bg-over.gif') repeat-x;}
   #navigation li:hover a {color:#fff;}
   #navigation li{float:left;position:relative;}
   #navigation ul {width:165px;position:absolute;left:-1px;top:29px;display:none;background:#f1f4f2;border:1px solid #4b4d5b;border-bottom:none;}
   #navigation li:hover li a {color:#333;}
   #navigation li ul a {float:left;width:155px;line-height:normal;font-weight:normal;font-size:.95em;text-align:left;border-bottom:1px solid #4b4d5b;background:#f1f4f2;height:auto;padding:5px;}
   #navigation li ul a:hover {background:#a4a5a9;color:#000;}
   #navigation ul ul{top:auto;}
   #navigation li ul ul {left:160px;margin:0;}
   #navigation li:hover ul ul, #navigation li:hover ul ul ul, #navigation li:hover ul ul ul ul{display:none;}
   #navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul{display:block;}
   

   There is also some additional CSS for IE 6. (See IE 6 specific CSS). You can add some conditional logic to include this for only IE 6 (See the example source above – look in the header for the conditional code.)

These menus are compatible with IE 6+, Safari 2+, Opera 9+, and FF 2+. If you want it to work in IE 6 – I have a start on some CSS that will make it work.

img.alignright, img.aligncenter, img.alignleft {padding:4px;background:#efefef;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;}
img.alignright {float:right;margin-left:5px;}
img.alignleft, img.alignnone {float:left;margin-right:5px;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;}

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