liketo findoutwhy wrote:
>
> oh thanks for your answer.  hm... is the last webpage above the same 
> as my Style 1b?   the requirement is that the ending quote image is 
> right next to the ending word, not at the far bottom right corner.  
> thanks again.
>

Hello and you are most welcome. I only took a quick look at your code 
before hitting my CSS bookmark folder, since this was one of those 
things that, like you, I discovered first hand is slightly more 
complicated than it first appears (at least to get things working well 
cross-browser).

I also apologise for not paying close enough attention to your 
requirements (was that originally there? It's late, or rather early here 
- as in after 2.30am - so maybe I'm losing my mind but I didn't see that 
first time around!).

The last example link I posted uses background images and appears to be 
closer to your 2b (but not the same),

Ok, so here is one solution, tested in FF3, Safari, Opera 9, and IE6. 
This is win2k I'm logged into right now, and I'll check on IE7 in the 
morning by booting to XP if nobody else has offered a better fix. But 
I'm pretty sure someone more knowledgeable than myself is likely to have 
done so before I wake.

Change the following rule under style 3 to:

.spanRightQuote {
  background: url("rightquote.gif") no-repeat right bottom;
  padding: 0 0 0 15px; /*only left padding needed as the span location 
has moved*/
  zoom: 1; /* hasLayout for IE6 */
}

and in your code:

<div class="quoteContainer">
<div class="divLeftQuote2">
<div class="divLeftQuote">
hello world again hello world again hello world again hello world
<span class="spanRightQuote">&nbsp;</span>
</div>
</div>
</div>

Obviously that's quite bloated markup! Although I do see at least one of 
those divs is for the examples presentational purposes only.

You can if you want use the following to achieve the same result:

<div class="quoteContainer">
<div class="divLeftQuote">
hello world again hello world again hello world again hello world
<span class="spanRightQuote">&nbsp;</span>
</div>
</div>

and add the margin from .quoteContainer2Inner rule to .divLeftQuote:

.divLeftQuote {
  background: url("leftquote.gif") no-repeat 0px 0px;
  padding: 0 0 0 20px;
  margin: 10px;
}

Good luck!

HTH
Mark
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to