Font text size problem - Post ID 616

User 413854 Photo


Registered User
6 posts

I have Built a web page using several diffrent coffee cup programs.
On my computer the font, text size, and positioning look fine.
Wheni view it on other computers nothing is positioned correctly, the font size has changed and the font is not appearing properly. Its supposed to be in mistral. I had to purchase this font. I have some HTML knowledge, yet haave no idea how to fix this problem. I was also going to us Coffee cup font editor program but it wont let me import mistral into the program to create my fonts. Does anyone have any suggests.
www.riverrocketboats.com

Thank you
User 282670 Photo


Registered User
3,940 posts

I looked using I.E.7 and Firefox and all looks ok to me, what they using or do you happen know what their using to view your page, a laptop or something.




User 42578 Photo


Ambassador
1,176 posts

The font Mistral will not show up on any other computer that does not have it installed.

To import it into the CC web font program requires the whole Flash program and SiFR.

In looking at your site the text appears positioned properly.
I am using Firefox to view it.

Mike....
..........................................
http://www.wpdfd.com
User 37670 Photo


Registered User
2,138 posts

Hi jroye,

I am having a look at your web page code and......
WOW, unless there has been major changes in web design lately, I have no idea how your page manages to display at all! No I am not trying to me mean, but you have some major design problems with the coding of your pages.
Let me try to explain.
You do need to open with the doctype and <html> good so far.
You've got he <head> <title> and <style> tags going well.
After the </head> tag, you need the <body> tag. This tells the web page that the body content is starting. You have this <body> tag way at the end of your code, after all of the content stuff you are using. This will mess things up for sure.

You us some div tags that are not helping you, because you have no style tags for the div.....in english...
You have this tag in your code:
<div class="container">
It suggest that you have a style class called .container
I don't see a .container anywhere in your style tags. You do the same for a class you call "main" ( <div class="main">
If you are counting on classes like container and main to style your web page, you need to add those classes in your style sheet and tell them what they should do.

Near the end of your page code, you have this:
<div class="main"><table><tr><td><table><tr><td><table><tr><td>
<body><center>
<h1>RIVER ROCKET BOATS</font> </h1></center></body></html>

I can't see what the class "main" is doing here, as I mentionned there is no class called "main" in your style sheet.

The <body><center> part of that code should be right after the </head> tag.

The <h1> RIVER ROCKET BOATS</h1> should be just after the <body> tag, as it is the first thing you are trying to display on your page, and the </font> tag is misplaced, as it does not belong inside a <h1> tag.

The <table><tr><td><table><tr><td><table><tr><td> tags are useless. It is telling the browser to start building 3 tables, all inside each other without completing even one of the tables. Get rid of that <table>....section of code. It is doing nothing but confusing the web browser.

Leave the </center></body></html> at the end of your page code.

I know this is a long list of fixes, but with the code in the wrong place, the web browser has no real clue where to put all you content or how to display it. I hope I have explained some of this properly.
I think you have a good web page. It will display better and work for more people by fixing the code.

Good Luck
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 413854 Photo


Registered User
6 posts

Thank you so much! im still having a problem with overflow. How do i fix that? I need the fonts and everything to "fit to page" basically.. how shoudl i do that!?
User 388878 Photo


Customer Support Specialist
100 posts

Hello Jroye,

There's an article in our Help section that you may be interested in:

http://www.coffeecup.com/designer/help/ … d.689.html

The first little paragraph talks about VisualSite Designer... if you're not using VisualSite Designer, you can ignore that part.

The links at the bottom are extremely helpful in dealing with web design.
~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~
David R.
CoffeeCup Software Inc.
An Internet 500 Company
http://www.coffeecup.com
User 37670 Photo


Registered User
2,138 posts

You still really need to add the <body> tag to your web page.

Your code looks like this:
</head>

<div class="container">
<div class="div1">


Right after the </head> tag, you need the <body> tag, like this:

</head>
<body>
<div class="container">
<div class="div1">

I had a look at another page...
You can't have things like <h1>this is a header</h1> inside of the <head> </head> tags, and all of your <style> </style> tags need to be in the <head> part of the code, not the <body>

Basically, make sure all of the <style> tags, <title> tags, <meta> tags (you are not using these yet, but you might) are in between the <head> </head> tags.
Then you start your <body> tag. Inside the body of the web page is where you put your <h1>, <p>, <img> and <table> tags, if you choose to use these. There are lots of tags and choices, I only mention a few.
Don't confuse the <body> tag with the style tag body{}. They are different. Your text won't get the way you want it until the pages start to follow some of the rules of html.

What program are you using for creating your web pages? Have you tried the Coffeecup html program?
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 37670 Photo


Registered User
2,138 posts

I keep comming back to your page because it can and will display properly. You are on the right track, and I see that you have followed my advice and got the page coding into much better shape. Good Job.

Now for the font problem, at least on your home page. Font tags and the other tags used with fonts like <b> and <i> and <u> need to be in a proper order, just like the <head> and <body> tags. You have a section of code that does not follow that order, and it is responsible for the font staying too big in FireFox and Netscape. Internet Explorer goes into "Quirks Mode" and takes a better guess at what you want. Standards compliant browsers will follow the "rules" and display your text as your code tells it to.

Here we go:

<div class="div3"><h1>RIVER ROCKET BOATS</h1><br>
<p>Look down at your foot. Now imagine if there was water covering your toe but not the first shoestring eyelet.</p><b><font size="5" face="Eras bold ITC"><font color="#800000">THAT’S ALL THE WATER A RIVER ROCKET NEEDS!!!</b></font> <p>River Rocket Boats are designed to get you through <u><b>ULTRA</u></b> shallow water and more importantly <u>GET YOU BACK</u>.

This is one section of code at the start of the font problem. The rules of html say that the first tag opened needs to be the last code closed. Example:
<font> this is font <b> this is bold font </b> regular font again </font>
The font was opened first, then made bold, then the bold closed, then close the font. If the order was <b> <font> </b> </font> , that would be incorrect.

Using your code that I pasted above, I will strip the text, and show just the tag order....you will see that some tags do not get closed, or are out of order.

<div class="div3"><h1> </h1><p> </p> <b><font size="5" face="Eras bold ITC"><font color="#800000"> </b> </font> <p> <u> <b> </u> </b> <u> </u>.

The <div is ok, the <h1></h1> is ok, and the first <p></p> is fine.
Notice after that, you start with <b>, then a <font> then another<font>
after that you close the </b> tag. That order is wrong. The <b> was the first one opened, and according to the rules, all the other tags in between should have been closed first. The simple way to do it is always open your <p>, then go to the <font> tags. Only use a <b> or <u> just before the exact text you want bold or underlined, then close the tag </b> or </u> right away. Then remember to close the </font> tags. In your code, you opened 2 <font> tags, so you need to close 2 </font> tags, and you only closed one.

A better order for the tags in the code example is:

<div class="div3"><h1> </h1> <p> </p><font size="5" face="Eras bold ITC"><font color="#800000"><b> </b></font></font> <p> <u> <b>ULTRA</b> </u> shallow <u> </u>.

I hope that makes sense. Doing it this way will ensure your font sizes and bold text stay how you want them on web pages in different web browsers.

BTW, I really like the boats. I do a lot of river fishing and think this is a good idea.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 413854 Photo


Registered User
6 posts

Thank you so much. I am still very confused on how to bring my Mistral font into the web font program to insure it appears on everyones computer..

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.