span within span

Forum Moderators: not2easy

Message Too Old, No Replies

span within span

How do I apply nested styles to an item?

jalarie

4:33 pm on Jul 8, 2010 (gmt 0)

I'm currently using the following code to create an inline drop-shadow effect on a single word or phrase within a paragraph, but HTMLTidy says that using nested span tags is invalid:


<p>
 leading text
 <span class="class1">
 <span class="class2">
 <span class="class3">
 the special word or phrase
 </span>
 </span>
 </span>
 trailing text
</p>

I tried switching the outer span tags to div tags, but using a div within a p is also invalid:


<p>
 leading text
 <div class="class1">
 <div class="class2">
 <span class="class3">
 the special word or phrase
 </span>
 </div>
 </div>
 trailing text
</p>

How can I have nested style that is valid?

Fotiman

4:44 pm on Jul 8, 2010 (gmt 0)

HTMLTidy says that using nested span tags is invalid

Then HTMLTidy is lying to you. :)

It's perfectly valid to have nested span elements.

rocknbil

6:49 pm on Jul 8, 2010 (gmt 0)

inline drop-shadow effect on a single word or phrase

You're going to hate this. Or love it, in either case, say "no" to code bloat. :-)

.shadow-text { text-shadow: 1px 1px 1px #fff; }

<span class="shadow-text">Shadow me</span>

It's *officially** CSS3 but it was in the '2 draft, and supported by some browsers since '1 . . . give it a shot.

jalarie

7:47 pm on Jul 8, 2010 (gmt 0)

To Fotiman: Thank you. That makes my life a lot easier.

To rocknbil: I agree with saying no to code bloat and will probably make use of your code.

But, I'm still on an old Win98 machine with no hope of upgrading it any time soon and your code does not work on FireFox 2.0.0.16, nor on IE 6.0. These are the latest versions that work on Win98.

And, though nice, it's not what I intended to do. Check this out:


<html>
 <head>
 <title>shadow</title>
 <style>
  .DSI-back {
  border-bottom: 3px solid #cccccc; 
  border-right: 1px solid #cccccc;
  margin: 0px 3px 0px 0px;
  }
  .DSI-middle {
  border-bottom: 2px solid #666666; 
  border-right: 1px solid #666666;
  }
  .DSI-front {
  border: 1px solid black;
  background-color: #f8e7c7;      /* background color of content */
  color: #000000;         /* text color of content */
  }
 </style>
 </head>
 <body>
 <p>
  This is an 
  <span class="DSI-back"><span class="DSI-middle"><span class="DSI-front">
  &nbsp;inline shadow box 
  </span></span></span>
  within a paragraph.
 </p>
 </body>
</html>

brokenbynubs

2:52 pm on Jul 19, 2010 (gmt 0)

It is completely valid for a <span> to be inside of a <p> tag.

span within span

How do I apply nested styles to an item?

jalarie

Fotiman

rocknbil

jalarie

brokenbynubs

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week