What is a

By Posted in - Blog on October 26th, 2009 0 Comments

We recently had a client who was trying to post a poll into their web site using a snippet of code provided by the poll web site. This was fine to do, in theory, but every time they added the code their site would “break” and everything would look out of place. Images would go on top of each other and columns wouldn’t be in the right places. After looking at the provided code snippet for the poll I quickly recognized the problem… the code snippet contained a superfluous </div> tag.

Most modern web sites, unless made from Flash, are made up of CSS (cascading style sheets) and HTML. CSS is code that tells the HTML what to look like. It’s as if you have a box of white crayons to begin with and the CSS says, “crayon #1 = green” and so on.

This is done mostly through “classes.” A class is simply a set of definitions for an object in the HTML. So, again with the crayons, you can have a class called “green crayon” and it will say that crayon is green.

The class can also tell the position, height, size, and all other things about the object.
To let the web site know what thing is in what class you wrap it in a <div> tag.

So, for example, you might have.

<div class=”green crayon”>crayon</div>

The <div> starts it and the </div>  ends it. Everything between that is going to be considered the “green crayon.” Every class has a starting one and an ending one. If you have a <div> anywhere to start something you have to end it later with a </div>.

A web site will have a lot of classes. You have classes for the photos, boxes, the header, the links, the text, the columns. Along with this is the fact that every class is dependent, to some degree, on the other classes surrounding it. For example the “right column” can only be as wide as the total width of the site minus the left column width. Right? Otherwise it won’t fit and the site will look funny.

Well, the “POLL” code our client was copying and pasting into their site had an extra </div> tag in it. This is what was causing the site to “break.” Essentially it was telling the site to “end” a class before it should really be ending. Then the new class was taking over too soon and everything was goofing up.

Look at this example.

Here’s what the example crayon box should be doing…

<div class=”crayon box”>
<div class=”green crayon”>Crayon</div>
<!– end green crayon –>
<div class=”red crayon”>Crayon</div>
<!– end red crayon –></div>
<!– end crayon box –>

When the poll snippet was added this was happening…

<div class=”crayon box”>
<div class=”green crayon”>Crayon
<!– added poll div tag –></div>
<!– end green crayon –>
<div class=”red crayon”>Crayon</div>
<!– end red crayon –>
<!– end crayon box –>

See, the tag the poll is adding is essentially CLOSING the “crayon box” class. The first <div class=”crayon box”> starts it… (that’s 1 div) then the <div class=”green crayon”> starts a 2nd one… (that’s 2 divs). The first </div> closes the most recent <div>… which is the “green crayon”… THEN — and here’s where things go awry — the</div> tag that is added by the POLL code closes the “crayon box” class.

If something is breaking your layout you can click on the HTML view mode in WordPress and make sure there are no <div> or <span> tags whatsoever. If there are, remove them and see if it works then.

Hope this helps understand.

Please leave a Comment