We help IT Professionals succeed at work.

HTMLButtonsSiziing

sam15
sam15 asked
on
Does anyone know why when i include this doctype with DTD reference it prevents the styling on buttons from showing up in Firefox 3.6 and IE 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


but when i use this line which is what the website uses i can see the buttons styling with different sizes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

Do i must us e a DTD as in #1.

see attached file for testing.
test2.html
Comment
Watch Question

The second line you're showing is not valid - you can see the correct possibilities of doctype's [DTD] here:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

The reason the first is causing you grief is because the actual DTD (http://www.w3.org/TR/html4/loose.dtd) will cause validation issues when it's loaded. Once you add the proper DTD, your next step should be to start validating your CSS and HTML:

CSS Validator: http://jigsaw.w3.org/css-validator/   
HTML Validator: http://validator.w3.org/ 

Note, I didn't see any external style sheets (CSS files) being loaded, so you'll have to validate that code directly. I noticed some of your CSS is not valid and that's likely what's causing your button to no longer change. For example you have:
<input type="submit" name="button" id="button" value="Save" style="width:150;height:40;...

When this should be:
<input type="submit" name="button" id="button" value="Save" style="width:150px;height:40px;...

As a side note, I would probably change that to:
<input type="submit" name="button" id="button" class="main_button">    (Storing your class in an external css selector 'main_button' for example)

So to re-cap:
1.) Chose a valid DTD
2.) Validate your CSS and HTML
3.) Browser test and QA/QC

Author

Commented:
Excellent answer. You are correct on the missing "px". I added that and it worked fine with the loose DTD.

Shall i always use the loose DTD for transitional HTML 4.01? is this invalid?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

[sam15] >> Shall i always use the loose DTD for transitional HTML 4.01? is this invalid?

Keep in mind there will always be a ".dtd" file referenced in any Doctype - it's sort of like including a JS file or CSS file. The entire doctype line will be specific to the type of HTML (or XHTML) you are creating, and as W3 mentions, "The doctype declaration must be exact (both in spelling and in case) to have the desired effect".

There are actually three different doctypes for HTML4.01: Transitional, Strict, and Frameset. If you look under the "(X)HTML Doctype Declarations List" on this page http://www.w3.org/QA/2002/04/valid-dtd-list.html you will see that there are a number of options - however, you would never actually modify those lines, you simply pick one.

Simply put, doctypes help standardize page markup. The reason you see different doctypes is a breadcrumb of the evolution of HTML. For example, XHTML aims to have any tag that is open, close. So in your input example above, it was:
<input type="submit" name="button" id="button" class="main_button">
And under the XHTML doctype, should be:
<input type="submit" name="button" id="button" class="main_button" />

The three sub-doctypes you see for HTML4.01 are for the same reason there are multiple doctypes: progression in those standards - for example, the "target" attribute (i.e. <a target="_blank"...) being phased out in 4.01 Strict (if memory serves me). The good news is you don't have to remember those progressions, you simply add the doctype to the top of your page, and when you're ready, run it through the validator.w3.org, and it will tell you validation errors.

There's no harm in using an older doctype (such as HTML4.01) and in fact based on your HTML above I would say it is the correct one. However, as you expand your web skills - you will find the other doctypes force you into standards that make larger web-applications easier to build (especially when collaborating with several developers).

There's a tone of extra reading on that same link - let me know if you have any other questions!

Author

Commented:
I checked on this and  I was told this was the default by Dreamweaver and that the DTD usage is optional.

http://webdesign.about.com/od/dtds/qt/tipdoctype.htm

 The rest of the DOCTYPE identifier is optional:
•"http://www.w3.org/TR/html4/loose.dtd"
The URI. This is an optional URL indicating where the DTD for this DOCTYPE can be found.

What do you think?

I think I would trust the w3.org here: http://www.w3.org/QA/2002/04/valid-dtd-list.html where it explicitly mentions, "The doctype declaration must be exact (both in spelling and in case) to have the desired effect". It doesn't make any indication the URI to the .dtd is optional.

Moreover, if you check the docs, you'll see here: http://www.w3.org/TR/html4/struct/global.html#h-7.2 that, "The URI in each document type declaration allows user agents to download the DTD" So it seems weird Dreamweaver is suggesting it's optional when that .dtd file is the most important part for validation - remember when you removed it your button lost its shape? That's because it started matching against invalid code.

That said, if you can find anywhere on w3.org where it suggests that is optional I'd love to know!

BTW - What version of Dreamweaver are you running? Can you attach a screenshot where it says that the URI to the dtd is optional?
Following up, I see you pulled the "optional" recommendation from the about.com page you linked, and not Dreamweaver (I misread that). Regardless, from my knowledge this is incorrect - and as I mention above, I'd love to see where W3.org says otherwise - It would be a benefit for me to know.

The reality is, when HTML4 existed, doctypes weren't even used -people would open their HTMl4 document with <html> - the doctypes only came about later on. The only current doctype I know of that doesn't require a "dtd" as part of its declaration is the HTML5, however as you'll see on this page it is listed as "NOT a standard yet": http://www.w3.org/QA/2002/04/valid-dtd-list.html 

Author

Commented:
we used dramweaver 6 - very old copy. I do not think it says it is optional but rather create the document it without the DTD reference. If you have the newer 11.5 version you can try creating a document and see if does the same.

I had a lot of webpages also that start  with <HTML>. i think they call that the quirky method and brwosers can interpret the page differently. it is not recommended i think.

I did not realize HTML 5.0 is not a standard yet. I thought the whole industry and web development was moving that way as it replaces a lot of teh AJAX functionality and much more robust that HTML 4.01. It sems were are still 2 years away from that.
>> i think they call that the quirky method and brwosers can interpret the page differently. it is not recommended i think.

Depending on the browser and version, not declaring a doctype (or declaring one improperly) will indeed put the browser in "Quirks Mode" - not a good thing at all, lots of good reading on Google about it's impact.

>> I did not realize HTML 5.0 is not a standard yet... It sems were are still 2 years away from that.

There are simply too many factors left to address. For example - there is no standard video [encoding] format to be used with the <video> tag because each browser (and company that develops them) has its own preference (either for proprietary, licensing, or other reasons) - you can see a browser support/compatibility table here: http://en.wikipedia.org/wiki/HTML5_video#Browser_support to give you an idea of this challenge, being one of many.