Category Archives: Bugs, Ew!

IE Displays White Space Above and Below A-Tag and Linked Images

I recently made a gallery with a bunch of image thumbnails laid out in multiple rows, each one linked to the larger image but when I tested in IE7 I noticed some white space in between the rows.  The reason for this is that IE adds a default line-height of 16px, so if the images or navigation items or horizontal rules (whatever it may be) is smaller than that, you’ll have to manually set the css for this object like so:


.thumbnail {line-height:1px; font-size:1px;}

Why am I getting “jQuery is not defined” Error in WordPress?

It sounds like your script is being loaded before jQuery, a couple of things will help you fix this:

First, you’ll want jQuery to recognize the $ shortcut so open up your .js file. I’m naming mine main.js and this bit of code:


jQuery(document).ready(function($){
   $('#hover-bullet1').mouseover(function() {
     $('#bullet-details1').removeClass('pretty-hide');
     $('#bullet-details1').addClass('pretty-hover');
   });
});

Note: Look at the first line closely, you want the to include the $ in the function.

Next, load in your file AFTER jQuery has finished loading, here’s how:
Open header.php from your theme folder.
Search for wp_head();
Add your script tag AFTER the php close tag that looks like this: ?>


...
   wp_head();
?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/main.js"></script>

Hope that helps!

Why do linked images display white space in between with IE7?

If you ever tried to display a row of linked images in a row, you may notice some white space in between them when viewing in Internet Explorer 7, this is because IE7 adds a default line-height of 16px which, in the case of seeing whitespace isn’t what you need.

To fix this change the parent container’s line-height property to something like 1em.

Why isn’t my CSS class working in hover or active state of a link?

One of the reasons your active or hover state isn’t working is because there is actually a particular order for pseudo-classes (link, visited, hover, active) in CSS. If they aren’t in the proper order, they won’t work.

This seems to be the shortest way to put it:


.footer a:link { text-decoration:none; color:#737373;}
.footer a:visited{ text-decoration:none; color:#737373;}
.footer a:hover{ text-decoration:underline; color:#0095e0;}
.footer a:active{ text-decoration:none; color:#FFFFFF;}

Note: a:hover MUST come after a:link & a:visited.
Note: a:active MUST come after a:hover.

It’s kind of a bummer for pseudo-classes to work this way because it seems like more code than it needs to be. I typically only use the link and the hover, so even though I define active link it doesn’t do anything and I only have two lines of CSS.


.footer a:link, .footer a:active, .footer a:visited {text-decoration:none; color:#737373;}
.footer a:hover{ text-decoration:underline; color:#0095e0;}

Feel free to comment if you have a better method.

How do I get Internet Explorer 7 to display z-index ?

The ticker bar lower shadow displayed perfectly in Safari, Chrome & Firefox, but IE didn’t show it.

It looked cut off like this:

To get IE to display z-index, you have add positioning and z-index to the parent container. I added a lower and higher z-index and both seemed to display just fine in IE7.


#jumpinconsole{
  width:100%;
  position:relative;
  height: 115px;
  overflow:visible;
  z-index:2000;
} 
 
#jumpinconsole .console_counter{
    padding:25px 0px 0px 0px;
    background-image:url(/images/background_fancalculator2.png);
    background-repeat:repeat-x;
    position:absolute;
    width:100%;
    top:-20px;
    left:0px;
    z-index:1000;
    height:145px;
  }

How do I fix edgy text in FireFox from JQuery’s fadeIn() & fadeOut?

If you are noticing a problem with text appearing light, crunchy or edgy in FireFox while fading in and out, you’ve found the cleartype bug! You’ll have to remove the filter property from the DOM. Try this:


document.getElementById("#container").style.removeAttribute("filter");

You’ll have to use after the fadeIn function is complete or in the function callback as follows:


$("#container").fadeIn(  function() {
    this.style.removeAttribute( "filter" );
});