As an answer to your comment to Cheran's answer: Considering you are using the
<aside> element, which is HTML5, you should be using the HTML5 DOCTYPE:
However IE doesn't support HTML5 - or to be more exact - doesn't support elements it doesn't know of, so you should add the html5shiv script, that works around this: http://code.google.com/p/html5shiv/
Some more points:
The next step would be to make sure you have declared the right character set. Currently you have no declaration at all. Best would be to configure the server correctly, so that it returns a Content-type header with a charset, if you can't do that add at least a meta tag: http://www.w3.org/International/O-charset.en.php?changelang=en
Then you should validate you HTML and CSS: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ . The CSS is easily fixed: You have some missing length units in your CSS. Your most "glaring" HTML error is that you made up your own element
pagno. Although it technically works, it's something you should avoid. A simple
<span class="pagno"></span> would be better.
In that context: you use CSS content generation. You should keep in mind that IE6/7 doesn't support this.
Especially in the in the "title page" you have many inline styles. You should move them to the style sheet instead.
You should use more meaningful HTML elements. Instead of using
span every where use
p for paragraphs,
h2, etc. for headlines,
strong for emphasis, etc. And if you use HTML5, then it provides more great elements for structuring texts such as
You could probably cut down on the number of classes and choose better class names. For example, the paragraphs of the letters are generally all numbered and indented, so instead of marking each and every paragraph with the those classes, define
p generally to be indented and numbered, and use classes only for the exceptions. Also class names should be chosen to represent the meaning of the text it marks not it's look. So continuing my example, for unintended paragraphs don't call the class
unindented, but a name that represents why it's unintended.
I must admit, styling the title pages isn't simple, because (for me as an amateur in the area of 18th century type setting) the choices in font sizes and variants seem quite random :-)
This is a first attempt: http://jsfiddle.net/8TFuJ/1/
I chose the words themselves as the class names, because the styling seemed to be specific for them. It probably could be optimized by combining similar elements such as the
ems I used twice for the capitalized words, and by finding more similarities between the other title pages (I only looked at the first one for my attempt).