Solved

CSS with/without DOCTYPE  Varied Results - Why, and how to fix?

Posted on 2003-11-18
12
473 Views
Last Modified: 2012-06-21
Good morning experts,

Ok, first things first - web design is not my primary employment, but I see plenty of opportunity for it to provide sollutions for me. It's also fun (I know, I'm weird).
I've been attempting to clean my act up and learn more about CSS and producing HTML4.01 valid files. But whilst I'm still learning I've come across an inconsistency that I'd like to understand (and find a solution for if possible!).

I'm generating article summaries for staff use, they can select articles from a list in a form which when submitted launches javascript to compile a page containing all the summaries ready for print. The summaries are (at this stage) designed to be roughly A6 size (so 4up on an A4 page). The users will exclusively be using IE 5+ as a browser.

I needed a nicely formated bullet list, and I found a solution by seanpowell in this PAQ which I adapted to my use.
http://www-level3.experts-exchange.com/Web/Web_Languages/HTML/Q_20793812.html

I have the following (normally I would use an external css file, but it's easier to show complete like this):
n.b. sorry I can't just post this as files somewhere, but we have pretty restricted external network access.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Single Article Summary</title>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<style type="text/css">
<!--
body { font:normal 8pt "Avant Garde", AvantGarde, "Century Gothic"; width: 355px; margin-left: 10px;}
.container { padding:0px; width: 355px;}
.bullet { height:8pt; vertical-align: top;}
.list { padding-left:4px; height:8pt; vertical-align: top;}          
.underline { width: 355px; border-bottom-width: 1px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-style: solid; border-color: #000000;}
.description { font-size:13pt; font-weight: bold; text-align: center;}
.scolour { background-color: #F2F2F2; width: 355px;}
//-->
</style>
</head>
<body>
<div class="container"><div class="description">Article Description</div></div>
<div class="scolour"><div class="container"><span class="bullet">&bull;</span><span class="list">Highlight Features</span></div></div>
<div class="underline">Features</div>
<div class="container"><span class="bullet">&bull;</span><span class="list">This is the first line describing the article summary and is quite long as you can see</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">A short summary line - wont wrap I guess</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">Another short summary line</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">Really long summary line - why not just reprint the whole article I ask them. But oh no, this is a summary, really it is - trust me people will want this detail in a summary. Bah.</span></div>
<div class="underline">Article Generated By</div>
<div class="container"><span class="bullet">&bull;</span><span class="list">The Article Generator goes in here</span></div>
<div class="underline">Article Timing Details</div>
<div class="container"><span class="bullet">&bull;</span><span class="list">1st Line of details about the timing of the article</span></div>
<div class="container"><span class="bullet">&bull;</span><span class="list">2nd Line of details about the timing of the article</span></div>
<div class="underline">Article Summary search fields</div>
<div class="container"><span class="bullet">&bull;</span><span class="list">Words that are held elsewhere as searchable data</span></div>
</body>
</html>

The document is valid HTML4.01 strict. But with the DOCTYPE declaration in the lines no longer wrap to a margin after the bullet point, but the screen render and print match. If I remove the DOCTYPE declaration the lines wrap to a margin after the bullet point but some of the wrapping lines begin UNDER the bullet point when rendered to screen, and when printed still more appear under the bullet. If I could post files I would do an example of each, but a simple cut and paste and then trying one with the doctype and one without will demonstrate.

Three questions (hence the high points):
1) In the immortal words of Julius Sumner-Miller, Why is it so?
2) How can I fix it?
3) CSS tips? I think what I've done is quite ugly, but I'm still learning and searching for the knowledge that will give me a more elegant solution. Can what I've got be optimised?

End users will be using Internet Explorer 5+ and I would like to avoid using any external files (except for css/javascript to render/generate the page - but no images) prefering to keep all the positioning and design in the css.

Cheers,
Paul
0
Comment
Question by:silvercloak
  • 4
  • 2
  • 2
  • +2
12 Comments
 
LVL 17

Accepted Solution

by:
dorward earned 250 total points
ID: 9776959
> 1) In the immortal words of Julius Sumner-Miller, Why is it so?

Internet Explorer implements DOCTYPE switching. Certain Doctypes make it go "This looks like the author knows what he is doing - I'll render to standards", others (or missing ones) make it go "This looks like the author doesn't know what he is doing - I'll emulate the bugs of IE 5".

> 2) How can I fix it?

The main difference between modes is that "width" in standards mode (And in real CSS) means 'the width of the content'. Padding, border and margin are all ADDED to the width to find the total size of an element. So with width 20px, and padding: 5px it takes up 30px of space. Make sure your elements can fit!

