www.webdeveloper.com
Results 1 to 5 of 5

Thread: positioning moz/webkit

  1. #1
    Join Date
    Jul 2012
    Posts
    19

    positioning moz/webkit

    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!
    Last edited by ecarter202; 11-04-2012 at 05:26 PM. Reason: found info.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,145
    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.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jul 2012
    Posts
    19
    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.
    Last edited by ecarter202; 11-04-2012 at 07:47 PM. Reason: forgot info.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,145
    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.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jul 2012
    Posts
    19
    Quote Originally Posted by rtrethewey View Post
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles