Cellspacing and Cellpadding With CSS

In HTML, a <table> can have a couple attributes added to it: cellspacing and cellpadding, and these attributes are valid code. Unfortunately, these have default values so that writing

<table>

is basically the same as

<table cellpadding="1" cellspacing="2">

This becomes a problem when you do not want this additional space and cannot change the HTML, as cellpadding and cellspacing are not CSS attributes. There is still a way to get around this in CSS with the following code:

table {
border-collapse: collapse;
}

table td {
padding: 0
}

Always Learning

It seems funny to me, that because of the way I learned CSS there are still lots of things I don't know.

For instance, a couple weeks ago I was in a Barnes & Noble and picked up a CSS book. After flipping to random page, I found a CSS property I didn't know existed: outline. When used in this way:

a { outline: none; }

the outline you see after clicking on a link no longer displays.

This is particularly helpful in Firefox, because for absolutely positioned links, the outline often stretches to the far left side of the page, which drove our QA person nuts. Previously, I was fixing this behavior by using overflow:hidden, but this doesn't always work depending on how your links are set up. I personally don't like the outline, so I plan on setting it to none on all of my sites now.

IE6 Disappearing Images Solution

After a bit of testing on my issue with the sprites disappearing on hover, I came up with a temporary solution. I still wasn't satisfied with it, and did some more searching on Google. That lead me to a nice script that fixes the problem. Here are the two solutions:

Temporary Fix:
Take the images being used for each link, and set them as the background of the ul or table you are using for the navigation. I made a quick attempt to set the image as the background of the li that contains the anchor, but that still flashed. It seemed to work fine putting it in the background of the ul. This solution does not fix the disappearing images, just makes it less noticeable.

Script Fix:
Doing a Google search led me to this script:

<script type="text/javascript">
document.execCommand("BackgroundImageCache",false,true);
</script>

and that seemed to fix the problem just fine. I have more testing to do, but hopefully this will be my final solution.

IE6 and Dropdown Navs

So I have run into this certain issue lately involving dropdown navigation menus and IE6. It doesn't happen all the time, but with certain sites I have noticed the background on menu items disappearing when you hover over them to display the dropdown. It doesn't always only cause the hovered item's background to disappear, but sometimes also the background of the items continuing to the right of the hovered item.

I am pretty sure this is being caused by the Javascript that was written for the dropdowns to work, specifically for IE6. The dropdowns do appear in other browsers without the use of the Javascript. The JS in question simply changes the name of the class applied to your hovered item. I tried to use JQuery instead, and got the same result.

Upon further inspection today, I found that this is only happening when your main nav items are using background images, instead of pure CSS colors. The images I am using are even sprites, so there is no apparent reason for their disappearance. One site I am seeing this behavior on is our own, so that can easily be changed to not use images. The other, unfortunately, is a client site. The designer has designed the site in such a way that images are necessary, and as we recently discovered, the client is using IE6.

So much for ignoring the obsolete.