Viewing page in different text sizes... [Archive]

Click to See Complete Forum and Search --> : Viewing page in different text sizes...

mike444

02-17-2003, 11:21 AM

causes the text on my page to loose its format. Is there a quick fix to keep text in place when viewing in different text sizes? Is it my ie browser or my code?

Charles

02-17-2003, 11:26 AM

Originally posted by mike444
Is it my ie browser or my code? It's your mark up and it's the way you are thinking about your page. The content on your page should be free to move about as it sees fit. Do not use tables for layout, instead use CSS but don't be such a control freak. Some of us need big fonts and some of us prefer small fonts.

mike444

02-17-2003, 02:20 PM

Originally posted by Charles
It's your mark up and it's the way you are thinking about your page. The content on your page should be free to move about as it sees fit. Do not use tables for layout, instead use CSS but don't be such a control freak. Some of us need big fonts and some of us prefer small fonts.

Yes, but what if the text is unreadable in different text sizes?

Stefan

02-20-2003, 04:43 AM

Originally posted by mike444
Yes, but what if the text is unreadable in different text sizes?

What do you mean?

mike444

02-20-2003, 02:27 PM

Originally posted by Stefan
What do you mean?

Well, I did my page in the browsers medium text size. Everything looked fine. When I would change my browsers text size words would move, jump lines and be completely removed from being identified as a part of the original sentence or paragraph they were originally a part of. Sentences and paragraphs became completely unreadable. (This was the browser adjusting to different text sizes, as charles said, but paragraphs and sentences were not maintaining their original format.)

I have since fixed it but I did not remove tables as charles advised-- hope this doesn't come back to haunt me-- but I left everything except the title and top line in tables and added <PRE></PRE> to all text. (A magical little tag, if I say so myself.) This seems to have nailed everything in place real good except the inside vertical border seperating the two table data in the center table. When in medium text view it's dead center but it adjusts itself right or left depending on what other text sizes I view the page in. It may be my <TD> WIDTH or HEIGHT values are out of whack. As a newbie, these numbers confuse me. The outside borders of all the tables conform perfectly in all text sizes with the page so I'm :cool: . Thanks for askin'

nkaisare

02-20-2003, 02:56 PM

Not a good idea to use <pre>

Basically, if you have a paragraph, it ought to go completely within . To get a specific layout, if you use tables/css and split that paragraph for "nice display", it wont remain as good on a different computer.

If you can give us the link, maybe we could suggest something.

Also, try to drop tables and use CSS for positioning. It may seem more difficult as we are used to thinking in terms of tables due to its widespread use on the net.

mike444

02-20-2003, 03:47 PM

Originally posted by nkaisare
Not a good idea to use <pre>

Basically, if you have a paragraph, it ought to go completely within . To get a specific layout, if you use tables/css and split that paragraph for "nice display", it wont remain as good on a different computer.

If you can give us the link, maybe we could suggest something.

Also, try to drop tables and use CSS for positioning. It may seem more difficult as we are used to thinking in terms of tables due to its widespread use on the net.

I didn't split a paragraph, afaik. Should I still worry about it? Are they phasing out tables or something?

The page doesn't have a link. (It's not published yet.) But the code isn't that long so, if you want, you can throw it in note pad to see for yourself. I'll reveal the code (and my inexperience) but I don't want to share the idea of the site just yet so I replaced the appropriate text with filler text (annoying blah blah's. sorry.) Let's see if this works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<style type="text/css">
</style>
<TITLE>sometex.com</TITLE>
</HEAD>
<BODY BGCOLOR="#000000"><PRE>e<A HREF="linkaddress" ID="PUM">NAMEBLA.COM</A> some e more blahbla blahbla ba a textbla</PRE>
<TABLE BORDER=1 WIDTH=159% HEIGHT=30 CELLPADDING=2><TR><TD ALIGN="CENTER"><A HREF="linkaddress">MORE A TEXT BLA</A>    <TD ALIGN="center"><A HREF="LINKADDRESS">SOMEBLA AN TEXTBLA BLA</A>
    <TD ALIGN="CENTER"><A HREF="LINKADDRESS">ACCESS ACCOUNT</A></TD></TR></TABLE>
<TABLE BORDER=1 WIDTH=763><TR><TD WIDTH=320 VALIGN="TOP"> LEARN  ABOUT BLAH BLAH:
 <A HREF="LINKADDRESS">WHAT IS A BLAH BLA?</A> <A HREF="LINKADDRESS">TEXTLINKBA</A> <A HREF="LINKADDRESS">TEXTLINK</A>
 
