Removing the font tag

[amiw]

How could I change this bit of code and use CSS rather than the font tags?


<font color="#0000CC">&lt;%<br>
Function getFileName()<br>
</font><font color="#0000CC">Dim lsPath, arPath<br>
lsPath = Request.ServerVariables(&quot;SCRIPT_NAME&quot<br>

arPath = Split(lsPath, &quot;/&quot<font color="#009933"> ' split path into array and grab last item for file name</font><br>
getFileName = arPath(UBound(arPath,1))<br>
End Function</font></p>
<p><font color="#0000CC"> Dim sFileName<br>

sFileName = getFileName() <font color="#009933">' get scripts file name</font> <br>
response.write sFileName<br>
%&gt; </font>

 

[kaht]

change this:

<font color="#0000CC">

to this:

<span style="color:#0000cc">

Make sure to change the closing </font> tag to </span> as well.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[amiw]

And I guess I'll need to change <font color="#009933"> to
<span style="color:#009933">


I initially thought that I might have to use the <div> tag rather than the span tag?

 

[kaht]

And I guess I'll need to change <font color="#009933"> to <span style="color:#009933">

Yeah, but I wasn't gonna type em all out. You could use div as well and I don't think it'd make a difference. It's just a habit of mine when I want to format a small section of text to use the span tags.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[amiw]

There's a couple of questions,
If I use div rather than span for some of the font tags then I won't need to use the <br>
secondly using div or span doesn't get rid of the large amount of font tags that are used - it's just the same more or less.

 

[Vragabond]

Divs are block level elements while span and font (were) are inline. That is why replacing a font tag with a span tag makes more sense. However, looking at your example code, it looks like you have a bunch of font tags and are just shifting two colors around. I suppose it would be better if you would do something like this:

<p style="color: #0000cc;">
 ... bunch of text ...
 <span style="color: #009933;">' get scripts file name</span>
 ... more text ...
</p>

Ultimately, you would move both declarations in the stylesheet and include that in the head section via <link>. In the stylesheet you would have something like:

p {
  color: #0000cc;
}

.comment {
  color: #009933;
}

and the html would then look like:

<p>
  text text text 
  <span class="comment">' comment</span>
  text text text
</p>

 

[mkrausnick]

amiw,

Vragabon's solution is the correct one. Remember that the purpose of CSS is to separate content from presentation. kaht's solution doesn't do that, but Vragabond's does.

I realize you only asked how to eliminate the FONT tags, but look how much cleaner Vragabond's code is by putting all the presentation code into a separate STYLE section.

Mike Krausnick
Dublin, California

 

[BillyRayPreachersSon]

Vragabon's solution is the correct one.

kaht's was perfectly correct too, in that it did exactly what was asked.

the purpose of CSS is to separate content from presentation

Surely the purpose of CSS is to provide a flexible way of styling content based upon simple rules, not to separate content from presentation?

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[tsdragon]

Actually the initial statement is correct. CSS is supposed to separate content from presentation. However, in practice this is a crock. Since in order to apply the presentation to the content you have to supply additional html elements (spans, divs, etc.) and additional attributes to html elements (class, id, etc.) all you're really doing is moving the actual styling of the presentation elsewhere, the structure of the presentation is still present, intermixed with the content.

In other words, what you said is actually more accurate.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.

 

[amiw]

<p style="color: #0000cc;">
... bunch of text ...
<span style="color: #009933;">' get scripts file name</span>
... more text ...
</p>



In regards the code above suggested by Vragabond would it make any difference using the div tag instead of the p tag? I would guess not apart from the line break..am I wrong?
and using the <br> tag within is that ok?

 

[amiw]

Here's some code I put together, this would do the job wouldn't it?


.code {
color: #0000cc;
}

.comment {
color: #009933;
}


<div class="code">
... bunch of text ...<br>
...more text...<br>
<span class="comment">' get scripts file name</span>
... more text ...
</div>

 

[BabyJeffy]

The code you posted is definitely going to get the job done. No problem there at all.

I would probably wrap the contents of the <div> in <p> tags as well... so that if somoene is looking at the page with a browser that doesn't support your style sheet (a screen reader for the blind, say) they would still be able to understand the content. Using the BR is fine.

As some of the posts have said... a DIV is a block element (takes up a rectangular block on the page) whilst a SPAN is an inline element (and doesn't take up a block of space). You can effectively make a SPAN look like a DIV by adding style="display:block;" to the SPAN.

As a side note... if you keep your HTML tags lower case, and you nest and close all tags properly, you will have no problem coding toward XHTML guidelines! You code is XHTML compliant (as posted) except for the use of the BR tags... they aren't closed... use <br /> instead. Same with the IMG Tag and HR tag. Just so you know

Regards
Jeff

 

[ChrisHunt]

Yes, that's about it. You might want to consider doing this:

.code {
   color: #0000CC;
   [b]white-space: pre;[/b]
}

That will cause the browser to display any spaces and carriage returns in your text, instead of collapsing them into a single space. It's good for code, as it preserves any indenting you may have done, and means you won't have to put the <br> elements in. It will also put the text into a monospaced font, unless you override it with a [tt]font-family[/tt] rule.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[BillyRayPreachersSon]

Actually the initial statement is correct. CSS is supposed to separate content from presentation.

I disagree. Regardless of how we are supposed to use or implement CSS (what you are talking about), CSS itself (what I am talking about) is simply a way of adding style. This from the W3C main CSS page:

http://www.w3.org/Style/CSS/

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[amiw]

Thanks guys for all your help.