Adding DOCTYPE causes CSS weirdness — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Adding DOCTYPE causes CSS weirdness

This page's ID: 21967

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I have been trying to systematically unlearn and clean up bad habits from when I learned to build sites ~7 years ago. Right now I'm trying to make sure that my HTML and CSS validate, which they do, but it breaks things. First I'll spell out the problem, then give more info about the site. Exhibit A is here: [url]http://pc247h8312.med.unc.edu/ccbc/index.cgi[/url] This main page does not supply a DOCTYPE, yet it works better than the other pages. In Windows using IE6, The page looks precisely the way I intend. There are no margins at the top or left, the images all line up, and there is a darker blue margin to the right and left of the navigation buttons on the side. In Linux using Mozilla 1.4.1, there is an anooying offset of one pixel that causes the ccbc logo to not line up. Works well in Windows, slightly broken in Linux, but fails validation because there is no DOCTYPE. Exhibit B is here: [url]http://pc247h8312.med.unc.edu/ccbc/microarray/index.cgi[/url] The rest of the pages in the site use a common header, so they all supply a DOCTYPE. In Linux/Mozilla, the pages look identical to the home page: in other words, there is an annoying 1 pixel offset. In Windows/IE6, the lighter blue navigation buttons have no right margin and go right off the side of the lefthand column. This page validates, but does not look the way I intend. Answers to the following three questions would make my day: 1) why does adding the <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> declaration cause the navigation to break in Windows? (The css element is .navigation and it is pretty far down in the css) 2) Why is the logo offset and rather crappy looking in Mozilla? 3) Why are the bottom borders of the last three navigation buttons colored differently than the top ones in Windows but not in Mozilla? If I can in any way assist you with answering these questions, or if there is a basic resource I can use to find the answer, let me know. Thanks. More info below. It is a dynamic site where each page is created in .cgi. There's a .txt file called ccbctop.txt and one called ccbcbottom.txt. the cgi pages read the contents of ccbctop.txt and print them, then print their own html/database results/etc, then read and print ccbcbottom.txt Pseudocode: #!/usr/bin/perl read and print top.txt insert individual page stuff read and print bottom.txt This way I can change the layout of all pages by changing two text files. The code is written in Perl against a mySQL database. For an example of a dynamic page, visit exhibit B above, click RNA quality check, and use the login JDoe and no password. ~~~~~~~~~~~~~~~~~~~~~~~ Currently seeking a technology analyst/instructor/web developer position in the research triangle, any tips appreciated! Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu