Solved

how to display a bottom right corner background graphic in IE7

Posted on 2009-04-01
3
795 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
  • 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Only three borders showing on image 5 20
Writing and Selling Web App Based on Google Sheets 2 44
Changing Color of Page Section 4 21
How to position loader with CSS 3 40
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
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…
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.

809 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