Custom Scrollbars CSS Help

[jtwn]

Got a problem, when I declare my doctype to HTML 4.01 my custom colour scrollbars disappear, when I remove it they return. Is it not correct markup or something for the version?

Also I never made my site compliant with any standards, I just made it so that it came out as I wanted to see in IE....not so in FF. Ironed out most of the problems but the biggest I can't get my head around, to center for IE, I made a container div of the whole site <div id="center"> with

#center {
position : absolute;
left:50%;
margin:0 0 0 -425px;
}

in the style.css. It works just like that, I remove any one of those and the positioning of the site goes crazy, the only way I have read to get the entire site vertically aligned in firefox is by modifying the margin values but I tried it and it had no effect.
Thanks

[Jon M]

To get the scrollbar CSS to work with the DOCTYPE set, apply it to the HTML element instead of the BODY element.
The reason is because it's non standard CSS.

I'll come back to you on the other questions once I've done some testing.
__________________

see my post below for the "center" css that works

[Richard M]

<insert usual rant about taking over the user's UI and not adhering to standards>
__________________

Originally Posted by jtwn

Got a problem, when I declare my doctype to HTML 4.01 my custom colour scrollbars disappear, when I remove it they return. Is it not correct markup or something for the version?

Also I never made my site compliant with any standards, I just made it so that it came out as I wanted to see in IE....not so in FF. Ironed out most of the problems but the biggest I can't get my head around, to center for IE, I made a container div of the whole site <div id="center"> with

#center {
position : absolute;
left:50%;
margin:0 0 0 -425px;
}

in the style.css. It works just like that, I remove any one of those and the positioning of the site goes crazy, the only way I have read to get the entire site vertically aligned in firefox is by modifying the margin values but I tried it and it had no effect.
Thanks

#center {
width: 800px; /* example size */
margin-left: auto;
margin-right: auto;
}

Probably won't work in IE but does in all others.

[Jon M]

Originally Posted by Richard M

<insert usual rant about taking over the user's UI and not adhering to standards>

I thought about making it another FF fanboy thread, with a healthy portion of standards compliance thrown in.. but thought better of it..

You're right about your code not working in IE though, which doesn't really get him any further unfortunatly.
__________________

Ok, this is ugly, but it works:

#center {position: absolute;
top: center;
left: 50%
}

(make the "top" parameter either a percentage or a pixel value to move it down)
__________________

Did that work ok?

Let me know if you want it to look different and I'll see if I can tweak it.

Have you got this site online?

[Richard M]

Originally Posted by Richard M

<insert usual rant about taking over the user's UI and not adhering to standards>
__________________

#center {
width: 800px; /* example size */
margin-left: auto;
margin-right: auto;
}

Probably won't work in IE but does in all others.

Aah sorry I thought you wanted it aligned the other way.
AFAIK there is no reliable way to do this, especially yours because it will fail in other resolutions.

[jtwn]

OK, I've tried all the solutions here but to no avail

Would appreciate any pointers on getting the scrollbars and centering right. I know there is alot of redundant code there but as the site has changed, I just added more code...

http://www.pojclan.co.uk/

[Jon M]

Got everything working except the scrollbars in FF (which I expected anyway)

[jtwn]

Thanks a tonne s1lv3r its much appreciated, you should be in the business with your skills =) We have post of the month here people!

[Jon M]

Lol, that was an easy one CSS wise.
Thanks though, I'm glad you got what you needed