>3) CSS tips?

* Never use pt on screen
* Avoid px for almost everything (Except things which are intrinsically in pixels anyway - like non-vector images)
* Don't use <div> when something exists that better describes the data. e.g. your class="underline" look like <h2> or similar.
* Don't use class names that describe the look, pick ones that describe the element.
* If you want a bulleted list, we have <ul> and <li>
0
 

Author Comment

by:silvercloak
ID: 9791785
1> Ok, so IE is trying to render to standards (which by putting the DOCTYPE in I knew it would do). And without it IE will render in it's on special way (ie: bugs. Which I also already knew - is this what you meant by 'I'll emulate the bugs of IE 5', IE will emulate it's own bugs?).

2> Ok I must be missing something here - I understand what you're saying, and I can see that I've created some errors here:
  Body width is 355px
  with a margin-left: 10px
(I take it this leaves me with 345px space for child elements?)
If I just look at the bullet points I then have:
  container: width: 355px
  padding-left: 4px
So if I understand what I've tried to do applying what you've told me I'm trying to squeeze 359px width of elements into an already defined 345px (or if the 10px margin doesn't apply then I'm at least trying to squeeze that 359px into 355px).
I've tried resizing these measurements, but there was no net result.

3>
>> * Never use pt on screen
Why no pt on screen? I don't doubt it, I'm curious though. These pages are specifically for print output, I'm not too fussed if there's a couple of inconsistencies with screen rendering so long as the print output matches what I want. I would have imagined that pt measurements were an absolute, thereby guaranteeing predictable results? (nb. the users are in a managed workstation environment, so they should all have the fonts required unless they've been hacking the system or suffered a drive image problem - in which case these pages not displaying how I would like is the least of their concerns).

>>* Avoid px for almost everything (Except things which are intrinsically in pixels anyway - like non-vector images)
 I do understand not to use px measurements, as display can be affected by screen resolution, screen dpi and more. I have been lazy and not used them yet as I'm trying to get the concept working first - if what I want is not possible I'm not going to bother with too-fine details yet.

>>* Don't use <div> when something exists that better describes the data. e.g. your class="underline" look like <h2> or similar.
Point well taken - extending this can I guess you would be suggesting that I define the selector H2 { border:......} and use that instead of underline? Although wont this inherit the browsers own style rendering of H2? All I really want is an underline that extends the width of the defined space.....

>>* Don't use class names that describe the look, pick ones that describe the element.
Again, another good point - and one I've heard before but not yet applied. Again, because I'm only working on one page and I want to prove the concept before applying it to 400-odd documents I hadn't really bothered. However, given my desire for a full width underline, and using this idea, would you say that...

. section_title { border-bottom-width: 1px; border-top-width: 0px; border-right-width: 0px; border-left-width: 0px; border-style: solid; border-color: #000000;}

... would be a better definition?

>>* If you want a bulleted list, we have <ul> and <li>
I haven't used these because I have a layout requirement. Specifically I don't want the large spacing that is introduced into lists between the bullet and the text. This is really the crux of the issue - I would like to have control over the spacing between the bullet and the text (without using background images - the only linked file I want in these pages is the CSS). Hence, I adapted the answer to:
http://www-level3.experts-exchange.com/Web/Web_Languages/HTML/Q_20793812.html
Which basically asked the same thing.

Thanks for your answer, I'll keep playing with the widths and see if I can work out where I've gone wrong. I have added a P definition that keeps it all working well without the DOCTYPE in there, however I'd like to know how to get the result with the DOCTYPE included!

Cheers.
0
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 250 total points
ID: 9794174
Just to add...

* Never use pt on screen
Unless it's being used for printing, in which case you want to always use points to specify font sizes.

* Avoid px for almost everything (Except things which are intrinsically in pixels anyway - like non-vector images)
Nothing wrong with using pixels if they're used correctly. 50 pixels is always going to be 1/2 as wide as 100 pixels, no matter what screen you're using. For relative design sizing issues, pixels work extremely well.

* Don't use class names that describe the look, pick ones that describe the element.
This depends on who's using the code - some clients prefer a descriptive name to a presentational one. Use whichever you're more comfortable with, I'm not a big stickler for semantic applications.

As far as your dilemma, you need to use a slightly different setup with the strict doctype, tested on IE5.0+

Here's an example for you:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Bullets</title>
<style type="text/css">
<!--
body { font:normal 8pt "Avant Garde", AvantGarde, "Century Gothic"; }
//-->
</style>
</head>
<body>
<div style="float:left; width:5px;">&bull;</div>
<div style="width:150px; margin-left:0px;">This is a lot more than two words, and will wrap properly</div>
</body>
</html>
0
 
LVL 17

Expert Comment

by:dorward
ID: 9795142
> Why no pt on screen?

Basically be IE's font resizes options break and becuase most systems aren't set up to handle points correctly.

> I don't doubt it, I'm curious though. These pages are
> specifically for print output

Use a media directive to set up points for the print out

> Nothing wrong with using pixels if they're used correctly.

Try it on a high resolution screen where each pixel is tiny (and the user has a large number of pixels in their default font allowing a only a small number of characters in the given space).

> This depends on who's using the code - some clients prefer a descriptive
> name to a presentational one. Use whichever you're more comfortable with

You'll find them very uncomfortable if the design gets changed and the class no longer describes the way the element looks.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9796546
Actually we had a situation about 6 months ago where a CSS error was published live because one of the new people I had on staff confused a class name. Had we called it "really_big_font" that never would have happened :-) So it all comes down to whatever rules you assign, and make sure everyone's on the same page. But ideally, "section_heading" is preferable to "green_text", because once you decide to change the text to red, you quickly see how it can become unusable...

>>because most systems aren't set up to handle points correctly.
I'm not sure what you mean by that? Our Printer's handle points quite nicely. If you're referring to how they look on screen, that's moot in this scenario, as the document the asker is referring to is for print. So we're not really looking at most systems, just this one.

>>Try it on a high resolution screen
You can't limit the use of something based on a single case scenario. In 99.99% of the time, using pixels for "design elements" is absolutely acceptable. I understand your intent, but it's simply not realistic to remove the pixel notation from everything save raster images. Percentages are for flexibility, and pixels are for precision. When used correctly, they both do their job quite well...
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 17

Expert Comment

by:dorward
ID: 9796722
The document might be for print, but the style sheet is for screen, and you can get rather a lot of precision based on a unit where the base line is based on how big something the user wants something to be (e.g. em) rather then a unit where the more you have, the better (pixels).
0
 
LVL 4

Expert Comment

by:Fendrin
ID: 9884894
dorward! stylesheets are not just for the screen!!! (actually, I suspect that you already know this... I am just being a little over emphatic... sorry :-) )

