Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

how to display a bottom right corner background graphic in IE7

Posted on 2009-04-01
3
Medium Priority
?
818 Views
Last Modified: 2013-12-25
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

0
Comment
Question by:Darko_Kantic
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 11

Expert Comment

by:level9wizard
ID: 24038126
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
 

Author Comment

by:Darko_Kantic
ID: 24038811
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
 

Accepted Solution

by:
Darko_Kantic earned 0 total points
ID: 24038898
in fact all i needed to do was add:

min-height:0;

and everything is hunkydory
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

597 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