Firefox Won't Accept Pixels in place of top for background image position

Posted on 2009-02-11
Last Modified: 2012-05-06
I'm using the code

#main-content .PDFrowD { width: 500px; float:left; display:inline; background: url(../img/SRreport_D.gif) no-repeat 20px right;}

to display a background image.  It works fine in Safari and IE, but in Firefox, it won't show the background image.  When I change 20px to top it works fine, although it's obviously not in the right spot.  Is there a way to adjust the position of the background image in firefox that would work?
Question by:walker6o9
    LVL 42

    Expert Comment

    by:David S.
    Mixing image position keywords with numerical values is not allowed. Also when you specify two values the horizontal one should come first. Therefore change "20px right" to "100% 20px".
    LVL 30

    Accepted Solution

    I believe the horizontal position should come before the vertical, try this:

    background: url(../img/SRreport_D.gif) no-repeat right 20px;
    LVL 42

    Assisted Solution

    by:David S.
    It seems that Steggs and I posted at the same time.

    Also it turns out that mixing keywords with numerical values is now allowed in CSS2.1.  (It wasn't in CSS2.0.)
    LVL 30

    Expert Comment

    Thanks for clearing that up Kravimir

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now