?
Solved

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

Posted on 2009-02-11
4
Medium Priority
?
170 Views
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?
0
Comment
Question by:walker6o9
  • 2
  • 2
4 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 23617748
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".
0
 
LVL 30

Accepted Solution

by:
Mark Steggles earned 1000 total points
ID: 23617749
I believe the horizontal position should come before the vertical, try this:

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

Assisted Solution

by:David S.
David S. earned 1000 total points
ID: 23618072
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.)

http://www.w3.org/TR/CSS2/colors.html#propdef-background-position
http://www.w3.org/TR/CSS21/colors.html#propdef-background-position
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 23618098
Thanks for clearing that up Kravimir
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month14 days, 3 hours left to enroll

807 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