<A HREF="LINKADDRESS">TEXTLINKBLA</A>
 
 <A HREF="LINKADDRESS">PRICING & FEES</A>
 <A HREF="LINKADDRESS">GUARANTEE</A>
 <A HREF="LINKADDRESS">FAQ</A></TD><TD WIDTH=190 ALIGN="RIGHT" VALIGN="TOP">                              ~ANNOUNCEMENT~
 <PRE>   2/30/03 - sometext.blah texttext bla
    service for online textbla users.
    Bla text a text bla to blabla on
    your Textbla, Texttext or Textbla
    Textblah list. Bla text text is ba
    textba textblah It's blaha, text,
    bla tex! Simply textba a blah bla,
    enter the sometextbla e-mail
    textbla, and blabla blah!
    <A HREF="LINKADDRESS">SOME a text bla now</A> or <A HREF="LINKADDRESS">Learn more.</B</A></PRE></TD></TR></TABLE>
<TABLE BORDER=1 WIDTH=159% HEIGHT=20 CELLPADDING=2>
<TR>
<TD ALIGN="center"><A HREF="LINKADDRESS">HOME</A>
<TD ALIGN="center"><A HREF="link address">ABOUT US</A>
<TD ALIGN="center"><A HREF="link address">TERMS & CONDITIONS</A>
<TD ALIGN="center"><A HREF="link address">PRIVACY POLICY</A>
<TD ALIGN="center"><A HREF="EMAILADDRESS">CONTACT</A>
</TR>
</TABLE>
<TABLE BORDER=0 WIDTH=160% HEIGHT=3><TR><TD><H2 ALIGN="CENTER">Copyright - 2003 textbla.com</H2></PRE></TD></TR>
</TABLE>
</BODY>

Charles

02-20-2003, 03:59 PM

Originally posted by mike444
Are they phasing out tables or something? From the HTML 4.0 Specification that came out 24 April 1998
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

mike444

02-20-2003, 04:10 PM

spufi

02-20-2003, 07:24 PM

Ok, this is just a quick look through the code and probably not even all of it.

Up the HTML version to 4.01 Strict and validate against that. I saw a number of tags that didn't have closing tags and they should have.

Get rid of the <pre> tag stuff.

Get rid of all of the font tag stuff. You have a number of tags that include and tags inside of the tags when you could use CSS and just use a tag with a class defined in it.

Orange isn't an official color. Use the #000000 format for colors and not names.

"pt" and "in" are not recommended values for sizes. "px," or using % values works much better.

mike444

02-20-2003, 08:07 PM

Originally posted by spufi
Ok, this is just a quick look through the code and probably not even all of it.

Up the HTML version to 4.01 Strict and validate against that. I saw a number of tags that didn't have closing tags and they should have.

Get rid of the <pre> tag stuff.

Get rid of all of the font tag stuff. You have a number of tags that include and tags inside of the tags when you could use CSS and just use a tag with a class defined in it.

Orange isn't an official color. Use the #000000 format for colors and not names.

"pt" and "in" are not recommended values for sizes. "px," or using % values works much better.

Thank you. I'm not sure where to begin but I'm guessing that when you write "Up the HTML version to 4.01 Strict ..." you mean change the word "Transitional" in the DTD code to the word "Strict"? Right?

"Get rid of the <pre> tag stuff."

And replace it with ?

"Orange isn't an official color. Use the #000000 format for colors and not names."

Even within mouse over codes?

One other thing I'm not clear on:
If I follow your suggestions can I keep the tables in or were your suggestions given with the caveat that tables would be removed in order to implement your suggestions?

spufi

02-20-2003, 11:56 PM

Yes, try to validate your page against HTML 4.01 Strict. My signature has a link to Doctypes.

<pre> tags are deprecated and you should use other tags to create the same look. tags are one way to do it, but you can use <div> and header tags too.

Orange isn't an official color period.

One shouldn't use tables for layout. I started to do my take on your code, but it got late and it's better for you to be the one to weed through your code anyway. I might keep working on it as a challenge to myself.

Anyway, link below is for the CSS Specs. I would suggest you spend some time weeding through it to get a better understanding of what you can do in CSS and see just how you can change your code around.

http://www.w3.org/TR/REC-CSS2/

mike444

02-21-2003, 07:18 AM

Originally posted by spufi
Yes, try to validate your page against HTML 4.01 Strict. My signature has a link to Doctypes.

