Simple HTML request

[transcorpwm]

I would like to know how to publish the following code so it looks consistent with different browsers:

<!--SELECTION--><!--/SELECTION--><TABLE WIDTH="93%" BORDER="0"
CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="38">&nbsp;</TD>
<TD BGCOLOR="#000066" WIDTH="16">&nbsp;</TD>
<TD WIDTH="600" ALIGN="CENTER">&nbsp;</TD>
</TR>
<TR>
<TD BGCOLOR="#000066" WIDTH="38" HEIGHT="16">&nbsp;</TD>
<TD BGCOLOR="#000066" HEIGHT="16" WIDTH="16">&nbsp;</TD>
<TD BGCOLOR="#000066" HEIGHT="16" WIDTH="600">&nbsp;</TD>
</TR>
<TR>
<TD WIDTH="38" BGCOLOR="#ffffff">&nbsp;</TD>
<TD BGCOLOR="#000066" WIDTH="16">&nbsp;</TD>
<TD VALIGN="TOP" ALIGN="CENTER" WIDTH="600">&nbsp;<TABLE WIDTH="600"
BORDER="0" CELLSPACING="0" CELLPADDING="0">

<TR>

[lucy24]

Oh, dear. We've got 1998-vintage html which specifies that

:: pause for business with abacus ::

the combined width of the cells is exactly 654 pixels and the total width of the table is exactly 93% of its container, with further business involving at least one nested table...

Are you already committed to redoing the site, or did you pick one page at random to see if the project is worth what they're paying you?

[transcorpwm]

Safari renders the vertical bar wider than IE. IE renders the horizontal bar wider than Safari.

The widths are specified so why?

[drhowarddrfine]

What doctype are you using. I'll bet you're not using one and IE is in quirks mode. In any case, never, ever trust IE to do anything right.

[lucy24]

:: detour to try out code, which (to my surprise) renders in SEE's html preview even though half the table is missing ::

What are you really trying to do: depict the flag of Iceland* via html? If so, why don't you instead set the table to separate borders with a spacing of 16px, or attach 8px of padding to the appropriate sides of the four (not nine) cells? As it stands, the horizontal layout has created a situation that's impossible for any browser, so it has to take its best guess about which number is most important.


* Or the Shetland islands or something along those lines. Details, details.

[transcorpwm]

I'm a novice webmaster. What I'm trying to accomplish is for my web pages to look consistent, particularly the blue crossbars.

Here's the URL if you want to take a look at it:

[transcorp.com...]

And yes I'm using the ancient Adobe Pagemill 3.0 software! I like to try and make old stuff work like new!

I've also looked around for a crossbar logo that I could call for each page using css but haven't really found what I'm looking for.

[lucy24]

Oh, now wait. Do you want this logo as foreground or background? With that dark color, it wouldn't really work as background. But at the size you've been using in your examples, you're effectively dividing each page into four quadrants.

:: detour for quick look at page before mods delete link ::

Oh, for heaven's sake. Up in the corner like that? Then you do want background.

Throw out the whole table thing and let's start over again. We are now in CSS territory.

The question is whether you want to take advantage of all the new CSS background features, or do something a little cruder that will display as intended on older browsers. Obviously you don't want any browser, of any age, to take it into its head to repeat the crossbars across the page :) And you also don't want any browser, of any age, to either force a page width or abandon the image halfway.

[seoskunk]

I like to try and make old stuff work like new!

I like to pretend my Beetle is a Ferrari.............

In code you always evolve, nested tables are out, css + tables or divs in.

[swa66]

Yep, get rid of the tables.

Use a simple repeating on pixel high image for the vertical bar as the background. Use a header with the same in the other direction to get the horizontal bar and become table free.

Tables are evil nowadays, they should only be used if they contain tabular content. Essentially: if made a word document and you would not make it a table there: do not make it a table in html either.

And never ever trust IE. Develop it in any other browser, without care for how IE mutilates it all. When done in the other browsers, only then fix it for IE (easiest is to use conditional comments and just make it look good for each particular version of IE separately (they each have their own set of bugs)

[lucy24]

easiest is to use conditional comments

Apparently MSIE 10 no longer recognizes conditional comments. I think someone posted a quote last year. Or, er, 2011. I am still waiting for a definitive report on whether this means they have now addressed all those "compliant user-agent" issues that formerly made the CC necessary.

they should only be used if they contain tabular content

I just said something similar in another thread -- w/r/t to the begged question in "tabular data" -- and got stomped on.

if made a word document and you would not make it a table there: do not make it a table in html either

I'll be ###. That's about as decent a definition of "tabular content" as I've yet found. Assuming for the sake of discussion that "word" means "any word processor" and we're not getting into another MS Quirks area ;)