silvercloak, I admire your use of css on a print-focussed project. all of the points being made are valid... some of them may not apply though...
I think what dorward is tring to say is not that the stylesheet is for screen so much as that your display issue is on a screen. here is my recommendation...

use two stylesheets, each loaded with an @media so that you won;t run into cascading effects running from one to the other. (one screen, the other print)

for the print, use absolute measurements to define a print box (probably cm would be best) then use % or cm  to subdivide into sections, depending on which would be easier. Use use pt (or even cm) for font size.

as for the screen, in regards to your 'nicely formatted bulletted list', yech! reinventing the wheel! try some good ol' css1.... just make sure to throw IE into standards mode. (what version are you actually using?)
http://www.w3.org/TR/REC-CSS1#list-item-elements

as for the actual page rendering (print-preview, i guess?) I would want to know if you care whether or not the viewers have to scroll to see it all... if not, heck, just use your print stylesheet... the viewers will see it exactly the same as it will be printed... no scaling down to fit the screen... otherwise, I would say seeing you have a fixed viewing set up, use px to your hearts content... or even measure the screen and use cm (lol)

Normally, I am all for accessibility and accomodating viewer variation in browser, screen size, font size needs (vision problems, etc.) but if the setup is as rigorously controlled as you say then none of that is a factor anyway. why make your life more complicated? when you design a page for the web, that is another matter altogether.

0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 10029431
im not sure how html 4.01 strict syntax goes, but try removing the <!-- and //--> inside your <style> tag. xhtml 1.1 (which i use) requires <style> and <script> without the <!--, //-->, <!-- hide script..................
also, based on my experiences, IE really has bugs on <!DOCTYPE> declarations. i viewed my page cliently and my scrollbar color configurations don't work (i.e. the scrollbar color didn't change) and even some CSS configurations don't work too while viewing it online made it appear (seemingly it reads the url on the <!DOCTYPE>) and removing it also too.
0
 
LVL 17

Expert Comment

by:dorward
ID: 10029473
Fendrin: I said "stylesheet" referring to the stylesheet in this example, not "stylesheets" in general.

This is what the @media directives are for.
0
 
LVL 4

Expert Comment

by:Fendrin
ID: 10095179
sorry, like i said, i was being over-emphatic trying to make a point. you just happened to be the innocent bystander I hit with it... :)

@media is our friend...
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now