adding a background image to the end of a span

here's the issue (first red headline) so that you can see it for itself:
http://preview.meetingsnet.com/

As I say, it's IE that it's not behaving.

Cheers
Steve

Not quite sure what your trying to achieve here sperks but I would have thought that using span was not the best method.

I'm afraid that you don't appear to have an index file in that directory to look at, very busy directory though. I would turn indexes off on it !

Hugo.

Apologies for wasting your time there Hugo.
I ask a question and then 10 minutes later I'm told that they need to do a fresh data upload and would I mind deleting my test page... Typical. If you don't mind, I'll resubmit my question when I get some content back in

OK - I've got it back up now:
http://preview.meetingsnet.com/index.html

Take a look at the tail end of the headline in FF and you'll see that I'm aiming for IE to do.

Cheers
Steve

Does the bg image need to be on the span? What happens if you align it bottom right of the h1?

Ah

I see what you want to do. IE won't bottom align, BUT it can do something else.

Imagine you have a div (or whatever) with the header in.
Then another div under it that has the bg image on the right.

OK, so now you have your text ABOVE the image, but the image is at the right and just needs moving up. Now apply a negative margin-top to the div with the image in equal to the image height plus a bit.

The only problem is to make sure it doesn't flow over a bit of text (for example if you had an extra word in your text both lines would be roughly equal and end up with the image over them). So, at the end of your text you would need a few non breaking spaces:       

Would that work?

Trevor

You can set h1 { background: url(image.jpg) bottom right no-repeat; } can't you? Then if you add a bit of right padding, it'll push the text away from the image.

Hi

You could, but I think IE will ignore the bottom bit, even though it shouldn't. It may be able to fit a background to bottom if a div is abs posnd with a fixed height, not sure.

Maybe I'm wrong, but I have tried to do exactly what Steve wants to d and ended up doing what I suggested (it worked).

Trevor

I want the image to appear at the end of the headline text, not the block. Assigning the image as a background of the h1 also works in FF, but not in IE. IE is blocking the h1 and sticks the background image to the right of the block, where as FF puts the image at the end of the wrapped text.

Here's what's happening and what I want to happen:

IE: wrong
span span span span span span span span
span span span span image

FF: right
span span span span span span span span
span span span image

Hi

Ah, I see.

Can't think of anything, other than that old last gasp one to add position:relative or position:absolute or display:inline or display:block

Trevor

Hi sperks,

I'm with Hugo on this. I see how you're trying to do this, but I'm not sure of what you're trying to do.

If all you want is to put the image at the end of the text, just do this;

 
h1 { 
    background-color: white; 
    border-right: 1px dotted gray; 
    color: red; 
    font-size: 1em; 
    font-weight: normal; 
    padding: 1em 15px 1em 0; 
    width: 18em; 
    } 
=========== 
  <h1>A really long headline that will wrap onto the second 
  line.&nbsp;<img src="3dots.gif" 
       alt="" /></h1>

But you have the text in a span, why? And, you want the image in the background, why?

If the span and bg are part of the problem statement, we need to know the reason, else my code suffices.

This has not been a good week for me, problem grokking wise, so if I missed it, :oops:

cheers,

gary

I think you're right in that I need to add the img to the markup.

The reason for the markup is that I maintain a template based CMS for over 80 sites. The templates are currently table based and though I can modify them individually and I'm moving them over one by one, I'm trying to move away from presentational markup with a set of base templates (a bit like cssZenGarden).

My span is there to allow me to support another level of formatting (eg. take a look at the red "News" header with black background at http://directmag.com/. Though this was before I got rid of some of the old divs).

Still, it looks like this is going to be one of those occasions where I have muck with the markup -- shame though, 'cos it's only a formatting image and should be in the markup...

Cheers peeps.

Aha! I see the real problem now. The image is only decorative, so you think it should be in the background, right? The span is only a styling hook, so it can't have the bg image else problems should text appear after the span. Right? You can't put the bg image on the block element 'cause IE has its head up its patoot, so it must go on an inline element.

The ugly answer is to add another hook for the bg that's guaranteed to be the last element prior to closing the header. Take a look at the following. The third header element is the template.

 
h1 { 
    background-color: white; 
    border-right: 1px dotted gray; 
    color: red; 
    font-size: 1em; 
    font-weight: normal; 
    padding: 1em 15px 1em 0; 
    width: 18em; 
    } 
 
h1 span { 
    color: blue; 
    } 
 
h1 span.dots { 
    background: url(3dots.gif) right no-repeat; 
    padding-right: 15px; 
    } 
=========== 
  <h1><span>A really long</span> headline that will wrap onto the second 
  line.&nbsp;<img src="3dots.gif" 
       alt="" /></h1> 
 
  <h1><span>A really long</span> headline that will wrap onto the second 
  line.<span class="dots">&nbsp;</span></h1> 
 
  <h1><span></span><span class="dots">&nbsp;</span></h1>

Be careful with the dots. They said to me, "Hello, I'm a link." Will others hear the same thing?

cheers,

gary

You seam to understand my issue, though I wont have a scenario where content will appears outside the main <span>.

I suppose adding a second span might well do the trick, but it's getting a little bogged with markup...

Cheers Chaps and Chappettes...

If there will never be anything outside the span, you don't need it unless you insist on making the image bg (Use v3, above, without the first span. Else use v1.). Style the header using a class or id selector or use it in context if you have multiple styles for headers. You'd have have to do that with a span anyway.

cheers,

gary

Actually, if I can push this thought back to the designer (I'm developing someone else's design), I might not need to worry about this at all...

Cheers to all for their efforts on this one.