DOCTYPE Causing Problems

[peterinwa]

I have been building websites for over a decade, and being home-learned I haven't always done things "by the book."

Concerned because a particular page element looked so different in IE vs. FF, I finally added a DOCTYPE.

I chose HTML 4.01 Transitional, and pass the validation test. (After lots of edits!)

Now I am seeing a difference in this same page element with IE when I look at the page on-line vs. on my hard drive. That doesn't seem possible to me!

But when I remove the DOCTYPE, the page then looks the same on-line vs. on my hard drive.

I didn't really know where to post this. This rule fails looking at the page on my hard drive, but looks fine if I FTP it onto the web:

<hr width='50%' style='height:4px;color:#A84D10;margin:0'>

Does the code look okay? And how could it look different when viewed on-line vs. from my hard drive?

Thanks,

Peter

[Marshall]

I have to admit I have not recently read about colorizing the <hr /> element, but there was always a cross-browser trick that worked:

<hr style="height: 0; width: 50%; margin: 0; border-bottom: 4px; border-color: #A84D10;" />

Marshall

[peterinwa]

Thanks Marshall, but when I went looking at that code it was so complex I just avoided the issue and used Photoshop to make a rule. Below is the text for the page.

The question I need answered is why does all the spacing between the picture (it's a slide show) and the caption, rule and Back/Close/Next links below the picture vary depending on whether I'm looking at the page from my hard drive vs. FTPed to the web.

And why do they look the same if I remove the DOCTYPE.

Peter

c="<table cellpadding=0 cellspacing=0 width=700 border=0>";
c+="<tr><td height=10><\/td><\/tr>";

// Picture
c+="<tr><td align=center width='100%'><img src='photos_2011/"+window.name+"_480.jpg' height=480 name='picture' class='ib'>";
document.write(c);
</script>

<!-- Caption -->
<p><form name=f1 style='margin:0'><input type=text name=f1text value=' ' size=100 class='Captions' border=1></form>

<!-- Rule -->
<p><img src='graphics/rule_350x2.png' height=2>

<!-- Links -->
<p class='Links'><a href='javascript:moveBack()'>Back</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href='javascript:window.close()'>Close</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href='javascript:moveNext()'>Next</a></td></tr></table>

[lucy24]

Ooh, ooh, I know the hr color thing. One browser uses the "background-color" and all other browsers use the "color", but an hr is only one color, so to make it come out right you set the same color for both. This will get you a warning (not an error) from the CSS validator, but you are allowed to ignore it.

If you take out the DTD everything goes into "quirks" mode which means "display whatever you feel like displaying". This may work as intended on your own personal browser, but I can guarantee it will come out even less predictable with other people's browsers.

Make sure your CSS explicitly says both of these things about the generic hr:

alignment (called "text-align" just to confuse you): left, right or center
all margins: left and right are both "auto" if centered, else "auto" for one side and 0-- or some specific quantity-- for the other

You need to intercept any ideas the browser might have about doing things its own way.

Now then...

Always, always put your attributes in quotation marks. Single or double, so long as you're consistent.

<td align=center width='100%'>
This is legal in HTML 4.01 but I don't advise it. Put all your td alignments in the css. Pick a default (left/center/right and top/middle/bottom respectively) and then make classes for all the others.

"width = '100%'" is superfluous for a table cell, because it hasn't got any choice ;)

:: setting aside the issue of whether you really need a table if it's only one cell wide ::

If your width is something other than 100% --that, is of course, if you've got more than one cell to a row! --express it as a style. I don't know why, but it seems to be more "assertive" that way. Inline styles are tougher than CSS styles which are tougher than HTML declarations. And the CSS can use different units; the HTML only works with percentages.

<td height=10>
Won't work. You have to put it in the CSS-- or, if it's a one-off, make an inline style-- and specify what unit you're talking about.

Bookmark this page:

[w3.org...]

Edit:
Awwwwk! Get rid of that &nbsp; stuff right now! The occasional &nbsp; can be a great alternative to "white-space: nowrap" when tables refuse to behave, but don't use them for formating.

[peterinwa]

Thanks for all the tips. I will certainly pay attention to them.

However, I fear thay my sharing my code has distracted everyone from my primary question.

How is it that putting a DOCTYPE in my page is causing the display of the page to be different (in IE) when the source is my hard drive vs. the web?

But if I remove the DOCTYPE, the page looks the same from my hard drive or the web?

In a decade of building websites I have never seen the page change when I FTPed it to the web.

Peter

[lucy24]

How is it that putting a DOCTYPE in my page is causing the display of the page to be different (in IE) when the source is my hard drive vs. the web?

:: detour to Search, because this identical question has been asked before but I'm ### if I can remember the definitive answer ::

From newest to oldest, each one addresses part of the question:
January 2012 [webmasterworld.com]
October 2011 [webmasterworld.com]
June 2011 [webmasterworld.com]
May 2004 [webmasterworld.com]

[peterinwa]

Thanks!

I also have an update.

I found some difference in IE and FF, and when I resolved what was causing that things got better.

Now there is only a very slight difference in looking at the page on the web vs. on my hard drive.

Thanks for the help. I'll check out those posts.

Peter

[rocknbil]

The "difference" may be due to caching. That is, when you visit a web page, it will cache a copy of the page on your computer, giving the impression of faster browsing. If the browser doesn't recognize it's been changed, it won't reflect the change.

I've given up on styling <hr>. :-) I use a div with a border-bottom instead if it needs to be styled (I know, like using tables for layout . . . but the hr is such a visual only element, I've got bigger battles to fight.)

A FYI, This is XHTML markup

<hr />

And since you've chosen HTML 4, HTML markup

<hr>

will make an easier transition to HTML 5, when you are ready.