16 replies [Last post]
sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

I have a header that I want to end with an image. I've got the html/css as follows, and it works in FF, but IE isn't reacting in a favourable way

 
h1 {font-size: 2em, color: #c00} 
h1 span {padding-right: 15px; background: url (images/dots.gif) no-repeat top right;} 
<h1><span>a longish title that wraps to the send line</span></h1>


FF will display the background image at the end of the text, but IE ads the image to the top right of the block.

Any ideas?

Cheers
Steve

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

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

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

adding a background image to the end of a span

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

adding a background image to the end of a span

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 Smile

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

adding a background image to the end of a span

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

adding a background image to the end of a span

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

adding a background image to the end of a span

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: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Would that work?

Trevor

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

adding a background image to the end of a span

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

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

adding a background image to the end of a span

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

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

adding a background image to the end of a span

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

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 13 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

adding a background image to the end of a span

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

adding a background image to the end of a span

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

adding a background image to the end of a span

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

adding a background image to the end of a span

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

adding a background image to the end of a span

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...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

adding a background image to the end of a span

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sperks
Offline
Enthusiast
New York
Last seen: 16 years 4 days ago
New York
Timezone: GMT-5
Joined: 2004-10-01
Posts: 158
Points: 0

adding a background image to the end of a span

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

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... Smile

Cheers to all for their efforts on this one.