how to display a bottom right corner background graphic in IE7

i have a bottom right corner image as a background on a div, this displays fine in earlier versions of IE and in firefox and safari, but is too far left on IE7.

can be viewed on http://espace.agirlocal.com
.fp-teaser-linkarea
  {
   background: #fef88b url(images/y-bright-solid.png) no-repeat right;   /*colour scheme  teaser bottom right*/
   padding-bottom:30px;
   margin-left:-15px;/*doesn't work in ie JCLK*/
   min-height:1%;/*to display in IE*/
   background-position: bottom right;
   text-align: right;
   padding-right:10px;
   }

Open in new window

Darko_KanticAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Darko_KanticConnect With a Mentor Author Commented:
in fact all i needed to do was add:

min-height:0;

and everything is hunkydory
0
 
level9wizardCommented:
I notice you have declared background positioning twice, here:
background: #fef88b url(images/y-bright-solid.png) no-repeat right;   /*colour scheme  teaser bottom right*/

and here:
background-position: bottom right;
(this is also backwards btw, horizontal then vertical).

Try:
background: #fef88b url(images/y-bright-solid.png) no-repeat right bottom; and remove the background position.
0
 
Darko_KanticAuthor Commented:
thanks level9wizard - i'd already tried that - i can't remember why i added the extra background-position - but i have a nagging feeling it was to do with some other IE version.

i'm pretty sure the problem lies in the setting of the left margin.  this is picked up by firefox and the area filled with the background colour to merge nicely with my graphic.  but IE7 doesn't seem to like -15px
   margin-left: -15px;/*doesn't work in ie JCLK*/

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.