CSS Right-Positioning Image

[~J~]

Having a serious mind-blank today.

I have a background image of 720 pixels width, 5 pixel height.

I need to use the background as a header for a page, the image positioned top-right hand of the page with text on it.

The problem I have is the the text is full-flush to the right of the image, I need something like a 40pixel margin on the right of the text, but the image a 0pixel margin so it's full flush to the page.

Style is:

#BlankLogoBar
{
height: 30px;
width: 720px;
background-image: url(NewFolder1/logobar_gradient.gif);
background-repeat: repeat-y;
text-align: right;
font-size: medium;
color: black;
font-family: Verdana;
float: right;
position: relative;
}

Any ideas how to do it?

Ta

 

[Al Vallario]

#BlankLogoBar {
  height: 30px;
  width: [b]680px[/b];
  background: url("NewFolder1/logobar_gradient.gif") top left repeat-y #fff;
  text-align: right;
  font-size: medium;
  color: black;
  font-family: Verdana;
  float: right;
  position: relative;
  [b]padding-right: 40px;[/b]
}

I assume that's what you're looking for. You may have to make use of some ninja box model hacks to get it looking the same in Internet Explorer (the above code should work perfectly in Firefox, I think).

If I've got the wrong end of the stick, can you post the HTML in question

 

[m0rte]

background-position:100% 0%;
padding-right:40;

Seems to work in IE
I'm a CSS noob tho so might not have testing properly..

 

[~J~]

Spot on!

Cheers fellas. Amazing how much of the simple things you forget when you've not used the language for a few weeks.