Magenta Placenta wrote: > http://www.matthickerson.com/recent/barley/ > > In Firefox and Opera, the "latest news" links don't work, but > they do in IE 6. What I'm doing is displaying the text, then > overlaying a header graphic of that text: > > <div id="home_latestnews"> > <h2><span></span>Latest News</h2> > > div#home_latestnews h2 span > { > background:url(images/home_latestnews.gif) no-repeat; > position:absolute; > width:100%; > height:100%; > } > > When I take out the <span> tag, the links work, so that's the > problem, anyone know why and how to fix without just removing > the spans?
On 7/26/06, Els <[EMAIL PROTECTED]> wrote: > > It's the width:100%; and height:100%. > Give that span a border (or take out the no-repeat on the image) > and you'll see the problem. Since the h2 isn't positioned, the span's width and height percentages are based on whatever ancestor element is positioned. If nothing's positioned, then it's based upon the window's width and height.[1] To make it so that the span is as big as the header, give the h2 "position: relative". You may also want to look at some of the various examples of image replacement available on the Wiki for some other ideas and examples of how to do this. HTH, Michael [1] http://www.w3.org/TR/CSS21/visudet.html#containing-block-details [2] http://css-discuss.incutio.com/?page=ImageReplacement ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
