HOWTO: Target Firefox for Specific CSS

Generally – the best way to handle CSS is to keep it simple, clean, and without any hacks. From now and again there are some times when I need to write CSS specific to IE (using conditional comments). I recently came across a site where I needed to target Firefox because of a width issue. This is the first time in my many years I ran into this – and tried a number of hopeful solutions but nothing worked. I then found that if I used: @-moz-document url-prefix(){} that that would work out and only Firefox would use the styles within that.

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!

CSS Tuesdays: Keeping it Simple

I just released my fist two commercial WordPress themes: Lucidity and Lucidity Catalog with a focus on simplicity.

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.

CSS Tuesdays: Fun With User Agents

If you are going to do any serious CSS development and/or troubleshooting – you need to be able to see the site on as many browsers as possible. Generally – we have several browsers on several operating systems going at once so we can make sure our bases are covered.

Last week I built a mobile theme for a client and after a few refreshes on my iPhone – I decided I needed something easier and more developer friendly (I needed to view source). I use the “Develop” menu in Safari (Preference > Show Develop menu in menu bar) – and with that, I was able to choose my user agent (iPhone) – and then view how it would look using Safari which was much faster then using my iPhone – and I could easily view the source. If you need to do any development that depends on the user agent – don’t forget about this little trick!

Choose Your User Agent

Choose Your User Agent

CSS Tuesdays: Cool Breadcrumbs

There are plenty of times when you need to have a clear navigation path back to home or to a main section on a particular page, and most web developers use “breadcrumbs” to do this. Over the years, I have implemented breadcrumbs a number of ways, but I really like what I saw on Verlee’s blog.

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:

CSS Tuesday: Overide Inline Style

How many times have you worked with either someone else’s code or some crazy dynamically generated code that uses inline styles for everything which you need to change or override but cannot for some reason or another? I have seen this a lot with custom applications written by programmers who think they are doing designers some sort of favor.

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/

Quick CSS for WordPress Images (Updated)

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:

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

jQuery + CSS + XHTML = Jappler Menus v2

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:
    <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.