Doc Type problems

[chrisJumbo]

I have a page that doesn't display correctly when I include the DocType declaration.

I removed the declaration on this one.
http://www.jumbocdinvestments.com/cdnews.htm

This one has it.
httl://www.jumbocdinvestments.com/test4.htm

Please excuse the loading time also. Two boxes are supposed to be displayed side-by-side at the top of the page. When the DocType is included, the second sits on top of the first, and the first is spread out across the page. The one box loads market data and the second news.

I use CSS to position the boxes. I used two different <span>'s within a <DIV>. The commentary and links at the bottom are two other <span>'s but they seem to be working fine.

[bodgekaloopie]

Perhaps you are using the wrong DOCTYPE.

http://www.w3schools.com/tags/tag_doctype.asp
http://www.alistapart.com/stories/doctype/
http://www.w3.org/QA/2002/04/valid-dtd-list.html

[dharrison]

As you have 2 stylesheets and a lot of classes referring to those stylesheets, I would've thought you'd be more strict than transitional.

HTH

[chrisJumbo]

I added the strict Doctype to
http://www.jumbocdinvestments.com/test4.htm

and I get the same problem. I've also tested this using FireFox. Having no DocType renders correctly.

I know when you don't specify one it uses "quirks" mode.

Here are my div and span classes. Maybe I've done something that isn't supported anymore.

div.right {position: absolute; top: 2px; left: 145px; width: 80%; height: 400px;
}

div.menu {position: absolute; top: 2px; left: 5px; width: 130px; height: 400px;
}

.stock { /*background-color: #ffff99;*/ position: absolute; top: 75px; left: 0px; width: 205; height: 200px;
}
.news { /*background-color: #ffffff;*/ position: absolute; top: 75px; left: 225px; width: 400; height: 200px;
}
.comm { position: absolute; top: 275px; left: 0px; width: 85%; height: 200px;
}

.link { position: absolute; top: 500px; left: 0px; width: 85%; height: 200px;

[Faglork]

First: Does your HTML validate?
Second: Does your CSS validate?

Did you check with the Web Developer Extension for FF how your DIVs are actually arranged?

Have you tred to eliminate all other elements, so that only these two boxes are displayed? Are they correct then? If yes, add the other elements until the error occurs. If not, you've got a lot less code to work on.

hth,
faglork

[dean]

I noticed that in your classes, .stock and .news , you didn't specify pixels in the width.


.stock { /*background-color: #ffff99;*/ position: absolute; top: 75px; left: 0px; width: 205px; height: 200px;
}
.news { /*background-color: #ffffff;*/ position: absolute; top: 75px; left: 225px; width: 400px; height: 200px;
}

[chrisJumbo]

Dean, thank you. That was the problem. My old saying once again proven true. The longer the time it takes to figure out, the dumber the error.

Can you guys point me to a good CSS validation tool? The HTML Editor I use does a good job on the HTML.

[bodgekaloopie]

If you use Dreamweaver - which I swear by, but a couple of regulars on this forum detest - it has a built in function that will validate your CSS.

You can also use http://validator.w3.org/, and if you use Firefox you can install an extension from https://addons.mozilla.org/ that integrates the w3.org validator right into your browser. IE has a similar developer toolbar add-on that includes a validating function.

Any of these tools makes it very easy to validate your documents, including CSS and HTML.

[iany]

Actually the validator you want for CSS is:
http://jigsaw.w3.org/css-validator/

It's all you need and validates what the server sees.

Ian