<pre> tags are deprecated and you should use other tags to create the same look. tags are one way to do it, but you can use <div> and header tags too.

Orange isn't an official color period.

One shouldn't use tables for layout. I started to do my take on your code, but it got late and it's better for you to be the one to weed through your code anyway. I might keep working on it as a challenge to myself.

Anyway, link below is for the CSS Specs. I would suggest you spend some time weeding through it to get a better understanding of what you can do in CSS and see just how you can change your code around.

http://www.w3.org/TR/REC-CSS2/

Thanks, spufi. I think I now understand how I have been abusing tables to CONTROL the page layout. It seems so amatuerish and useless a habit now that you and charles have alerted me to it. (But hey, I AM an amatuer! :D )

I took a peek at both links you recommended and will definately read through both entirely, but on the CSS Specs page, I noticed a chapter on...TABLES. Does that outline a PROPER way to use tables with CSS or are you and charles suggesting I abandon the use of tables on my web pages altogether?

DaveSW

02-21-2003, 07:41 AM

On somewhere about line 18 why have you got a 159% width? Should the % sign not be there? % being out of 100 and all that...

mike444

02-21-2003, 08:24 AM

Originally posted by DaveSW
On somewhere about line 18 why have you got a 159% width? Should the % sign not be there? % being out of 100 and all that...

Someone on this forum told me to use a percent sign so the layout could adjust to different screen sizes. So percent it was.:)

