?
Solved

how to display a bottom right corner background graphic in IE7

Posted on 2009-04-01
3
Medium Priority
?
810 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

771 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