dbrimlow

At rankquest.com (SEO website) they have a lynx viewer. Lynx is a text-only web browser that displays just the unformatted text (the way a search engine bot would see it). If your page is semantic, you should be able to make sense of the page by reading from top to bottom. It will include text based links, so you can click the "show links on the page", instead of just showing the links text. This really helped me to get a handle on my site's text and how it is seen without graphics or layout. [url="http://www.rankquest.com/tools/Lynx-View.php]rankquest.com lynx view tool

LOL. What bronzemonkey said. Another point that cannot be ignored is the impact of good semantic structure on SEO (search engine optimization). Everyone wants to do well in search engine results. And aside from quality high end links TO your site, clearly well structured text, based on the standard document levels of importance, presented in an understandable hierarchy, is a google bot's meat and potatoes. Anything that makes a search engine bot perform its spidering faster is going to directly impact with better bot indexing placement.

SEO is a very complex animal, and keyword metags is just about the lowest step on the rung of making a page or site search engine bot friendly. You are better off without any keyword meta tag than one that does not properly reflect actual keywords ON THE PAGE ITSELF. In the old days (pre-Google), the keyword meta tag was important because most websites were graphic heavy with little to no text. But that obviously got way too abused. The main things to remember about SEO is: 1. the spider bots are smart - they know what to look for on a page. 2. the bots get mad - they don't like sneaky tactics and penalize those who try to fool them. 3. your page's text should tell the bots what the page is about. The three most important factors in getting good page rankings are this: 1. Quality, high level relevant links TO your site. 2. TEXT, TEXT, TEXT - keyword rich text (not volume, appropriateness) - levels of semantic markup in proper hierarchical order - headers, paragraphs, lists and bold. 3. Keyword title tags A page that is structured as follows: title - keyword included h1 - site name (same on each page) h2 - page title - keyword not necessary, remember, bots are smart. paragraph - strong opening paragraph with well thought out and placed keywords/key phrases that ACTUALLY describe the page (can also be used as the page's meta description - since if there is NO meta description google will use the first 20 words of text it finds on the page in the search results). h3 - use of headers to define products, site sections, etc. paragraphs - paragraphs or lists within each h3 with keywords in bold text. h4 - h6 - sub-headers also give the bot focus of importance within the text. Footer - a footer with the company - site name and text based links to all of the main sections of the site give the bot a good reference of where to follow (usually the top navbar links). And last, the most important meta tags: 1. title 2. content-mime type charset 3. description 4. robots follow, index The keywords meta tag should only be added AFTER you've written all of the text on the page. Only put a word or phrase that is actually on the page in the keyword meta tag. AND DON'T DUPLICATE WORDS. Putting the same word over and over in the keywords meta tag can be considered "spamming" the bot. You only need to have it in there once. It is better to have either NO keyword meta tag, or one with four different keywords in it than typing in all the possible combinations of the same word in a search phrase; Google only looks for each word once. The BEST way to see how Google relates kewords to key search phrases is to do a search in Google. Then click on the "cached" link within the first three or four results; Google highlights the keywords you entered on the cached version of the page (just the words ... not the actual phrase). Here is a great place with free SEO tools to check how your page is optimized or not: rankquest.com I administer a large Manhattan NYC real estate firm website. There are over 700 brokers in NYC, all with websites and all vying for first and second page results ranking. Yet for some of the most important keyword phrases in our industry/region my site is either #1 or in the top 5 page 1 results - and for the least important keywords it is at least on page 1 or 2 of results: nyc apartment - #1 nyc apt - #1 apt in nyc - #1 manhattan apartment - #1 manhattan apt - #1 apartments in nyc - 2# apt in manhattan - #3 nyc apt for sale - #4 rental apts nyc - #10 I actively targeted these words in my text. And for the past year have been converting the more than 800 static pages from old, non-standards, graphic heavy table based layout to text heavy, keyword rich css layout with document structure that can be understood with all graphics and styling stripped away (the way the google bot does). However, recently it was brought to my attention that we were not even in the first four or more page for the phrases with "apartments in new york" or "apartment in new york city". My pages are indeed rich in the words "apartment" or "apartments" and "new york" or "new york city"; but the Google bot is obviously smart enough to know that I didn't target these words as "important" enough when together. This just goes to show exactly HOW complex SEO is.

If I understand you correctly, I think you were trying to tell people that they don't HAVE to use semantic code if they don't want to. Which is true. It is optional. No site "requires" semantic detail. ALL sites SHOULD use semantic detail. 90% of sites DON'T use semantic detail. It is and will always be not only important, but necessary ... the blind or sight impaired will tell you that (and they deserve to visit and understand websites, as well). THAT said, I admit that 70% of my sites are not semantically coded ... but every new site I start is. But all that aside, I gotta say, whenever I come across someone who already THINKS and codes semantically, like stuffradio here, I will help and push them to continue doing so, and learn how to take advantage of it ... because they are far and away closer to "getting it" than most of the people using css.

Actually ... no. You have a lot of repair, changes and then tweaking to do. As a start, here is how I would BEGIN fixing your page. Start with the text and don't even consider how it looks. Just get it all ENCLOSED within the appropriate block level tag of some kind (h2, p, ul li, dl dt dd. etc) and have it flow semantically. Never leave text flappin' in the breeze and never EVER use br tags for spacing (that's what block level tags and margins/paddings are for). Drop any tables and start the layout structure. Here is a VERY rough version of how to begin (I made it "flexible" - initial font-size and layout widths in percentages): <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="en-US"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Seropets - The Next Generation</title> <style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 90%; width:99.8%; color: #000; padding: 0; margin: 0; text-align: center; background-image: url('http://seropets.com/layout/default/images/background.jpg'); background-repeat: repeat; } a:link, a:visited {color:#227629} a:hover, a:active {color:#009933} ul, dl {margin:5px; padding:5px; list-style-position:inside} li, dt, dd {list-style-type:none; padding:0.25em; margin:5px;} ul ul, li li {list-style-type:disc} li a:link, li a:visited, li a:hover, li a:active {list-style-type:none} dt {font-weight:bold} #header { background: #FFFFFF url('http://seropets.com/layout/default/images/header.jpg') left repeat-x; width: 100%; height: 110px; border-right: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; } #userdetails { background: #e6e2e2; text-align: center; border-top: solid 1px #000000; border-bottom: solid 1px #000000; border-right: solid 1px #000000; border-left: solid 1px #000000; } #nav { float: left; font-size:90%; background: #e6e2e2; width: 20%; Margin:0 0 0 5px; padding:0 0 0 5px; font-weight:bold; } #content { margin:0 0 0 5px; padding:0 5px; float: left; background: #fff; width: 73%; border-right: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-top: solid 1px #000000; } #content ul {padding:0.25em; margin:5px;} #content li {list-style-type:upper-alpha; font-weight:bold;} #content li li {list-style-type: square; font-weight:normal;} #contentcontainer {float:left; width:99%; background: #e6e2e2;} #footer { background: #e6e2e2; float:left; width:100%; text-align:center; border-top: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000; border-bottom: solid 1px #000000; } #container { width:100%; text-align: left; } .contents { width:100%; float:left; margin:5px; padding:0 5px } #contentcontainer:after, #bottom-bar:after { content:"."; display:block; height:0; clear:left; visibility:hidden; } #contentcontainer, #bottom-bar{display:inline-block;} /* Hide from IE Mac \*/ #contentcontainer, #bottom-bar {display:block;} /* End hide from IE Mac */ --> </style> <!--[if lt IE 7]> <style>#content {width:70%}</style> <![endif]--> </head> <body> <div id="container"> <div id="contentcontainer"> <div id="header"> </div> <div id="userdetails"> <p>You aren't logged in! Please Do!</p> </div> <div id="nav"> <p>Nav</p> <ul> <li><a href="http://seropets.com/index.php">Home</a></li> <li><a href="http://seropets.com/news.php">News</a></li> <li><a href="http://seropets.com/board/index.php">Forums</a></li> <li><a href="http://seropets.com/login.php">Login</a></li> <li><a href="http://seropets.com/register.php">Register</a></li> <li><a href="http://seropets.com/toolbar.php">The Toolbar</a></li> </ul> <hr> <p>Stats:</p> <p>Not logged in!</p> <hr> <p>Help:</p> <ul> <li>Skills</li> <li><a href='http://seropets.com/staff.php'>Staff</a></li> <li>Contact Us</li> </ul> <!-- closes nav --></div> <div id="content"> <div class="contents"> <h2>Seropets</h2> <p>Seropets is a game that's being developed. It is a story based RPG Pet Site! What does this mean?</p> <p>It means, each month there is a bit more information released on the events that happened before.</p> <p>We don't think you can ever remember every thing that happened, hence the game will never end!</p> <ul> <li>The Plot <ul> <li>You're one of the only survivers after a huge earthquake... or so it seemed. </li> <li> As you explore more and more of the main land, you discover new and familiar faces ... some are your foe, and some are your friend. </li> <li> Each one of you have a few furry friends following you around; they're the only thing you can trust. Make sure you're loyal to them. </li> </ul> </li> <li>The Quest <ul> <li> The Quest, should you choose to accept... is to try and find out what happened. </li> <li> With each quest comes a reward. Sometimes a new skill will be discovered, or you might even find some of your family members! </li> </ul> </li> <li>The Skills <ul> <li>At the beginning you have 3 basic skills. </li> <li> You can only use one type of skill at a time. </li> <li> When you start to wander off(stop playing the game during the day or night) you can still gain some experience/resources! </li> </ul> </li> </ul> <dl> <dt>Mining:</dt> <dd>Level 1-10: You can Mine some items that are surrounding your area at the time.</dd> <dd>- Rocks(1-5): 10 Sero coins(SC)/bundle</dd> <dd>- Coal(5-10): 15 Sero coins(SC)/bundle</dd> <dd>Level 10-30: You can look for a gold mine, and mine in them.</dd> <dd>- Gold(10-20): 25 Sero coins(SC)/bundle</dd> <dd>- Rubies(20-30): 50 Sero coins(SC)/bundle</dd> </dl> <dl> <dt>Lumber Jack:</dt> <dd>You can use Lumber Jack to chop wood for your basic weapons. These things are handy to have, however they can be heavy at times.</dd> <dd>Level 1-5: Shrubs can be used to make bows and arrows.</dd> <dd>Bows: 5 Sero coins(SC)/bow</dd> <dd>Arrows: 5 Sero coins(SC)/group of 25 arrows</dd> <dd>Level 5-10: Oak can be used to make clubs</dd> <dd>Clubs: 10 Sero coins(SC)/Club</dd> </dl> <dl> <dt>Smithing</dt> <dd>You can use Smithing to melt melt your materials together.</dd> <dd>Level 1-10: Can smelt Rocks and Coal</dd> <dd>Swords(1-5): 10 Sero coins(SC)/sword</dd> <dd>Daggers(1-5): 10 Sero coins(SC)/dagger</dd> <dd>Axe(5-10): 20 Sero coins(SC)/Axe - It requires level 10 Lumber Jack, and a pile of oak per Axe</dd> </dl> <h4>Development/Beta</h4> <p>Beta Date: March 1st, 2008</p> <p>I will ask for people to sign up for Alpha/Beta testing.</p> <p>I am working hard to get everything running flawless. You can see all updates by going to the news page.</p> <!-- closes class contents --></div> <!-- closes id content --></div> <div id="footer"><p>All material Copyright Seropets, Inc.</p> <p>All rights reserved. Use of this site signifies your acceptance of the Terms and Conditions. </p> <!-- closes footer --></div> <!-- closes contentcontainer --></div> <!-- closes container --></div> </body> </html> It gives you all the tools needed to tweak this layout into how you want it. The use of lists is a very powerful tool. After digesting this for a while, go to maxdesign. After a few tutorials you will have this stuff down. Good luck, Dave

First, a little critique. The Good: What is absolutely great about your site concept is that it uses superb, simple, text-based semantic markup code. THAT leaves you a LOT of room for dramatic, yet easy, design with little to no changes to the markup (most design changes can be done using an external stylesheet). The problems: 1. Using an XHTML Transitional doctype with an ISO charset and served as text/html. 2. Using old HTML 3 deprecated markup level styling tags - <center>, <b>, <u>, "<table cellpadding='0' cellspacing='0' width='600'> . These have no business being anywhere near an XHTML doctype. 3. Using a table for layout when everything else is perfectly setup for table-less layout. 4. You have closing paragraph tags in you table cells (td) but no opening paragraph tags. You use a break tag for spacing which will not work in all browsers (break tags belong within a block level tag (p, li, etc) to literally break text within a block tag to a new line. 4. this does nothing: "<style type="text/css" src="showhint.css"></style>" The fixes are easy. 1. Lose the XHTML. Switch to HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 2. Change this: "<style type="text/css" src="showhint.css"></style>" to this: <link href="showhint.css" rel="stylesheet" type="text/css"> Now the column issue. Convert the table altogether to a simple class container within <div id="content"> like this: .contents { width:600px; float:left; margin:5px; padding:0 5px } then drop it into your id content: <div id="content"> <div class=".contents></div> </div> Now, lose all heights in the css. #nav { float: left; background: #e6e2e2; width: 120px; border-top: solid 1px #000000; border-left: solid 1px #000000; border-right: solid 1px #000000; border-bottom: solid 1px #000000; } #content { float: left; background: #fff; width: 798px; border-right: solid 1px #000000; border-bottom: solid 1px #000000; border-left: solid 1px #000000; border-top: solid 1px #000000; } Now we clear the floats in the css - add this to your css: #contentcontainer:after, #bottom-bar:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #contentcontainer, #bottom-bar{display:inline-block;} /* Hide from IE Mac \*/ #contentcontainer, #bottom-bar {display:block;} /* End hide from IE Mac */ Once you fix the html errors, remove the table, have both nav and content floating and properly cleared, the columns will be equal.

Mainewoods, is right, of course. Dysan SHOULD actually learn how to use css correctly and avoid ALL deprecated markup elements. This: <table width="246" border="1" class="coll"> Should be either this: <table style="width;246px; border:1px solid #000000"> or this: <table class="coll">, with this in the css: .coll { width;246px; border:1px solid #000000" }

Yes, for ALL bold text. We're talking about just the first name being bold. So forget the styling in the td tag. So for one word you can use the old "bold" tag (html) <b>First name</b> Last name or the newer "strong" tag (html, xml and xhtml) <strong>First name</strong> Last name or a css class based "span" tag: <span class="bold">First name</span> Last name

What was your css?

First, is there any reason you use "td id=bold"? If you didn't set a css id called #bold in your style sheet than it is unnecessary ... remove it. Second, since you are using a transitional doctype, you can indeed use either "stong" or even the old "b" for bold tag because transitional allows you to use text in table cells without block level tags - as follows: <tr> <td><strong>Persons First Name</strong><br> Persons Last Name </td> <td> </td> </tr> </table> or, <tr> <td><b>Persons First Name</b><br> Persons Last Name </td> <td> </td> </tr> </table> Either one is perfectly fine.

While that works, visually, that's very old school technique. It's fine for a personal site, where SEO and usability don't matter, but for a business it is sure death. Aside from the fact that using tables for layout is unprofessional, the key to today's business websites is to reduce page weight as much as possible and to maintain as small a percentage of code to text % ratio as you can ... otherwise the Google bot will get fed up and toss it into the low index pile. Your solution is also a potential cross-browser problem. Unless you use very tight, well formed and standards compliant html and css, your "layer" (position:absolute) will be all over the place from browser/platform to browser/platform. The old way was to nest tables like crazy. While THAT works in all browsers, it makes the code so heavy and convoluted it looks like it was generated by a Microsoft application's "convert to web page" tool (ever see the code of those? Yikes!) Here's an example of that technique - I was still just learning css back then and too lazy to use a css technique instead - look at the code and try to make sense of the nesting: http://jhrenovations.com/services.html And on top of all that, the tables use a small graphic for each corner, then a small graphic for each of the four sides - which further adds to the page weight: The css rounded-corner technique is clean and easy and only ups page weight by nano-seconds.

Well, you should at least try it. Who knows, you may stumble upon the solution.

The key to css is to "Do it once in the stylesheet and forget it"! So, first (as you may already know) for links you need to start with your default "tag" level page links. These don't require any class and will be used for any link on the page (unless told otherwise via class or inline style). They must be in the proper order, which is LVHA (aka LoVeHAte): a:link, a:visited, a:hover, a:active These are called pseudo-elements because they are modifying the "a" anchor. So in your stylesheet designate your default links as follows: a:link, a:visited {color:#0000FF; background-color:#FFFFFF; text-decoration: none} a:hover, a:active {color: #FFFFFF; background-color:#0000FF; text-decoration: underline} Now whenever you use any <a href="#">Someone's Name</a> it will use the default. Now for specific classes and/or ids you simply do the same only using the class/id selector before it: .name a:link, .name a:visited {color:#000000; background-color:#800000; text-decoration: none} .name a:hover, .name a:active {color: #FFFFFF; background-color:#000000; text-decoration: underline} You call it individually like this: <a href="#" class="name">Someone's Name</a>

Uh Oh (LOL, bronzemonkey). Don't spend too much time on that. You WILL be able to get it to work ... well, almost ... IE 7 is the monster for that one. While it will drop down and expand the width, any background color and border hover effect will only span just the width of actual text itself - and not the whole width of the drop down box itself. So far some of the finest minds of css out there have not been able to solve this problem.

Actually, rounded corners via css is common, cross-browser compatible and extremely easy to do: This site I made a while ago uses css for the rounded corners and it even works in Mac IE 5.1: http://www.regisresidential.com/home.php In a nutshell what this does is like using progressively shorter leggo blocks stacked one atop the other to create the illusion of round. In this case it uses a series of 2px high colored boxes, each with a margin left/right margin that gets progressively shorter. Here is the css: /* styles for rounded corners */ b.rtop, b.rbottom{display:block;background: #EFE2D3} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #800000} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin:0 1px;height: 2px} Here is the markup: <div id="navcontainer"> <b class="ntop"> <b class="n1"></b> <b class="n2"></b> <b class="n3"></b> <b class="n4"></b> </b> <div class="navHeader">Section Links</div> <ul id="navlist"> <li class="onpage">Home</li> <li><a href="apartments.php">Apts for Rent</a></li> <li><a href="apartments2.php">Apts for Sale</a></li> <li><a href="aboutus.php">About us </a></li> <li><a href="contactus.php">Contact us </a></li> </ul> <b class="nbottom"> <b class="n4"></b> <b class="n3"></b> <b class="n2"></b> <b class="n1"></b> </b> It is a classic technique that doesn't require any graphic. Although, in my case I use a 2px wide by 25px high graduated color graphic - black on the bottom and graduating to the same color as the boxes - as the main div background to give it a little more "design".

You can still designate styles using "inline css". <table> <tr> <td style="background:#000000 url ("img.gif") top left repeat-x; border:1px solid #ffffff; margin:2px; padding:2px"> </td> <tr> <table> [code] [/code]

Meanwhile, there is always the css must-have classic toolbox at maxdesign: Listo-o-matic List-o-matic, List-o-matic2, Listutorial, floatutorial and the single most important MUST-KNOW Selectutorial. If you only ever have one single source for learning and understanding css ... this is it. And for your specific type of menu, the classic Douglas Bowman "Sliding-doors" technique at A list apart Sliding Doors of css The origins of all of Stu Nicholls' menus took their beginnings from these two resources. Good Luck, Dave

I suppose, if you want to, you can add another class for sub-sub menus that will use the margin-left.

GREAT! Then simply change your IE6 only cond comment in the head to this: <!--[if IE 6]> <style type="text/css">.pro_linedrop .select :hover .sub {left: 1px; margin-left:0}</style> <script type="text/javascript" src="supersleight-min.js"></script> <![endif]--> And I just realized why Stu uses the margin-left. This was part of his professional series that has "multiple" subs. You are only using on sub-menu so you can change it

Looking it over, I tried a simple solution that worked in IE6. I never use negative values if I can help it. The drop-down for IE6 uses absolute position (relative to the main container). So Why leave out the "left" command and use margin-left negative value instead? Change this: *margin-left: -58px; /* FIX FOR IE */ to this: *left: 1px; /* FIX FOR IE */ Worked for me in IE 6. Didn't check it in IE 7 - but supposedly the negative margin is just for IE 6.

Try creating an ieonly.css file for nothing but those specific problem elements' paddings, margins or "left" positioned commands. You only need to put the commands of elements that you want IE to treat differently (not all commands). Use an IE conditional comment to call the ieonly.css file in your head tag as follows (this tells it to use all version up to and including IE 7): <!--[if lt ie 7]> <link href="css/ie-only.css" rel="stylesheet" type="text/css" /> <![endif]--> Modern browsers will ignore it. Example ieonly.css file (I added arbitrary left padding and width sizes for demonstration purposes only, you tweak them to work in IE as needed): .pro_linedrop .select a { padding:0 0 0 5px; } .pro_linedrop .select a b { padding:0 20px 0 4px; } .pro_linedrop .select a:hover b .pro_linedrop .select li:hover { padding:0 0 0 5px; } .pro_linedrop table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .pro_linedrop .select :hover .sub { width:200px; margin-left: -80px; } .pro_linedrop .select :hover .sub li a { width: 200px; padding:0 2px; } IE will use the css from the main css file but will replace those commands that are to be altered from the ieonly.css file. What I found is that you need to be very carefull when using minus value margins/paddings ( "-120px" }in IE.

This is exactly why you need an ie-only css. Remember, IE does not handle floats, margins, paddings the same as modern browsers. It is the only way to be 100% sure of cross-browser compliance. It will save you hours of frustration. Why do YOU think that is? Look at two things - 1. what is the padding/margin for those 2 containers, 2. what is your padding/margin for any UL element? It really is doing exactly what you are telling it to do. And whenever you leave any block level element to browser default, you will get an even more frustrating IE vs Modern Browser results.

Actually, I thought fluffy-sama was quite humble. The reason you aren't getting any response, however, is because you have not really explained what you want to do properly. Is this called via jscript: Are you using the a:hover pseudo-element to make the effect work? Show us a sample or give us a link to a test page, or at least copy and paste your code) use the tag before and after any html or css sample code. There is a way to use transparent along with a background image. But I think you should start with the one place most of us started ... the Master, "maxdesign": List-o-matic Listomatic is all about using lists for menus, and hover effects via css.

bronzemonkey's solution for clearing floats is so much better than the "standard" way - by adding a "clearfix" class to the floated element. He designates the clearfix for the actual id container itself - much cleaner markup. But I prefer using the "clearfix:" float clearing method to just clear the main container itself (which I float) and not any nested floats within a non-floated container. But to your situation itself. First, the reason the header doesn't align with the logo colors is because you forgot to add the IE conditional comment styles in your test version ... AND now that it is properly cleared, the #header tag needs a height and padding, as well, to position it with the logo. Looking at your code, I would change the actual way it is constructed, but to fix it as is I recommend two things: 1. Don't clear #extra_links; remove them from the group of IDs that are "clearfixed". 2. make a separate "ieonly.css" file that modifies just a few positioning items in some elements and call it with a conditional comment in the head tag. In your test.css I modified the following: #header { color: #ffffff; background-color: #003300; height:58px } #courses { float: left; margin-right: 15px; } #course_details { border: 1px solid #003300; padding:15px; float:left } Then I made a file called ieonly.css to it fix the header alignment and modify a few things I changed from the main css as follows: .content { padding-top: 12px; } #header { height:58px; margin:0; padding:12px 0 0 0; } #side_nav { margin-right:-3px; padding:0 } #course_details { float: right; } and added this to your head tag: <!--[if IE]> <link href="css/ie-only.css" rel="stylesheet" type="text/css" /> <![endif]--> This seemed to fix the issues you were having after the float clearing. It looked fine to me in Win 2000 Firefox and IE 6.0 HOWEVER! Yesterday I discovered that the best platform and browser to confirm cleared floats was Ubuntu Firefox. If you want to be a "purist" and make sure your floats cleared 100% as they should, then that's the platform and browser. (Floats that I had never cleared but looked fine in Win, FF/IE, Mac Safari and SuSe Linus FF and Sea Monkey blew up in Ubuntu FF). But most people are happy enough with Win FF/IE and Mac Safari since these 3 represent 99% of most visitor platform/browser stats.

This IS their code, you have to understand both JS AND regular expressions for it to make sense: http://regexpal.com/assets/build-0.1.3.js