[swa66]

You're right: IE10 doesn't do conditional comments anymore. Need to play more with "that" browser one of these days.
It's scary to loose our best way to get IE in line. And we've been promised far too many times that the most recent version of IE was like all other browsers (not!).

[drhowarddrfine]

And we've been promised far too many times that the most recent version of IE was like all other browsers (not!).

You're wrong. We're always promised the NEXT version of IE will be better than the others! :)

[transcorpwm]

Well anyway, I've been experimenting with Pagemill a little to try and bring some uniformity to the crossbars. Check this out (yes folks, it's framesets!):

[transcorp.com...]

Even though it's framesets I've seen more consistency across a few of the latest browsers than what I had before. I haven't plugged in any significant content, but when i do I plan NOT to use tables.

Thoughts, comments, suggestions...

[lucy24]

Cool. Now all you have to do is find a method that doesn't use frames ;)

For the benefit of those coming along after The Man With The Scissors has done his stuff, this is the page source:

<HTML> 
<HEAD>
 <TITLE>Untitled Document</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER=0 BORDER=0 FRAMESPACING=0 COLS="8%,4%,88%">
<FRAMESET FRAMEBORDER=0 BORDER=0 FRAMESPACING=0 ROWS="7%,6%,87%">
<FRAME NAME="frame265557" NORESIZE>
<FRAME SRC="frame265549.html" NAME="frame265549" NORESIZE>
<FRAME NAME="frame265555" NORESIZE>
</FRAMESET>
<FRAME SRC="frame265546.html" NAME="frame265546" NORESIZE>
<FRAMESET FRAMEBORDER=0 BORDER=0 FRAMESPACING=0 ROWS="7%,6%,87%">
<FRAME NAME="frame265551" NORESIZE>
<FRAME SRC="frame265547.html" NAME="frame265547" NORESIZE>
<FRAME SRC="frame265553.html" NAME="frame265553" NORESIZE>

</FRAMESET>
<NOFRAMES>
<BODY>
Viewing this page requires a browser capable of displaying frames.
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Results are pretty amusing if you open it locally :)

[not2easy]

OMG I popped it in the bbedit quasi browser and got zilch but in ff18 it was scary. I had not tried to view framesets in the past decade.

@transcorpwm - you must avoid using framesets as they are not supported in browsers of this current time period. No one uses Netscape any more, the last person* using it turned off the light as he grumbled into the present.

In the week you have spent trying to use a broken tool you could have learned to create basic pages and use css to create those crossbars. I would also suggest that you try viewing your html pages in different browsers to see what others would see. Maybe a book would help if you can't find a tutorial online that does it for you, but there are many places to learn to create pages with nothing more than a text editor and there are still some free programs to get you started. Pagemill may have been great in its day but it is time to move on.

_{* He gave it up so begrudgingly I am certain he was the last holdout.}

[transcorpwm]

Ok - thanks for the tips.

[lucy24]

Oh, by the way... Glancing again at the frameset version, I note that the horizontal line is fatter than the vertical line. Wasn't that where we came in? :)

<head>
<style type = "text/css">
body, div {padding: 0; margin: 0;}
body {background-image: url("cross.png"); background-repeat: repeat-y; background-position: 38px top;}
div {padding-left: 92px;}

div#headline {background-image: url("cross.png"); background-repeat: repeat-x; background-position: left 38px; padding-top: 92px;}
p {margin: .5em 1em 0 0; line-height: 1.2;}
div#headline p:first-letter {font-size: 300%; line-height: .4}
</style>
</head>

<body>
<div id = "headline">
<p>Quo usque tandem abutere, Catilina, patientia nostra? Quam diu etiam furor iste tuus eludet? Quem ad finem sese effrenata jactabit audacia? Nihilne te nocturnum praesidium Palatii, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora vultusque moverunt. Patere tua consilia non sentis?</p>
</div>

<div>
<p> Constrictam omnium horum scientia teneri conjurationem tuam non vides? Quid proxima, quid superiore nocte egeris, ubi fueris, quos convocaveris, quid consilii ceperis, quem nostrum ignorare arbitraris? O tempora, O mores! senatus haec intellegit, consul videt; hic tamen vivit</p>
</div>
</body>

cross.png is a four-color blue square, 16x16px. Total size on my system, 102 bytes.

[transcorpwm]

Thanks. Which URL are you referring to and what browser are you using to view it?

[swa66]

@transcorpwm: stop worrying about the old crappy ways of getting makeup on. What lucy24 posted above is the "right" way. If there were some debate on details , let it not detract from the basic truth we're trying to preach here: CSS is the only right way to do this. Forget tables, forget framesets.

HTML5 and CSS3: learn them, you'll need it.