CSS - Firefox: Always Display Scrollbar

Here's the bug I found with Firefox: when you use code like this: css Code:
Original - css Code .scrolling { height: 100px; overflow: auto; }

  

 .scrolling


 {


  height: 100px;


  overflow: auto;


 } 

Firefox gives it the same width as the unscrolled version, forcing you to scroll right to read everything. Even css Code:
Original - css Code overflow: scroll;

  

 overflow: scroll; 

produces a horizontal scrollbar, although the division is now the correct width. But I've found a css-only way around this: css Code:
Original - css Code .scrolling { height: 100px; overflow: -moz-scrollbars-vertical !important; overflow: auto; }

  

 .scrolling


 {


  height: 100px;


  overflow: -moz-scrollbars-vertical !important;


  overflow: auto;


 } 

I know, it's not kosher to use nonstandard code, but it works on both IE and Firefox. Try it!

Hello

I know that on IE I can control the look of the scrollbar via:
* scrollbar-face-color
* scrollbar-highlight-color
* scrollbar-shadow-color
* scrollbar-3dlight-color
* scrollbar-arrow-color
* scrollbar-track-color
* scrollbar-darkshadow-color

Is it possible to control its look also in Firefox 1.0 and Opera 7.54?

regards

I use tables as little as possible, and as such have very little experience of them with CSS - and I'm having a weird problem.

I wanted to create a table that has blocks of rows with their own 2px solid border, but with a 1px dotted border between cells. There are other rows between these blocks with no border at all. I've posted a very cut-down version of the page, including just the relevant part of the style sheet, at <http://www.highway57.co.uk/tests/tabletest>.

Because of an IE issue (of course! - see below) I ended up resorting to a fairly clumsy method: in the blocks referred to above, all the cells start with a 1px dotted border all round, then there are classes for t, r, b and l that have the corresponding border reset to 2px solid. As there are only two columns, every cell has either one or two of these classes applied. I'm using border-collapse: collapse.

This works fine in IE6, IE7, Opera (Mac and Win), Safari, OmniWeb and even Netscape 7.2 (Mac), but in the other Gecko browsers I have - Firefox and Camino - the table sprouts a superfluous vertical scrollbar which scrolls exactly 1 pixel. Rogue horizontal scrollbars I've dealt with before (usually a width issue), but I can't understand why I should get this vertical one, and it's driving me nuts - nothing I try gets rid of it.

OK, so why am I doing it this clumsy way? Originally I put each of the bordered blocks of rows in its own tbody, and applied borders to tds, trs or tbodys as appropriate, but neither IE6 nor IE7 appears to support borders on trs and tbodys - can anyone verify this? Nevertheless, I still got the scrollbar problem in Firefox: apart from the IEs, the visible result was exactly the same.

Any clues would be gratefully received!

Hello;
Could anyone tell how to kill the scrollbars from IE, Firefox, Netscape.,please.

My following code just work for IE, it doesn't not affect another browsers.

#newst {overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;}



<textarea name="newst" id="newst" rows="10" cols="45" ></textarea>

This code works in IE but not in FF. Does Firefox not support these?

<style type="text/css">
<!--
A:link
{
text-decoration: underline;
color:"#ffffff";
}

A:visited
{
text-decoration: underline;
color:"#ffffff";
}

A:active
{
text-decoration: underline;
color:"#ffffff";
}

A:hover
{
text-decoration: none;
color:"#fffffff";
}

Body
{
background:url(http://n0madism.tripod.com/mbg.jpg);
background-color:#000000;
background-repeat: no-repeat;

font-family:Georgia;
color:#ffffff;
font-size:10 pt;
text-align:left;

scrollbar-face-color : #000000;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #000000;
scrollbar-shadow-color : #000000;
scrollbar-darkshadow-color : #000000;
scrollbar-track-color : #000000;
scrollbar-arrow-color : #FFFFFF;
}

td
{
font-family:Georgia;
color:#ffffff;
font-size:10 pt;
}

-->
</style>