hey.. i've been put on the task of cleaning up some absolutely horrific 90's html.. the site is filled with deprecated html and my first step is to try to get rid of that.. there are all sorts of font tags throughout the code with size attributes ranging from -2 to 3 or 4.. i think i've found out that 'size = -1' is equivalent to 'style="font-size: smaller;' but i'm not sure what to do about the rest of them.. does anybody know the actual correlation between the font tags size attribute and the css font-size property? like -1 = smaller 0 = ? 1 = larger etc. i'm just not sure what to replace the 3's and 4's with.. cause <font size= -1> gives you one size smaller than the parent element right? and <font size= +1> would give you one larger.. so for <font size = +2> would i have to make a couple spans or dive and set their font-size's both to larger? since, x-large wouldn't be relative to the parent element? i also keep running into random opening paragraph tags at the end of sentences and no closing tags for them.. was this a technique previously used for spacing things out or something? or was it just part of how terribly this site was made?
Experiment. I'd replace +1 with 1.2em, -2 with 0.8em, and so on. If the web site was coded poorly, chances are not much thought was put into typography so surely the values don't have to corresponding to their exact CSS equivalents. As for the fixed font sizes, I'd replace them with relative values - relative to root for the pages you are working with if needed. The redundant <p> tags at the end could be a result of the previous developer using a WYSIWYG editor that incorrectly added those tags after pressing enter when a paragraph was finished.
This is something I specialize in - to the point I've done the conversion of a site of 300+ pages. My advice on this topic... well, it kinda sucks to implement. THROW IT ALL AWAY. Declare your own font sizes getting rid of EVERYTHING except the raw text. I actually found it faster to strip ALL the HTML so you have just the content with no formatting, and start over from scratch than to try and work with the existing content, font sizes, etc. You're just going to make yourself crazy trying to preserve anything else - ESPECIALLY if the site was done in some crap wysiwyg that opens and closes tags like some sweetly retarded millivegan epileptic crack addict. I also advise against going with the named font sizes - it's a headache and a half that with CSS just leads to broken layouts (usually on large font machines) - if you WANT that, go with %/em. But, if you must know: at default sizes, size="0" and size="-1" both return REALLY wierd results, and only 'really' work inside other size= declarations - moving you down one or up one - but the entire scale MUST remain within the 1 to 7 range. TECHNICALLY it is supposed to be a scale from 1 to 7, but the definition of that 1 to 7 is NOT defined in the standard - though thankfully most browsers today use the same approximate values. Those values being: 1 = 62.5% = 10px 2 = 83.3% = 13px 3 = 100% = 16px 4 = 112.5% = 18px 5 = 150% = 24px 6 = 200% = 32px 7 = 300% = 48px Mind you that's assuming you are in small fonts/96 dpi and your browsers default font size is 16px, as with large fonts in IE and Opera the px values would be 25% larger.
thanks for all the help.. i've basically just been experimenting with the font sizes but that's been time consuming i think the %/em will probably get called in to play now.. anyways, sorry i could give you a link but not a login.. so that doesn't help all that much.. but i'll strip some code down and give you a taste of what i'm dealing with.. i really don't even think a wysiwyg could have come up with this mess.. <HTML><HEAD><TITLE>pad Groups</TITLE> <link rel="stylesheet" href="/standard.css" type="text/css"> <script language="JavaScript"> <!-- menu=null; countdown=5000; function getWindow(State){ menu=window.open("---sometemplate.cfm---","width=380,height=400,screenX=400,resizable,scrollbars,toolbar"); } function closemenu(){ if (menu && menu.open && !menu.closed) {menu.close} } //--> </script> </HEAD> <BODY OnUnload="closemenu()"> <center> <table width =100%> <tr><td valign = middle> <img src = "---someimage---" align = left ALT = "---company name---"></td> <td align = right><b><h2><font face = arial>Groups</font></td> </tr> </table> </center> <font face = arial> <script language="javascript"> <!-- window.name = "page" --> </script> <table width = 100% cellspacing = 0 cellpadding = 3 border = 0> <tr valign = top align = middle bgcolor=silver> <td valign = top nowrap> <font face = arial size = -1><b> <a href = "---home link---">Home</a> · <a href = "---help link---">Help</a> · <a href = "---logout link---">Logout</a> · <a href = "---options link---" target = menu onClick="getWindow('index');">Options</a> </b></font> </td> </tr> </table> <center> <table width = 100% cellspacing = 0 cellpadding = 3 border = 0> <tr valign = top> <td> <Font face = arial> <font size = 3><b> ---Group Name--- </b></font> <br><br> <Font size = -1> <B>Description:</B> --group description--- <P><p> <b>Updated:</b> 2007/08/17<br> <b>Latest logins:</b> <SELECT> <option disabled>2007/09/20 12:00 P: ---name---</option> <option disabled>2007/09/18 1:42 P: ---name---</option> <option disabled>2007/09/14 3:40 A: ---name---</option> <option disabled>2007/09/06 3:22 P: ---name---</option> <option disabled>2007/08/31 9:58 A: ---name---</option> <option disabled>2007/08/08 11:11 A: ---name---</option> <option disabled>2007/03/30 2:56 P: ---name---</option> <option disabled>2006/08/14 11:53 A: ---name---</option> <option disabled>2005/06/16 9:10 A: ---name---</option> <option disabled>2005/03/09 12:05 P: ---name---</option> <option disabled>2004/07/26 8:52 A: ---name---</option> <option disabled>2003/05/27 5:38 A: ---name---</option> <option disabled>2002/06/06 2:30 P: ---name---</option> </select> </td> <td rowspan = 100 width = 30% align = right><Font face = arial> <table border = 0 cellspacing = 0 cellpadding = 3> <tr> <th height=1 colspan=4 width = "250"><img src = "---img source---" width = "250" height = 1 border = 0></th> <th height=1 width = "16"><img src = "---img source---" width = "16" height = 1 border = 0></th> </tr> <form Action = "command.cfm" method = post> <tr valign = middle> <td align = right bgcolor=olive colspan = 5 nowrap><font face = arial size = -1> <select name = command> <option value = "">Group Options . . .</option> <option value = "---update link---"> - UPDATE <option value = "---manage subgroups link---"> - Manage SUBGROUP LINKS <option value = "---delete link---"> - DELETE selected groups <option value = "---general contact link---"> - Select group's ADDRESS <option value = "---create page link---"> - CREATE ---- MORE OPTIONS with links for values ---- </SELECT> <b><input type = submit value = "Do!"></b></td> </tr> <tr bgcolor=silver> <td colspan = 5><font face = arial size = -1><b>Address</b></td> </tr> <tr> <td colspan = 4><font face = arial size = -1> ---Contact Name---<br> <a href = "mailto:---EMAIL---">---EMAIL---</a><br> ---Address p1---<br> ---Address p2--- </td> <td bgcolor=silver><br> </td> </tr> ........ Code (markup): i'm cutting the code off there cause there are about 20000 more lines and it would take the next week to remove all the stuff from them that i can't show you.. whoever made this blows my mind.. tags are rarely closed and there are parts where tables are nested about 4 or 5 levels deep.. most of the tables only have 1 cell and all with the same attributes chances are if i want to do a good job of this i will have to throw it all out... but i'm on a short term and don't know if i've got the time to get it all done.. not to mention aside from the hundreds of files i would have to modify there are hundreds more that may or may not even be used on the site... basically just a tonne of junk floating around the server
I've seen worse - at least it's not something generated by 'Visual Page Pro' or 'HotMeTal' For legacy HTML, that's actually fairly clean.
You can use HTML Tidy to clean it up to something more manageable if you prefer. It will take care of unclosed tags, uppercase tags and a lot of other nasty things.