Mikula: Toolbox


Certain things come up over and over again on new projects and it’s good to have a resource to reference. Hence, the tool box. I’ll be adding tools to this toolbox as often as things come up. What can you find in this post? Everything from pre-hover states, Safari/IE hacks, and the like. I personally think Safari has more problems than IE. Some things just don’t work for IE, but really don’t work 1/2 assed or different than they should… it just doesn’t support some useful shit that people ant. Safari on the other hand likes to partially support attributes… like line-height.

Safari Specific Hack

The only Safari specific hack that works perfectly without affecting other browser is the bracket. [line-height:1.8em; line-height:1.9em;]line-height:1.8em;

The first line-height is for Firefox/Mozilla browsers, second Safari, and third IE. However, you must specifiy your attribute (in this case, line-height) in a duplicate class (or tag/id depending) before using the Safari hack, otherwise Firefox/Mozilla browsers won’t pick it up. So your stylesheet should look something like:

.test { line-height:1.8em; }
.test { [line-height:1.8em; line-height:1.9em;]line-height:1.8em; }

Pre-Hover States

i.e. when you mouse over a specific area it will highlight links within it.

The pre-hover state looks like this:

p a:link,
p a:active,
p a:visited { color:#999 }
p a:hover { color:#333 }
p:hover a:link,
p:hover a:active,
p:hover a:visited { color:#555 }
p:hover a:hover { color:#333 }

You set the normal link and hover attributes (in this case color), followed by the hover state of the content area you want the links to highlight with it’s link and hover attributes. It pretty much reads: all links are light grey, but on mouse over they are dark grey. However, when your mouse is over any ‘p’ tag your links turn medium grey untill they are moused over, in which they will turn dark grey.

Good Ol’ Image Hover

Easiest and most compatible way to do an image hover is to not even use img tags. The concept is to move the background image of your tag on hover instead of changing it completely. Most javascript image rollover scripts have load time and blinking / pauses, but this way it’s one image and it just gets repositioned.

Create your image with the hover state stacked below it, and use the style below as an example if your image was 15px in height and a width of 50px.

#this { background:#000 url(images/this.gif) no-repeat; height:15px; width:50px }
#this:hover { background:#000 url(images/this.gif) no-repeat 0 -15px; width:50px }

Tags: ( Development )

© Copyright 2006 David Mikula, all rights reserved. Powered by wordpress, k2, and my hairy belly.
  1. So far there aren't any comments.

    However, if you feel like leaving one... I think that would be very nice. But then again, I'm not too much of a comment leaver so I guess it would be based totally on personal preference. Which ever you choose will be okay with me. Promise. PS. I'm going to make this form look hot in safari even if it kills me.