Everytime I add the 'doctype', <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, to my document it always changes the layout of the <div> on my site. div { background-color:#FFFFFF; width:100%; height:50%; overflow: auto } The 'height:50%;' is totally thrown out when the 'doctype' is added and the entire contents of the <div> are shown on the page. Without the 'doctype' line it sitcks to the 50% height and displays the verticle scroll bar to see the rest of the contents, just like I want. Examples: I would like for my page to look like this: http://www.mjnails.de/test2.htm but this is what I get when I add the 'doctype' to the document: http://www.mjnails.de/test.htm I already tried other types of 'doctypes' and get the same result. Any suggestions on what I can do to have a "validated" website without the unwanted changes by a simple line? Both document texts are attached.
Sorry I can't tell you how to get it exactly how you want it. My only suggestion is to set an exact height, instead of a percent. That will fix it.
I appreciate your advice. I looked into that option but I can't stand how it is not flexible when the window is resized. Would it be a bad move to leave the doctype off all together?
The DTD is the trigger to set either standards mode or quirks mode. It is especially relevant to IE6 which will act in a semi-civilized manner only in standards mode. If your page changes, it indicates you were coding for buggy behavior. Be sure to give html or body a height so your div will have something to be a percentage of. In general, it is better not to specify heights, and let content determine it. Specified heights are a holdover from the print design paradigm. cheers, gary
If your page is goofing up when you put the doctype in, then you have some serious issues on your site and it only looks "correct" without the doctype because MSIE is jumping into quirks mode. As I tell everyone, the first thing you need to do is fix your pages such that they validate to W3C HTML and CSS specifications and only once this has been completed can one then begin to adjust styles and HTML code to resolve display issues. Really this is the only way to resolve issues and make sure they don't crop back up or cause different problems on other browsers. Oh, I'd also recommend using Firefox to do your browser testing to avoid pitfalls caused by MSIE's quirks mode and bad behavior.
I'm pretty sure his page is already validating, W3 reports : "This Page Is Valid HTML 4.01 Transitional!" But I agree 100%, it's the first thing that I checked since it's almost always helpful in these situations. Unfortunately it's already validating so no instant solution... Spoken like a true designer Heights may not be 'best practise' coding, but in the real world (not just the print world) heights can surely be useful - after all, the important thing is only that it looks good on the page, right? But in this case, I'm not sure it does look good - personally I don't like scrollbars that don't belong to the main browser window. I've seen plenty of users have trouble figuring out how to use regular scrollbars, so I can only begin to imagine how confused those people would be with scrollbars that aren't in the usual place - I believe many wouldn't even notice the inner scrollbar, and they'd never see the content that's further down the div. I don't think it's a good idea to drop the doctype.
Actually, I'm a coder who does constant battle with trained graphic designers. Unfortunately they're trained for print, where a page has a finite size. Once one of these print designers learns that a web page is exactly as long or short as it needs to be, and that whatever they think, the user thinks differently, the quality of the work improves dramatically. And, it's amazing how seldom the height property then gets used. The designer has to have an epiphany, an aha! moment. Sadly it doesn't happen often enough. cheers, gary
Thank you all for the advice. The reason I was shooting for a set distance was to match my wife's business card layout. As A1 pointed out I did validate my site with the doctype in the document and fixed every error that came up. This is what led me to use CSS in the head of the document. I never really thought about using CSS before I realized how useful less crowded it was. I will reconsider this design and shoot for something new and limitless. As you can tell I am new to this arena and have a lot to learn. I have been browsing around the W3 schools website to get an idea of what is in at the moment and how it works. I found some useful websites in this forum that talk about making a site totally with CSS, csszengarden.com/ is one of these sites. I think that I will give that a shot sometime in the near future. Thanks again for the advice.