<b></b> causes problems in HTML validator, saying it should not be empty

[jasonc]

Having problems with HTML validator kicking up a fuss with empty tags.

 

<b></b>

 

seems to be incorrect and I wish to make all my pages valid.

 

Can anyone suggest a better way to do this without using images.

 

Is there another tag i can use that will not cause this validation problem i have ?

 

 

CSS

.containercolour { position: relative; background: #E1E1E1; margin: 0px 5px; } /* BACKGROUND OF ROUNDED BOX */
.rtopcolour, .rbottomcolour { display: block; background:#FFFFFF; } /* OUTTER EDGE COLOUR */
.rtopcolour *, .rbottomcolour *{ display: block; height: 1px; overflow: hidden; background: #E1E1E1; } /* BACKGROUND OF ROUNDED BOX */

.r1{ margin: 0px 5px; line-height: 1px; }
.r2{ margin: 0px 3px; line-height: 1px; }
.r3{ margin: 0px 2px; line-height: 1px; }
.r4{ margin: 0px 1px; line-height: 1px; }

 

HTML

<div class="containercolour"><b class="rtopcolour"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
text
<b class="rbottomcolour4"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>

[lostprophetpunk]

<div class="containercolour"><b class="rtopcolour"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
text
<b class="rbottomcolour4"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>

It's in this code lies your problem.

 

You cannot have <b></b> tags inside <b></b> tags, as it will cause validation errors in which you are experiencing.

[haku]

Why would you even nest a bunch of empty b tags anyways? It makes no sense.

[jasonc]

Sorry thought I had included an image of what is does.

 

It is a rounded edged text box, saves having images.  Been using it for years.

 

I think I have solved it though, I replaced <b></b> with <div></div>

 

The validation allows the code now.