coloring text backgrounds

how NN and IE handle coloring text backgrounds

page 4 of 4

• page 1
  • coloring header backgrounds
  • coloring text backgrounds with divs
  • divs with width value
• page 2
  • boxing with a border
  • using a thick border
  • using the width attribute
• page 3
  • boxing a header
• page 4
  • coloring code tags

coloring code tags

I have found some real differences between NN4.7 and IE5.0 when trying to color the background of the CODE tag. I used some of the typical style elements that have worked before with the DIV tags. Below is the style information we will use to try to make a colored box out of the CODE tags.

{background:#DDDDFF;color:purple;border:1px;
	margin-left:30%;
margin-right:30%;}

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

IE5.0 is now not acting intuitively. It refuses to create a box of color, or move the code from the left side of the page. NN4.7 renders the above code just as we would expect.

NN6.0 is doing something interesting here. Each line between the CODE tags is separated by a BREAK tag. Any line that follows a BREAK tag is pushed to the left margin. The first line, which doesn't follow a BREAK tag, is centered in the browser.

But let me give a warning here. I have found that NN4.7 will not color the text properly when the CODE tag follows certain other tags. It is really unpredictable. For instance, on this site, the CODE tag is inside P tags. The style I have assigned the CODE tag is correctly rendered by NN4.7. In other projects, the CODE tags followed DIV tags and the text in the CODE tag refused to color. It looks like it's a little hit or miss.

Let's change the style. Instead of using MARGIN properties, let's use WIDTH and set a BORDER to one pixel thick (like we did with DIVs to get NN4.7 to box in a color behind text).

{background:#DDDDFF;color:purple;border:1px;width:40%;}

we see in NN4.7:	we see in IE5.0:
we see in NN6.0:

It would appear that we found a way to color behind CODE in both IE5.0 and NN4.7. Adding POSITION:RELATIVE and the LEFT property, we can move the colored box to the right.

However, look at NN6.0's rendering of the CODE style. It is only coloring behind the text, not out to the WIDTH value.

Note that we used percentages as a value for WIDTH. We could have use an absolute measurement. Also note that the BORDER-WIDTH is required to get NN4.7 to fully box in the CODE tag.

I should make an important point here. The CODE tag is not a block-level element in CSS, but instead a phrase-level element. Phrase level elements do not create boxes of space on a page, like DIV and P do. However, it is useful to strain the CODE style information to the point of boxing in the color so one can save an extra DIV tag.