[RESOLVED] GoDaddy Web Site Tonight - text size issue

[Whit]

I'm using GoDaddy.com Web Site Tonight.

I created a 5 page site at: www.cipi-brokerage.com

Page 2 is called "Client Projects". It is the only page that has photo images, with a brief text description next to each photo.

I have realized that when a different person views this page 2 , using a different computer, with a different web browser, with different text size settings..... then the relationship between the photo images and the text can get changed (distorted) greatly.

I need the text size NOT to change on this page, regardless of what kind of computer, or web browser, text size settings, etc.... any other viewer out there might be using.

How can I do this?

Regards.

Whit

[JPnyc]

Hard code the font size in CSS using px. That'll stop most browsers from changing it.

[_Aerospace_Eng_]

Hard code the font size in CSS using px. That'll stop most browsers from changing it.

It only stops IE/Win (not sure about IE Mac) from changing it. Every other modern browser allows the user to change the text size even if set in pixels.

[Whit]

OK. I will try. How do I do this? Hard code the font size in CSS using px? What does this mean? Can I learn this?

Thank you for your time.

Whit

[JPnyc]

Check out www.w3schools.com. They have a pretty easy to understand CSS reference.

[Whit]

I went to W3Schools. Baffling. GoDaddy Web Site Tonight uses "What You See Is What You Get" technology. I didn't need to know how to program in HTML to build my 5 page site to this point. There is a way to open up the HTML and make changes if desired, so it must be OK to do this. For example the text content of page 1 of my site is copied below in HTML:

<P align=justify><FONT color=#000000 size=3>Exclusive dedicated full-time real estate brokerage representation services.&nbsp; Customized development and implementation of&nbsp;property specific&nbsp;strategies for the most unique and challenging commercial&nbsp;and industrial property requirements.<BR><BR></FONT><FONT color=#000000 size=3>- Sales, Acquisition &amp; Disposition<BR>- Leasing, Landlord &amp; Tenant Representation<BR>- Negotiations<BR>- Fair Market Value Analysis<BR>- Consulting<BR>- Due Diligence<BR>- Site Selection &amp; Land Development<BR>- 1031 Tax Deferred Exchange<BR><BR>Clients include:&nbsp; individual investors and&nbsp; family&nbsp; trusts, Fortune 500 corporations, and non-profit organizations. Free consultation welcome.<BR><BR>Licensed Broker California Department of Real Estate</FONT> </P>

I don't understand the above but if you can show me how to lock down the font/text size on this, then maybe I can go through the other pages of my site and do the same technique. Thank you for any guidance.

[kiwibrit]

I think you should aim to allow variable font size - it's a principle of accessibility. In your case, the font scales well, mostly. Those viewers who don't have accessibility issues will, I think, have their browsers set at the default size anyway - so I can't see what your problem is.

[Whit]

The only real problem is with page 2, "Client Projects", which looks chaotic if the viewer has a larger or smaller text/font size selected. Thereby, I need to at least lock down the text/font for this page if nothing else. Can this be done by a know-nothing WYSIWYG type web site builder such as I have used? The CSS with px idea sounds like the best alternative strategy so far. How to implement? Can I work from what I have? Or do I need to start over again with something like FrontPage?

[kelly23]

You're obviously using tables to layout your page, so to keep the correct text with the correct photo, you should make sure that each photo is in the same "row" as its corresponding text (photo in the left cell, corresponding text in the right hand cell).

Right now you just have 2 columns with line breaks between photos in the left column and line breaks between sections of text in the right column.

To keep the corresponding text with its photo, place the photo and corresponding text in separate "cells", but in the same "row".

[Whit]

Errr... I didn't use any kind of "table". I just have the screen split into 2 columns, photos left side and text right side, then I tried to make the two sides line up with each other by inserting blank lines when necessary. So that is why the distortion happens when the text/font size is changed by a viewer.

Problem has been identified. Now I should be 50% of the way to a solution?

[JPnyc]

You would put this in the document head

<style type="text/css">
p { font-size:10px }
</style>

Or if 10px is the wrong size, experiment with the number until you find the right one

[Whit]

Deleting page 2 completely, and rebuilding it with a "table" seems to have corrected the problem with distortion of text/font previously experienced when viewing with other browsers' settings. Thank ya kindly stranger. Now is there any way to make the table's horizontal and verticle bars invisible? That would look better. But I can live with it the way it is if necessary.

[kelly23]

Whether you know it or not, you were using a table before, but it just had 2 columns.

As for how to get rid of the borders, you can use this in the table tag:

<table border="0"

or to use css, you can use this in the head of your page:

<style type="text/css">
table {border:0}
</style>