positioning moz/webkit

[ecarter202]

i have 2 compatibility issues with my site, and i don't fully understand how to implement -moz | -webkit into css.

the first image is webkit (aligning buttons under banner nicely)
second is moz (needs to be moved down)

""(hidden scrollbar, or at least no white background)
""(ugly white behind scrollbar)

code:
table#nav {
position:absolute;
top:130px
}


Thank you for the help!

[rtrethewey]

Screenshots don't convey enough information. We need to see the code for your page. Post the code for the page here or online somewhere.

[ecarter202]

NAV BAR
------------------------
table#nav {
width:850px;
height:50px;
position:absolute;
top:130px; // looks great for webkit, but not far enough down for moz
background:none;
}

SCROLL BAR
----------

div#scrollPictures {
width:450px;
height:330px;
overflow:auto; // works with webkit, but has ugly white scrollbar on moz.
overflow: -moz-appearance:none; // my failed attempt to fix.
margin:150px;
padding:10px;
}


This is an external style sheet. I'd include the entire html + css if you could do it through a link (the page isn't live), but it's quite long.

****The first image is moz, second webkit.

[rtrethewey]

If your positioning of elements is a problem it's most likely a missing or incomplete <!DOCTYPE> statement in the HTML document. Without seeing all of the HTML and CSS, it's impossible to know. But search on "doctype switch" and you'll find some good advice.

Vendor prefixes only work on selected properties that are not yet standardized, so you can't just add them to have a different setting for a particular browser. I'm not aware of any differences in how the various browsers handle 'overflow', but this could also be related to your <!DOCTYPE> which has a major effect on issues of margin and padding.

[ecarter202]

If your positioning of elements is a problem it's most likely a missing or incomplete <!DOCTYPE> statement in the HTML document. Without seeing all of the HTML and CSS, it's impossible to know. But search on "doctype switch" and you'll find some good advice.

Vendor prefixes only work on selected properties that are not yet standardized, so you can't just add them to have a different setting for a particular browser. I'm not aware of any differences in how the various browsers handle 'overflow', but this could also be related to your <!DOCTYPE> which has a major effect on issues of margin and padding.

Thank you! That very much fixed the issue.