css is ignoring padding in FF (only sometimes) weird

[scarhand]

this never happens in IE, only FF

 

sometimes when i visit my site the letter links in the menu are messed up. like the padding is ignored on only 1 of the letters when they ALL use the exact same code.

 

heres what i'm talking about:

 

what it should look like:

 

 

what it sometimes looks like:

 

 

as you can see, the padding on 1 letter is ignored. sometimes this alternates between different letters, but its always only 1 letter that this happens to.

 

here is my css code:

 

#menubarbg {
  background: url(images/menu_bar_bg.gif) repeat-x;
}

#menuletter a {
  background: url(images/menu_letter_bg_noh.gif) repeat-x;
  font-weight: bold;
  display: block;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  line-height: 20px;
  cursor: pointer;
}

#menuletter a div {
  background: url(images/menu_letter_l_noh.gif) left top no-repeat;
}

#menuletter a div div {
  background: url(images/menu_letter_r_noh.gif) right top no-repeat;
  padding: 0px 6px 0px 6px;
  height: 20px;
}

#menuletter a:hover {
  background: url(images/menu_letter_bg_h.gif) repeat-x;
  color: #000000;
}

#menuletter a:hover div {
  background: url(images/menu_letter_l_h.gif) left top no-repeat;
}

#menuletter a:hover div div {
  background: url(images/menu_letter_r_h.gif) right top no-repeat;
}

 

here is the html code:

 

  <table cellpadding="0" cellspacing="0" border="0">
  <tr>

  <td id="menuletter"><a href="guitar-tabs/1.html"><div><div>#</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/a.html"><div><div>A</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/b.html"><div><div>B</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/c.html"><div><div>C</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/d.html"><div><div>D</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/e.html"><div><div>E</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/f.html"><div><div>F</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/g.html"><div><div>G</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/h.html"><div><div>H</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/i.html"><div><div>I</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/j.html"><div><div>J</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/k.html"><div><div>K</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/l.html"><div><div>L</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/m.html"><div><div>M</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/n.html"><div><div>N</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/o.html"><div><div>O</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/p.html"><div><div>P</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/q.html"><div><div>Q</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/r.html"><div><div>R</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/s.html"><div><div>S</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/t.html"><div><div>T</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/u.html"><div><div>U</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/v.html"><div><div>V</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/w.html"><div><div>W</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/x.html"><div><div>X</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/y.html"><div><div>Y</div></div></a></td>

  <td id="menuletter"><a href="guitar-tabs/z.html"><div><div>Z</div></div></a></td>
  
  </tr>
  </table>

 

the reason it uses a table is so it displays properly on all browsers.

 

help....

[TheFilmGod]

The problem is caused by a pixel rounding issue. This usually occurs in IE, but other browsers such as FF or Opera sometimes share this trait to.

 

the reason it uses a table is so it displays properly on all browsers.

 

No, the reason you are using tables, is because it seemed the easiest solution to implement that "seemed" to work in all browsers. But clearly it doesn't. Because FF messes up. If it doesn't work in FF, its not good.

 

The solution? Use a floated list. This would improve search engine optimization as well. It should work IE6 +, Opera, FF, Safari, and every other darn browser that's "modernized." 

 

If you need help, just holler out. 

[haku]

I have to agree fully. Tables don't make things appear consistently across all browsers. A floated list will be much more likely to come close to that.

[scarhand]

The problem is caused by a pixel rounding issue. This usually occurs in IE, but other browsers such as FF or Opera sometimes share this trait to.

 

the reason it uses a table is so it displays properly on all browsers.

 

No, the reason you are using tables, is because it seemed the easiest solution to implement that "seemed" to work in all browsers. But clearly it doesn't. Because FF messes up. If it doesn't work in FF, its not good.

 

The solution? Use a floated list. This would improve search engine optimization as well. It should work IE6 +, Opera, FF, Safari, and every other darn browser that's "modernized." 

 

If you need help, just holler out. 

 

i actually ended up fixing it by using SPANs inside the <A> instead of DIVs (which was causing the problem, and also did not validate).

[haku]

I hope you replaced the two divs with one span. There was no need for two divs, and there is no need for two spans.

[scarhand]

I hope you replaced the two divs with one span. There was no need for two divs, and there is no need for two spans.

 

yes there is a need for 2 spans

 

the TD for the background image repeating-x, the 1 span for the top left corner, and the other span for the top right corner.

[TheFilmGod]

Can you show your complete and finished code?

 

I bet I can do this without using as much code. You create the <a > tag as display block and you float it left. You then need to clear the tags. There is absolutely no reason to be using any <td>, <div> or <span>.

 

The whole problem with my way, is that the size of the actual square would not be dynamically created depending on the size of the letter. - But if you ask me, they all SHOULD be the same size. It creates consistency and is more pleasing to the eye.

[haku]

I agree fully. But, that being said, I want to address this point:

 

yes there is a need for 2 spans

 

the TD for the background image repeating-x, the 1 span for the top left corner, and the other span for the top right corner.

 

You should be able to place a background image on the <a> tag and have only one span. I know of situations where this may not work, but I would be surprised if yours is one of them.

 

That being said, do what the Film God said.

[scarhand]

Can you show your complete and finished code?

 

I bet I can do this without using as much code. You create the <a > tag as display block and you float it left. You then need to clear the tags. There is absolutely no reason to be using any <td>, <div> or <span>.

 

The whole problem with my way, is that the size of the actual square would not be dynamically created depending on the size of the letter. - But if you ask me, they all SHOULD be the same size. It creates consistency and is more pleasing to the eye.

 

I want them to be dynamic to the letter size. I know I can easily do it without spans, but I want it to be dynamic.

 

Heres the finished code:

 

CSS:

.menuletter a {
  background: url(images/menu_letter_bg_noh.gif) repeat-x;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  line-height: 20px;
  cursor: pointer;
  display: block;
}

.menuletter a span {
  background: url(images/menu_letter_l_noh.gif) left top no-repeat;
  display: block;
}

.menuletter a span span {
  background: url(images/menu_letter_r_noh.gif) right top no-repeat;
  padding: 0px 6px 0px 6px;
  height: 20px;
}

.menuletter a:hover {
  background: url(images/menu_letter_bg_h.gif) repeat-x;
  color: #000000;
}

.menuletter a:hover span {
  background: url(images/menu_letter_l_h.gif) left top no-repeat;
}

.menuletter a:hover span span {
  background: url(images/menu_letter_r_h.gif) right top no-repeat;
}


HTML:

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="menuletter"><a href="guitar-tabs/1"><span><span>#</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/a"><span><span>A</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/b"><span><span>B</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/c"><span><span>C</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/d"><span><span>D</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/e"><span><span>E</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/f"><span><span>F</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/g"><span><span>G</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/h"><span><span>H</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/i"><span><span>I</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/j"><span><span>J</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/k"><span><span>K</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/l"><span><span>L</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/m"><span><span>M</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/n"><span><span>N</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/o"><span><span>O</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/p"><span><span>P</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/q"><span><span>Q</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/r"><span><span>R</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/s"><span><span>S</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/t"><span><span>T</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/u"><span><span>U</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/v"><span><span>V</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/w"><span><span>W</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/x"><span><span>X</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/y"><span><span>Y</span></span></a></td>
<td class="menuletter"><a href="guitar-tabs/z"><span><span>Z</span></span></a></td>
</tr>
</table>