Handling Styles Within XSL File

[kraftomatic]

Hey All,

I'm working on setting font colors, sizes, etc. within my XSL file. This is what I currently have:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:for-each select="team/rider">

<div id="dgrey">Rider:</div> <div id="dgreen"><xsl:value-of select="riderName"/></div><br />
Competition No: <xsl:value-of select="riderNo"/><br />
Hometown: <xsl:value-of select="riderTown"/><br /><br />

<xsl:for-each select="riderBody/paragraph">
<p><xsl:value-of select="self::node()" /></p>
</xsl:for-each>

<br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>


If you notice, I'm using DIV tags, which references an external style sheet I'm using.

My question is: Is this the best way to do this? I'm coming across minor problems, where the DIV tag automatically inserts a line break after it, which messes up my text formatting. I don't see a better way to do this though.

Any thoughts?

Thanks.

[kraftomatic]

I've replaced the DIV tags with FONT tags, which solves the automatic <BR> tag at the end of the DIV.

Using FONT tags are so ugly though ..

:(

[brothercake]

The point is that DIV is block-level and FONT is inline. If you want an inline element with no other implicit styling use SPAN.

[kraftomatic]

Ah, that seems to work.

So then what's the major difference/use of SPAN relative to DIV?

[me']

One follows the inline box model and the other follows the block box model.

Block level elements, by default: Take up all the width they can
Always appear on different lines to all other elements
Can be assigned a width, height and padding, borders and margins.Inline level elements: Take up only as much width as is needed
Appear on the same line as any other elements as they can.
Cannot be assigned width or height. Can be assigned borders, cannot be assigned padding, can be assigned margins but only horizontal margins take effect on the flow.Basically, if you have an inline level element, it's useful for attributing styles to the text contained within, but not a lot else. Block level elements can be sized and control the flow. After a bit of experience you'll understand which elements are block and which are inline. A quick list to get you started:

Block: h*, div, body, ul, li, dt, dd, dl, form etc.
Inline: a, em, strong, b, i, span, img etc.

HTH

[kraftomatic]

Thanks .. that helps.

:)