Crooked Table Border in FireFox

[BeLlSiBuB]

Hi fellow webmasters!
I have a small but really annoying problem. When I change the border size in my leaderboard table to anything over 1px, FIREFOX will render the border crooked. When you hover the mouse pointer over the crooked bit it straightens up but goes crooked further up or down the table. The border seems fine in IE and Chrome. Also, when I change the border from "solid" to "thin" (and quite a few of the other options including "thick") the border vanishes completely. I have never come across anything like this before and it has got me well and truly stumped. had a look with firebug but not really sure what part of firebug would reveal the answer. Any ideas please would be very welcome!

tr.poker_row0 {
background:url(http://www.example.com/css/leaderboards/odd.png);
border-collapse:collapse;
border-color:#222;
border-style:solid;
border-width:0;
font-weight:700;
line-height:160%;
text-shadow:1px 1px 0 #000;
}

tr.poker_row0:hover {
-moz-transition:background .2s linear;
background:none;
}

tr.poker_row1 {
background:url(http://www.example.com/css/boards/even.png);
border-collapse:collapse;
border-color:#222;
border-style:solid;
border-width:0;
font-weight:700;
line-height:160%;
text-shadow:1px 1px 0 #000;
}

tr.poker_row1:hover {
-moz-transition:background .2s linear;
background:none;
}

table.poker {
border-collapse:collapse;
font-family:Verdana;
font-size:.9em;
margin-top:10px;
width:100%;
}

table.poker thead {
color:inherit;
font-weight:700;
text-align:left;
}

table.poker td {
border:solid #222;
border-width:3px!important;
}

table.poker tbody {
font-weight:700;
}

div.poker h1 {
font-size:1.5em;
}

div.poker h2 {
font-size:1.1em;
}

p.poker {
margin:0;
padding:0;
}

th.numbers,td.numbers {
text-align:center;
}

div.poker_head h3 {
color:inherit;
font-size:125%;
font-weight:700;
height:29px;
line-height:29px;
padding:0;
}

div.poker_head h4 {
color:inherit;
font-family:Verdana,Arial;
font-size:125%;
line-height:0.8 em;
}

div.poker_head p {
display:block;
line-height:1.5;
margin:1em 0;
padding:0;
}

.clr {
clear:both;
height:1px;
margin-top:-1px;
overflow:hidden;
}

.dnp {
font-size:10px;
margin:5px;
}

#flashcontent {
float:left;
width:59%;
}

#flashcontent_2 {
float:left;
width:39%;
}

#update {
font-size:24px;
margin-top:20px;
text-align:center;
}

#venue_info {
float:left;
text-align:justify;
width:65%;
}

#venue_data {
float:right;
width:35%;
}

#venue_image {
margin:15px 0 0;
}

#event_info {
float:left;
width:50%;
}

#event_photo {
float:right;
margin-bottom:10px;
text-align:center;
width:50%;
}

#event_photo p {
color:inherit;
font-weight:700;
margin:5px 0 0;
}

table.mypoker {
display:none;
}

#googlemap {
display:none;
}

table.headbg {
background:none;
}

