a firefox scrollbar bug

[meltedown]

here is the problem broken down to a simple example:
http://reenie.org/test/test26.php

There is a blue table you must scroll down to.

The table has cellspacing of 1 with a div for a background to make
single pixel cell borders. As you can see, the right hand of the table
has a 2 pixel border in firefox.

The thick border only shows up when there is a scroll bar.

Is there any way around this ?

 

[Thomas Jollans]

here is the problem broken down to a simple example:
http://reenie.org/test/test26.php

There is a blue table you must scroll down to.

The table has cellspacing of 1 with a div for a background to make
single pixel cell borders. As you can see, the right hand of the table
has a 2 pixel border in firefox.

The thick border only shows up when there is a scroll bar.

actually, it only shows up for certain window sizes. These are so few that
the glitch could be avoided.

Is there any way around this ?

/* untested
skip the div, make the table class='blu' */
table.blu { width:50%; margin:auto; border-top:1px solid blue;
border-right:1px solid blue }
table.blu td { border-bottom:1px solid blue;
border-left:1px solid blue }

 

[Martin Jay]

here is the problem broken down to a simple example:
http://reenie.org/test/test26.php

There is a blue table you must scroll down to.

The table has cellspacing of 1 with a div for a background to make
single pixel cell borders. As you can see, the right hand of the table
has a 2 pixel border in firefox.

The thick border only shows up when there is a scroll bar.

Is there any way around this ?

I was about to say what 2 pixel border on the right, but then I re-sized
Firefox's window and saw your problem.

Maybe give the table 50% width and use the style "border-collapse:
collapse," then give the td the 1px blue border you want. Something
like this:

<style type='text/css'>
td{background:white; border: 1px blue solid;}
table{width: 50%; margin: auto; border-collapse: collapse;}
</style>

I've uploaded the full page to
<http://www.spam-free.org.uk/pages/table.html>.

 

[Jim Moe]

here is the problem broken down to a simple example:
http://reenie.org/test/test26.php

There is a blue table you must scroll down to.

There is no blue table. There is no scroll bar.

The table has cellspacing of 1 with a div for a background to make
single pixel cell borders. As you can see, the right hand of the table
has a 2 pixel border in firefox.

The thick border only shows up when there is a scroll bar.

Is there any way around this ?

Not really. This is a bizarre little defect in FF (the gecko engine), an
off-by-one error caused, no doubt, by rounding to integer values. As the
viewport width is changed, that border changes size as well.
Your method to get such a border is rather unusual. Most people would
use the "border" property to define a border:
table {
border-collapse: collapse;
border-top: 1px solid blue;
border-right: 1px solid blue;
}
td {
background:white;
border-left: 1px solid blue;
border-bottom: 1px solid blue;
}

 

[meltedown]

I was about to say what 2 pixel border on the right, but then I re-sized
Firefox's window and saw your problem.

Maybe give the table 50% width and use the style "border-collapse:
collapse," then give the td the 1px blue border you want. Something
like this:

<style type='text/css'>
td{background:white; border: 1px blue solid;}
table{width: 50%; margin: auto; border-collapse: collapse;}
</style>

I've uploaded the full page to
<http://www.spam-free.org.uk/pages/table.html>.

Looks good, thanks for the tip.