/    Sign up×
Community /Pin to ProfileBookmark

positioning moz/webkit

Copy linkTweet thisAlerts:
Nov 04.2012

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!

[canned-message]attachments-removed-during-migration[/canned-message]

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyNov 05.2012 — 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.
Copy linkTweet thisAlerts:
@ecarter202authorNov 05.2012 — 

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.
Copy linkTweet thisAlerts:
@rtretheweyNov 06.2012 — 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.
Copy linkTweet thisAlerts:
@ecarter202authorNov 08.2012 — 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.[/QUOTE]

Thank you! That very much fixed the issue.
×

Success!

Help @ecarter202 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...