As for the 159%: This is the first website I ever designed so I'm just sticking in any values that will make the page look "right" to me-- slowing realizing, of course, that what looks "right" to me won't necessarily look "right" to someone else or be html correct or even mathematically correct, for that matter. :) Table values puzzle me right now for some reason (probably because there's so much else to think about) but I'm learning.

Charles

02-21-2003, 08:27 AM

Originally posted by mike444
Does that outline a PROPER way to use tables with CSS or are you and charles suggesting I abandon the use of tables on my web pages altogether?The TABLE element is a wonderful and necessary way to mark up tables. And by tables I mean columns and rows of data demonstrating the relationships between each datum. Tables have headings, and often have several levels and dimensions of headings. That's why it's so wrong to use them for layout. Some non-graphical browsers will present with each data cell with what the browser takes to be the headings. The section on tables in the HTML 4.01 Spec. will explain how to properly use the TH element and the "abbr", "axis", "headers" and "scope" attributes to make your tables work.

Robert Wellock

02-21-2003, 08:30 AM

CSS Color Orange is not official named colour keyword, at the moment, however, the W3C are trying to change that: http://www.w3.org/TR/CSS21/syndata.html#color-units

For whatever strange artistic reasons :D but is normally it is best to use Hexadecimal or RGB notations for colours used on a website.

mike444

02-21-2003, 09:04 AM

Originally posted by Charles
The TABLE element is a wonderful and necessary way to mark up tables. And by tables I mean columns and rows of data demonstrating the relationships between each datum. Tables have headings, and often have several levels and dimensions of headings. That's why it's so wrong to use them for layout. Some non-graphical browsers will present with each data cell with what the browser takes to be the headings. The section on tables in the HTML 4.01 Spec. will explain how to properly use the TH element and the "abbr", "axis", "headers" and "scope" attributes to make your tables work.

Excellent description, charles. Something clicked. But sadly, I'm afraid my page design (appearance), which I like, may fall by the wayside. I understand now why using tables for text or paragraph layout is a big no-no but what if, for instance, someone likes the "appearance" of their text within a table? Is there anyway to preserve the appearance or "look"
of that design without abusing tables? Can the "illusion" of a table based layout be created without actually using or abusing tables and without using a template? I suppose architects will say that is a case of form not following function but I just don't like the way my text looks "out in the cold of space". It should have a box, be "indoors".

mike444

02-21-2003, 09:42 AM

Originally posted by DaveSW
On somewhere about line 18 why have you got a 159% width? Should the % sign not be there? % being out of 100 and all that...

I just reset the two table data widths of the center table to 50% each. This has had the effect of keeping the previously unruly (no pun intended) vertical border between the two rows centered except in my browsers largest text view. Of course, I know the tables will probably still have to be removed in the end.:(

jdavia

02-21-2003, 10:15 AM

I understand now
why using tables for text or paragraph layout is a big no-no but what if, for
instance, someone likes the "appearance" of their text within a table? Is there
anyway to preserve the appearance or "look"
of that design without abusing tables?
Originally posted by mike444
I just reset the two table data widths of the center table to 50% each. This has had the effect of keeping the previously unruly (no pun intended) vertical border between the two rows centered except in my browsers largest text view. Of course, I know the tables will probably still have to be removed in the end.:(
Don't be confused. There is no reason to stop using tables. Many large sites still use them. You just need to remember IE is very forgiving, but other browsers may not be. Netscape is very fussy about tables. If you remember to not use more than 100%, have closing tag for every open one , especially the closing table tag (</table>) for a table in a table. They should turn out OK.

Now there are still browsers out there that are not compatible 100% to Style sheets. So tables are not out and never will be. So if you want to use them there should be np problem.
I might catch hell for this but the </tr> or <td> tags can actually be left out in your code and the table will still format right even in Netscape.
Why? Because when a new <td> tag is open, the Browser knows to close the previous </tr> one,ect.

<table>
<tr>
<td align="center">
R1C1
<td align="center">
R1C2
<tr>
<td align="center">
R2C1
<td align="center">
R2C2
</td>
</tr>
</table>

meow

02-21-2003, 10:26 AM

<pre> tags are deprecated

Oh wow! When did that happen? And replacing font with span - is that this Semantic Web I've heard so much about? :D

spufi

02-21-2003, 10:43 AM

Originally posted by jdavia
Don't be confused. There is no reason to stop using tables. Many large sites still use them. You just need to remember IE is very forgiving, but other browsers may not be. Netscape is very fussy about tables. If you remember to not use more than 100%, have closing tag for every open one , especially the closing table tag (</table>) for a table in a table. They should turn out OK.

Now there are still browsers out there that are not compatible 100% to Style sheets. So tables are not out and never will be. So if you want to use them there should be np problem.
I might catch hell for this but the </tr> or <td> tags can actually be left out in your code and the table will still format right even in Netscape.
Why? Because when a new <td> tag is open, the Browser knows to close the previous </tr> one,ect.

<table>
<tr>
<td align="center">
R1C1
<td align="center">
R1C2
<tr>
<td align="center">
R2C1
<td align="center">
R2C2
</td>
</tr>
</table>

Um yeah, way to teach people how to code something that doesn't validate.

"The <pre> element, short for preformatted, is a deprecated element in HTML 4.01.....You should use style sheets now in preference to this element." - HTML 4.01 Programmer's Reference page 89.

meow

02-21-2003, 10:53 AM

I don't know what "HTML 4.01 Programmer's Reference" is but obviously it's more well-informed than the w3c. :D

jdavia

02-21-2003, 10:53 AM

Originally posted by spufi
Um yeah, way to teach people how to code something that doesn't validate.

But ending tags are allowed to be ommited in HTML 4.0 But we prefer to be safe and use them, just like the (") in <"#ffffff"> (< #ffffff >)

spufi

02-21-2003, 11:28 AM

And when did HTML 4.0 get replaced by 4.01? About five years ago. You are teaching people to code in a way that has not been recomended for some time. I would rather play it "safe" and code correctly than have some browser decide what it thinks I meant.

meow

02-21-2003, 11:51 AM

:eek: But spufi, the same end tags are optional in HTML 4.01 too. Maybe you should actually read the spec, not just use it a a bat?

spufi

02-21-2003, 12:17 PM

Fine, XHTML was recommended just over three years ago. :)

jdavia

02-21-2003, 02:01 PM

Originally posted by spufi
And when did HTML 4.0 get replaced by 4.01? About five years ago. You are teaching people to code in a way that has not been recomended for some time.
I am only reminding them that the code is not dead for that period of timeand that some code is really not necessary.
Think of the amount and type of code you get from these WYSIWYG editors in contrast to coding by hand.
First of all I don't think we can class ourselves as teachers. I think we are helpers, in that we can guide, explain, show, discuss, debate, even argue on how solve a problem. There are many ways to come to the same end. But leading one to believe he shouldn't use tables, or he should use a form of code that he is not ready for, is wrong to me.
I look at the code to solve the particular question. What ever style or method was used for the rest is not my concern. That was not in the question. If asked, I will answer it.

mike444

02-21-2003, 03:13 PM

Originally posted by jdavia
I am only reminding them that the code is not dead for that period of timeand that some code is really not necessary.
Think of the amount and type of code you get from these WYSIWYG editors in contrast to coding by hand.
First of all I don't think we can class ourselves as teachers. I think we are helpers, in that we can guide, explain, show, discuss, debate, even argue on how solve a problem. There are many ways to come to the same end. But leading one to believe he shouldn't use tables, or he should use a form of code that he is not ready for, is wrong to me.
I look at the code to solve the particular question. What ever style or method was used for the rest is not my concern. That was not in the question. If asked, I will answer it.

jdavia, I appreciate your effort to help me preserve my original design but that might be presuming I know what I'm doing. Through-out this thread I've mentioned I was a newbie and building my first website so any guidance no matter how off-topic and no matter how much it screws up my design is okay by me. The function and usability of the site as well as conforming to the latest and most widely used specs (whatever they are) comes first. But your intentions and suggestions are appreciated.

In accordance with the majority of suggestions I have removed the center table (the rest will follow), inserted the CSS Strict doctype code at the top of my code and placed tags around the most problematic text. I realize I probably have a lot of missing tags and CSS code to place and others to rearrange but so far the text is almost as out of control as it was before I used tables and before I even knew what CSS was. (My no underlined link code was cancelled out too). So it's almost back to square one for me. I keep pluggin' away at it but any further suggestions and tips anyone wants to add here and there, in addition to the tutorials I'm slowly absorbing, will keep me clear of time consuming stumbling blocks.

nkaisare

02-21-2003, 04:29 PM

You may want to use something like this

<div id="header">

</div>

<div id="left" style="float: left; width: 20%">

</div>

<div id="main" style="margin-left: 20%">

</div>

<div id="footer" style="clear:both">

</div>

Explanation:
The <div> tag creates a division in page. Example, the "header" is a division in page where you put in your header information. You may use CSS to display it in a way you like (background color, width, border, etc).

Next you want the links to the left hand side of the page. This is done by creating a div "left" that has a width 20% of browser window. It floats in the page to the left.

Next is the div "main" that will contain the page contents. Since the previous div ("left") is floating to the left, this div ("main") will appear to its right.

Now, "main" can be larger than "left" in height. If that happens, the remaining text of "main" will continue below "left" (in ex below, L stands for "left" text, M "main" text)

LLLL MMMMMMMMMM
LLLL MMMMMMMMMM
LLLL MMMMMMMMMM
MMMMMMMMMMMMMMM
MMMMMMMMMMMMMMM

If you do not want Ms to flow below the Ls, you will use "margin-left: 20%". Thus, we have left margin of 20% for "main" and 20% wide "left" floating to its left. Hence it gives the column-like look.

Finally, we have "footer". Note that we have used style="clear:both". This means that the floating will be cleared and the footer will appear below "left" and "main" contents. If this is missing, "footer" will appear below "main" (which is OK if "main" is longer, but not OK if "left" is longer)

Hope this is clear. You judge for yourself which is better, using tables with so many <tr> and <td> elements or using CSS.

Cheers
Niket

nkaisare

02-21-2003, 04:33 PM

And yes, you do not need to have inline styles as shown above. You can remove all the style attributes from all the divs, and put them all in <head> or use external style sheet. Eg:
div#main { margin-left: 20% }
div#left { float: left; width: 20% }
div#footer { clear: both }

Now, if tomorrow, you decide you'd rather have the left links to the right, you no longer need to redo the entire table. Instead, just change the above CSS styles to
div#main { margin-right: 20% }
div#left { float: right; width: 20% }
div#footer { clear: both }

jdavia

02-21-2003, 04:39 PM

Originally posted by mike444
jdavia, I appreciate your effort to help me preserve my original design but that might be presuming I know what I'm doing. Through-out this thread I've mentioned I was a newbie and building my first website so any guidance no matter how off-topic and no matter how much it screws up my design is okay by me.
But in the mean time it is not working. You only needed to change the 159% to 100% in two places, to get it to view as you intended it to in IE and NS4.7. Even a newbe can find and replace that.

Then when you can learn as much as everyone is telling you, you can change it for as you say, The
latest and most widely used specs (whatever they are).

mike444

02-21-2003, 05:08 PM

Originally posted by jdavia
But in the mean time it is not working. You only needed to change the 159% to 100% in two places, to get it to view as you intended it to in IE and NS4.7. Even a newbe can find and replace that.

And that I did. It worked great too. Thanks for mentioning it. :cool: I have a back-up copy if I ever want to revert back to the tables design, btw.

But if I leave it with my outdated code how will it look to everybody else when I publish it on the web? It's going to be an e-commerce site and it should be made to be viewable by the largest audience possible before launching, right?.

jdavia

02-21-2003, 05:36 PM

But if I leave it with my outdated code how will it look to everybody else when I
publish it on the web? It's going to be an e-commerce site and it should be
made to be viewable by the largest audience possible before launching, right?.

I said change 100% in two places. Sorry the page needed more than that done to it.
Here is the complete code as you did it but with my changes. If it is good for IE and NS4.7 Why not.

<BODY BGCOLOR="#000000">

<TABLE BORDER=1 WIDTH=100% HEIGHT=30 CELLPADDING=5>
<tr>
<td align="center">

<STYLE="font-size: 28pt">e<A
HREF="linkaddress" ID="PUM">NAMEBLA.COM</A> some e more blahbla blahbla ba a
textbla
</TD></TR></TABLE>

<TABLE BORDER=1 WIDTH=100% HEIGHT=30 CELLPADDING=5><TR><TD
ALIGN="center"><A HREF="linkaddress">MORE A TEXT BLA</A> <TD ALIGN="center"><A
HREF="LINKADDRESS">SOMEBLA AN
TEXTBLA BLA</A>
<TD ALIGN="default"><A HREF="LINKADDRESS">ACCESS ACCOUNT</A></TD></TR></TABLE>

<TABLE BORDER=1 WIDTH=100%><TR><TD WIDTH=220
VALIGN="TOP"> LEARN ABOUT BLAH BLAH:
 <A HREF="LINKADDRESS">WHAT IS A BLAH BLA?</A> <A
HREF="LINKADDRESS">TEXTLINKBA</A> <A
HREF="LINKADDRESS">TEXTLINK</A>
 
<A HREF="LINKADDRESS">TEXTLINKBLA</A>
 
 <A HREF="LINKADDRESS">PRICING & FEES</A>
 <A HREF="LINKADDRESS">GUARANTEE</A>
 <A HREF="LINKADDRESS">FAQ</A></TD><TD WIDTH=290

ALIGN="default" VALIGN="TOP"> ~ANNOUNCEMENT~
 2/30/03 -
sometext.blah texttext bla
 service for online textbla
users.
 Bla text a text bla to blabla
on
 your Textbla, Texttext or
Textbla
 Textblah list. Bla text text is
ba
 textba textblah It's blaha,
text,
 bla tex! Simply textba a blah
bla,
 enter the sometextbla
e-mail
 textbla, and blabla
blah!
 <A HREF="LINKADDRESS">SOME a text bla now</A> or <A
HREF="LINKADDRESS">Learn
more.</B</A></PRE></TD></TR></TABLE>

<TABLE BORDER=1 WIDTH=100% HEIGHT=20 CELLPADDING=5>
<TR>
<TD ALIGN="default"><A HREF="LINKADDRESS">HOME</A>
<TD ALIGN="center"><A HREF="link address">ABOUT US</A>
<TD ALIGN="center"><A HREF="link address">TERMS & CONDITIONS</A>
<TD ALIGN="center"><A HREF="link address">PRIVACY POLICY</A>
<TD ALIGN="center"><A HREF="EMAILADDRESS">CONTACT</A>
</TR>
</TABLE>
<TABLE BORDER=0 WIDTH=100% HEIGHT=3><TR><TD><H2
ALIGN="CENTER">Copyright - 2003
textbla.com</H2></PRE></TD></TR>
</TABLE>
</BODY>
</HTML>

mike444

02-21-2003, 06:45 PM

jdavia,

I copied the code with your changes, pasted it into notepad without changing anything and viewed it in IE. I'm assuming if your theory? is correct the page should look okay in my browser without me having to change anything. It doesn't. The tables don't span 100% of the page but only about 75%.

Frankly, I wish I could keep tables but I'm starting to believe they screw up everything once in someone else's browser and especially when used for layout. If I'm not understanding you correctly or if you catch any errors in my implementation, by all means call my attention to it-- I am just a newbie and it's possible I'm missing something-- but, I'm sure you'll understand, my first concern is to get the pages I'm making to work properly and to reproduce a page design (whatever it may ultimately turn out to be) as closely as possible in as many different browsers and screen sizes as possible-- not force a design that only a minority of browsers will see correctly.

The design is important but I'm willing to sacrifice some of my design if, when it comes to other people's browsers and screen sizes, I can "just fit in". :D

nkaisare

02-22-2003, 03:41 PM

You may want to use CSS instead of tag. is deprecated in HTML 4.01.

For example, you can replace all your with CSS. CSS allows you to specify font size in absolute or relative units.
eg.

p { color: #fff; font-size: 10pt } /* OR */
p { color: #fff; font-size: 13px } /* OR */
p { color: #fff; font-size: 125% }

Similarly, all your bottom links may be given particular style using

tr.footer td a:link { color: #fff; font-size: 100%;
font-weight: bold; font-decoration: none}
tr.footer td { text-align: center }

This means that all the text in <td> that lies in the row <tr class="footer"> will be center aligned. And, all the corresponding links will be displayed as bold, without underline.

The footer links will be

<tr class="footer">
<td><a href="linkaddress">ABOUT US</a></td>
<td><a href="linkaddress">TERMS & CONDITIONS</a></td>
<td><a href="linkaddress">PRIVACY POLICY</a></td>
<td><a href="mailto:EMAIL">CONTACT</a></td>
</tr>

Often, if there isn't enough content in a table, browsers ignore width attribute of <td>. Width attribute may also be ignored if an image or a long text (such as a URL) is wider than the specified width.

jdavia

02-22-2003, 10:18 PM

I don't know what you have on your end. Your page does view as expected in the Browsers I have. I even changed my screen resolution, they still view the same.
Now first off, you cannot control the settings of other people's computers, only your own. They might have their font sizes largeer, or smaller, the wrong resolution for their screen size. If you remember I said to center the tables. This way if for what ever reason they don't fill the scree size, at least being centered, a space on either side works out fine.

Are you changing your resolution to see your page?
Is all your settings for Windows the "Default"?
I suggest you ask around for others to see if the page fills their screen with no Horizontal scroll.
It might be settings on your end

jdavia

02-22-2003, 10:34 PM

OK Make this simple change in two places. Being that the tables are in "percent" the columns ought to be percent too, instead of pixels. I think this should make you and me happy.

<TABLE BORDER=1 WIDTH=100%><TR>
<TD WIDTH= "40%" VALIGN="TOP"> LEARN ~ANNOUNCEMENT~

OH! If you were changing your resolution, You might have to use reload the page to see it with the changes

mike444

02-22-2003, 11:38 PM

Originally posted by jdavia
I don't know what you have on your end. Your page does view as expected in the Browsers I have. I even changed my screen resolution, they still view the same.
Now first off, you cannot control the settings of other people's computers, only your own. They might have their font sizes largeer, or smaller, the wrong resolution for their screen size. If you remember I said to center the tables. This way if for what ever reason they don't fill the scree size, at least being centered, a space on either side works out fine.

Are you changing your resolution to see your page?
Is all your settings for Windows the "Default"?
I suggest you ask around for others to see if the page fills their screen with no Horizontal scroll.
It might be settings on your end

jdavia, I haven't gotten to centering tables (though I will and the tables are staying centered when they like the width % anyway) or checking different screen resolutions. If you've seen my latest thread, I've been wrestling with a table width problem. It seems my browser doesn't like this DTD code:

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

The exact same mark-up headed with the above DTD on my sisters computer looks just fine but when I view it in my broswer, if tables are at 100% width, they only span about 75% of the page. Take out the DTD and the tables span the entire 100% of the page. (So that's good news. Now if I can just get the tables to behave with the DTD in.) Before I noticed it was the DTD, I had to change the 100% widths you put in back to 159% to get the page to look right. I'm a newbie but I don't think different font size settings and different screen resolutions would cause this discrepency. Page setup, maybe?

It's starting to look better, though. Except in the largest font size view--where only one word at the end of the top line jumps down to the next line-- everything else stays in format. At one time, I also had the vertical border between the two columns of the center table sticking dead center in every font size, but somehow I lost it and it again moves to the left in the two largest font sizes. But that's acceptable.

Thanks for all this time viewing my code and design as well as the expertise your sharing with me. Hopefully I can do the same for you, but then, I doubt I could teach you anything.

You too, nkaisare. I still have a lot to learn about CSS but I copied and pasted the codes you posted and I dabble with them in a seperate folder where I can't hurt anybody.
:D

mike444

02-22-2003, 11:43 PM

Originally posted by jdavia
OK Make this simple change in two places. Being that the tables are in "percent" the columns ought to be percent too, instead of pixels. I think this should make you and me happy.

<TABLE BORDER=1 WIDTH=100%><TR>
<TD WIDTH= "40%" VALIGN="TOP"> LEARN ~ANNOUNCEMENT~

OH! If you were changing your resolution, You might have to use reload the page to see it with the changes

btw, I have the two columns in %'s but one @ 47% and the other @ 53%. I'm sure your values won't work coupled with that DTD riddle in my browser but I'll try them and once I solve the DTD, I'll put them in. thanks.

mike444

02-22-2003, 11:59 PM

jdavia wrote in another thread:

"It is the settings you created on your computer."

Which settings specifically? the Page Set-up in note pad? I've been looking all over.

jdavia

02-23-2003, 11:26 AM

Originally posted by mike444
jdavia wrote in another thread:

"It is the settings you created on your computer."

Which settings specifically? the Page Set-up in note pad? I've been looking all over.
The settings in Properties of the Desktop.
Why don't you compare other web sites on both computers. The problem lies in either the settings as I think, or Versions as suggested by Dave. But not in this heading that you discribe.

mike444

02-23-2003, 12:44 PM

Originally posted by jdavia
The settings in Properties of the Desktop.
Why don't you compare other web sites on both computers. The problem lies in either the settings as I think, or Versions as suggested by Dave. But not in this heading that you discribe.

Remember, I said when I take out this code:

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

the page views the same as on my sister's computer with that code inserted. In Internet Options, there is an Accessibility tab, I click on that and it says "User Style Sheet". Under it is a check box it reads "Format documents using my style sheet".
When I check the box it prompts me to enter my "stlye sheet" (or the address of it, i suppose.) Is my system looking for a CSS script so my browser can view the page properly? Is that it?

jdavia

02-23-2003, 08:07 PM

Originally posted by mike444
Remember, I said when I take out this code:

In Internet Options, there is an Accessibility tab, I click on that and it says "User Style Sheet". Under it is a check box it reads "Format documents using my style sheet".
I remember that about taking out the code, but can't pin a reason for it.

That is an option for how your computer reads things. (No one elses).
Try it and see. You can always set it back without harm. Mine is not set that way.
What version of IE do you have?

mike444

02-23-2003, 09:27 PM

Originally posted by jdavia
What version of IE do you have?

Millenium Edition.

Have you ever had a problem where your adding and saving code to a document in notepad and then suddenly, right after pressing save for like the thousanth time you get an error and IE doesn't let you return to the document? Won't ever let you open it again? (I wonder what I could have put in there that's so "dangerous" to view?) I have two .html's like that in my documents folder and if it weren't for an old version of netscape navigator I would have completely lost the code to both of them. Not looking for any advice on this one just sharing something that scared the hell out of me. You know what it's like to think you've lost all your code in the middle of the night while everyone's sleeping and you can't curse, scream, and throw stuff?

mike444

02-23-2003, 09:44 PM

Originally posted by mike444
.

Have you ever had a problem where your adding and saving code to a document in notepad and then suddenly, right after pressing save for like the thousanth time you get an error and IE doesn't let you return to the document? Won't ever let you open it again?

I know what that was now. That's what happens when one accidently deletes the closing </body> tag out of their document. Good to know!

meow

02-24-2003, 03:39 AM

Sounds like you have IE6 and your sister has an earlier version. It's called Doctype Switching. The DTD you used puts IE6 into Standards rendering Mode. Moz does it too. (and Opera 7).

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

mike444

02-24-2003, 07:40 AM

Originally posted by meow
Sounds like you have IE6 and your sister has an earlier version. It's called Doctype Switching. The DTD you used puts IE6 into Standards rendering Mode. Moz does it too. (and Opera 7).

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

meow,

yes, I have IE6 and my sister may have an earlier version (have to check that). I'm tempted to just remove the DTD I have in my code altogether because when I do, the page formats the same in both mine and my sister's browsers with the exact same code (no alterations in values needed). However, I'm not sure yet what my page will lose (in terms of design and browser compatability) if I remove it. I suppose I can try it and compare.

Stefan

02-24-2003, 07:57 AM

Originally posted by mike444
meow,

yes, I have IE6 and my sister may have an earlier version (have to check that). I'm tempted to just remove the DTD I have in my code altogether because when I do, the page formats the same in both mine and my sister's browsers with the exact same code (no alterations in values needed).

I'm 99.9% certain that your sister is using an older version of IE, becuse removing the DTD makes IE 6 try to mimic old browserbugs.

You should probably make sure the page works well in Netscape 7 and IE 6 first, becuse the number of users of buggy IE 5.x is steadily decreasing, and a next version of IE will very likely have even many more bugs fixed.

Thus, code a theoretically correct page according to the standards is your bes bet for correct display in future browsers, and use version specific workarounds (eg using CSS parsingbugs) to make IE 5.x look & behave as IE6 and NS 7

mike444

02-24-2003, 09:36 AM