.chart {
background:url(http://www.example.com/images/chart-bg.png);
border:1px solid #E3E1E1;
margin-right:5px;
padding-bottom:13px;
}

.t-p-a {
background:url(http://www.example.com/images/advert-bg.png);
border:1px solid #202020;
padding:10px;
vertical-align:middle;
}

[edited by: alt131 at 11:27 am (utc) on May 28, 2011]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi BeLlSiBuB [webmasterworld.com], and welcome to WebmasterWorld :)

I'm not sure about the "crooked border" as browsers draw straight lines, and I couldn't reproduce the issue. Always useful to validate [validator.w3.org] when code is not behaving as desired.

Note you have set border-width:0; That specifies a zero-width border, so there should be no border showing at all.

In terms of changes from "solid" to "thin" causing the borders to vanish, make sure you have the correct property/value match. For example
border-width [w3.org] takes thin/thick/medium and a length (like 1px)
border-style [w3.org] takes solid/dashed etc.
So for eg, border-width:solid; has no meaning, which could be why the border "disappears"

firebug will reveal the styles being applied to the elements. There is a picture and explanation of that "part" in the html development/view source live [getfirebug.com] section of the help documentation

[lucy24]

I think this may be a rendering glitch in Mozilla. I use Camino (Mozilla Lite), and have sometimes noticed similar behavior. So your users are probably accustomed to it and won't think there is anything wrong with your site ;)

Oh, and it's safer to specify border width in pixels, rather than "thick" or "thin", because otherwise the exact size is at the browser's discretion. (Same goes for color. If you need black borders, be sure to say so.) You can get some truly icky results if you leave it up to the browser.

[BeLlSiBuB]

Thanks very much for your input! I am thinking that the errors are only showing on Firefox 4 in because it is so finely tuned.
I have started to validate the css and already seeing differences. :)

Update: Seems to be something to do wiith "border collapse".

[BeLlSiBuB]

Ok I fixed the problem. It was missing CSS.

I changed:

table.poker, table.poker td, table.poker th {
border: 3px solid #222;

}

To:

table.poker, table.poker th, table.poker td
{
border-width:3px;
border-style:solid;
border-color:#222222;
border-collapse:seperate;
}

Thanks again for your help! This is SOLVED.

[alt131]

Hi BeLlSiBuB, pleased it is solved, and thanks for letting us know :)

@lucy24

...may be a rendering glitch in Mozilla. I use Camino (Mozilla Lite), and have sometimes noticed similar behavior.

Now that sounds interesting - can you expand a bit more Lucy?

[lucy24]

Can't really say much besides "glitch". Sometimes vertical alignment just slips a pixel or two out of whack. Scroll up & down and it fixes itself. It isn't computer- or version-specific. Not necessarily in tables; it can happen any time. But the vertical lines in tables are of course especially obvious.

(To answer the inevitable "Why..." question: Back around 2003, Camino was the only browser that had a popup blocker override. Safari had only got as far as the blocker itself-- That Other Browser of course didn't even have that-- and Firefox was still in development.)

[alt131]

Thanks for that Lucy. Very interesting - and at first instance sounds like a rounding error.
l-c-n's test page has gone, but is it possible to pop over to p.i.e [positioniseverything.net] and post the result - plus whether it only happens vertically, or horizontally too?

[lucy24]

Nope, nothing to see. It's very random: that is, not a regular behavior but something I notice maybe once a month at most. But I'll take notes next time and see if there's anything I can point a finger at.

While I was there I tried my other four browers. (Er, four of five others. I did not try it in Lynx ;)) Safari failed pretty spectacularly, giving me a 4x4 grid when I first opened the window. Chrome behaves much the same, not surprisingly, as does the HTML preview in my text editor (also Apple Web Kit-based). Opera not so hot either. Firefox was fine.

<drifting off topic>
Interesting to see a discussion of rounding, because I recently did a javascript thingie involving resizing a solid-black image based on proportions of a given number. The html <img> didn't seem to mind a bit that I was feeding it non-integers for the "height" and "width" values, but it seemed safest to round them off anyway.
</drift>

[alt131]

@BeLlSiBuB, if this seems very theoretical, it is - you've triggered an interesting point.

@Lucy - what, not lynx? :)

The firefox backstory is that there was a huge outcry when the counting/rounding issue was discovered so it was fixed. Ingo chao [satzansatz.de] did a technical piece in 2005. Since then "rounding/counting" is often treated as ie-only - obviously not the case.

Best I can tell odd numbers are more likely to trigger (makes sense), and some engines don't handle fractions - safari being the worst I've experienced. I'd round everything if I could!

But that makes Camino even more interesting - I thought it was based on Gecko? It forked before the rounding/counting furor, but I would have expected it to be fixed as well - so know wonder if what you're seeing isn't counting/rounding. I'd be really interested to hear what you deduce next time you see it.