I have a problem shifting a heading out of sight when I add a break
<h1>heading<br /><span>sub-heading</span></h1>
header h1 {
text-indent: -3000px;
}
This is fine without the break but when I add the break the span is not shifted. I’m puzzled as to why and how to fix it, please.
I’m wondering if I make the span a block element and shift that but it seems a bit ugly.
An indent only affects the first line. Use padding or margin left for the whole element.
Why not use h2 for the sub heading?
What is the span for? Without any property it does nothing.
Take the BR and SPAN tags out out of the H1 tag, and handle the sub-heading within its own code block.
Thanks guys. Of course. Of course. I think I was trying to be too clever. The span was just so’s I could apply a different font style. Der!
If you want a different style, h2 is the answer.
More than one h1 on a page is bad for SEO according to Bing WMT.
I guess so, although I’ve seen the technique used on other sites. 
Just setting the span to display:block should work.
I’m not sure why you are shifting it all out of sight anyway unless its an image replacement technique and then there are better methods than text-indent.
Hi Paul - yes, it is for image replacement. I used to use display:none but I thought text-indent was deemed a better way. Shocking how I pick up bad habits! What is the best way?
It depends on situation but variations on the tried and trusted Gilder Levin method (my example above pre-dates this coin of phrase) are best if you don’t have transparent images to deal with.
The above works in all variations of image off, or css off and content is always available to all devices.
There are other methods.
O gawd! Thanks Paul.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.