positioning moz/webkit

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

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!

The attachments of this post were removed during the platform migration in 2018

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

rtrethewey;1232873 wrote:
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.