cancel
Showing results for 
Search instead for 
Did you mean: 

text sizes on web page

N/A

text sizes on web page

I've designed a simple web site: www.salaam.plus.com

it works fine if viewers keep their text size on Medium with IE

but if they increase / decrease their text size the whole site is messed up with pictures all over the page.

Where did i go wrong?

i've used Frontpage 2002. [/url]
7 REPLIES
N/A

text sizes on web page

As someone who only (just about) understands the basics of HTML, struggles with my own pages, and knows nothing about Frontpage, I do not know the answer, so this is just a bit of extra info for you, not a solution.

1) To my way of thinking, it doesn't even "work" in IE using medium text size. At 800x600, which I and many others with small monitors use, it does not fit the screen width. On clicking a few links, I find that, in fact, most of the other pages are reasonably OK, but a welcome page that I can only see about 75% of the width of puts me right off straight away.

2) Using the equivalent to IE's "medium" text size, but using my normal browser, Firefox, gives the same problem that you refer to of the pictures being out of alignment. Again, that would not encourage me to visit.

As a novice myself, this is a case of the pot calling the kettle black, but to be perfectly honest, if one of my pages looked like that when viewed at various text sizes with various browsers, I would (as I have done with some of my own failures) pull it and start again with something less ambitious!
Community Veteran
Posts: 6,983
Thanks: 8
Registered: 10-04-2007

text sizes on web page

Yes I can see the problem you mention in that changing the text sizes mess up the layout.

The way I overcome this on my model railway site www.hmrg.co.uk is to put everything in tables. I set the table sizes as a percentage of the page not pixel sizes and then they self adjust to whatever screen / font size is viewing them.
N/A

Website - revamped

Hi thanks for all your advice... i've started to use CSS and i think this is helping my problem of layout and Browser text size.

Rather than start from scatch again... I've decided to modify it from within
As a result you can clearly see the new site / layout from the old (I hope!)

Please feel free to comment if you think I'm heading in the right direction... or not!

thanks

www.salaam.plus.com
Community Veteran
Posts: 6,983
Thanks: 8
Registered: 10-04-2007

text sizes on web page

OK using the cascading style sheets has cured the problem of text sizes messing up the presentation. But if I reduce my screen size down to 800 x 600 which is still used by a lot of your potential audience then the Page again gets messed up.
Similarly if I increase the screen to 1280 x 1024 it again messes the layout up.
So you have cured the text size problem but tthe site is only viewable in 1024 x 768 screen size.

I think you are going to have to bit the bullet and do some major changes to make it work properly.
N/A

text sizes on web page

thanks for the advice... i think I'm making progress!

[/url]
N/A

text sizes on web page

50% of your page is full of rubbish (I dont mean content) I mean source code like this class="Kutta">&&&& if you get rid of the rubbish you save 50% of the file size it loads quicker and you can see whats wrong better. Your code was 16.5K I have got rid of the rubbish and it does the same thing and is 6.5k


Copy the code below into notepad and save it as test.htm

<html>
<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Religious Education Page</title>
<style fprolloverstyle>
A:hover {color: #FF0000; font-weight: bold}
</style>
<link rel="stylesheet" type="text/css" href="new_page_3.css">
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<center>
<table border="0" cellspacing="1" width="100%" id="AutoNumber2">
<tr>
<td width="100%"><b>
<marquee scrollamount="5" loop="2" height="0">
Whats new: Virtual Tour of Peterborough Cathedral!
</marquee>
</b></font>
<div align="center">
<center>
<table border="2" cellspacing="1" width="59%" id="AutoNumber3" bgcolor="#9999FF">
<tr>
<td width="100%" height="83"> <img border="0" src="index_files/wheel4.gif" width="56" height="63">
<p><img width=415
height=61 src="index_files/image001.gif" alt="Religious Education" v:shapes="_x0000_s1028"></p></td>
</tr>
</table>
</center>
</div>

<p align="left"><b>I hope you find this site both informative and enjoyable. </font></b> <b>This site is intended for both students and teachers of R.E. and Citizenship.</b></font></p>
<p align="left"> <b>Please feel free to contact me for suggestions, requests, advice etc.</b></font></p>
<div align="center">
<center>
<table id="AutoNumber1" height="55%" cellSpacing="0" cellPadding="0" width="63%" border="3">
<tr>
<td width="48%" height="68"> <b> <a href="http://www.salaam.plus.com/Key%20Stage%203%20page.htm"> Key Stage 3 R.E.</a> <span style="position: absolute; left: 434; top: 383"> <img border="0" src="index_files/revolving_prayer_wheel.gif" width="38" height="36"></td>
<td width="52%" height="68"><b> <a href="http://www.salaam.plus.com/Key%20Stage%204%20page.htm"> Key Stage 4 R.E.</a> <span style="position: absolute; left: 713; top: 383"> <img border="2" src="index_files/handsup.gif" width="32" height="33"></b></font></td>
</tr>
<tr>
<td width="48%" height="64"><b> <a href="http://www.salaam.plus.com/Virtual%20Tour/Virtual%20Tour%20Gallery.htm"> Virtual Tour Gallery</a> <span style="position: absolute; left: 434; top: 447"> <a href="Virtual%20Tour/Virtual%20Tour%20Gallery.htm"> <img border="2" src="index_files/Fazane1.jpg" width="33" height="34"></a></font></b></td>
<td width="52%" height="64"><b> <a href="http://www.salaam.plus.com/Citizenship.htm"> Citizenship</a></font></b> <span style="position: absolute; left: 707; top: 447"> <img border="0" src="index_files/uk_gm_e0.gif" width="41" height="33"></td>
</tr>
<tr>
<td width="48%" height="64"><b> <a href="http://www.salaam.plus.com/Lawrence/Stephen%201.htm"> Stephen Lawrence</a></font></b> <span style="position: absolute; left: 430; top: 510"> <a href="Lawrence/Stephen%201.htm"> <img border="2" src="index_files/stephen_sm.jpg" width="35" height="35"></a></td>
<td width="52%" height="64"><b> <a href="http://www.salaam.plus.com/Malcolm%20X/Malcolm%20X.htm"> Malcolm X</a> <span style="position: absolute; left: 707; top: 511"> <a href="Malcolm%20X/Malcolm%20X.htm"><img border="2" src="index_files/index.1.jpg" width="40" height="36"></a></font></b></td>
</tr>
<tr>
<td width="48%" height="62"> <b> <a href="http://www.salaam.plus.com/Simpsons/Simpsons%20&%20religion.htm"> Simpsons & Religion</a> <span style="position: absolute; left: 711; top: 638"> <a href="http://www.perci.co.uk/quiz.htm"> <img border="1" src="index_files/quiz.h1.jpg" width="38" height="35"></a></font></b><span style="position: absolute; left: 430; top: 641"><img border="2" src="index_files/index.2.gif" width="36" height="30"></td>
<td width="52%" height="62"><b> Hollywood & Religion <span style="position: absolute; left: 709; top: 571"> <img border="2" src="index_files/brucealmighty.jpg" width="38" height="38"></font></b></td>
</tr>
<tr>
<td width="48%" height="62"> <b>Power-Points <span style="position: absolute; left: 429; top: 571"> <a href="Simpsons/Simpsons%20&%20religion.htm"> <img border="0" src="index_files/image003.gif" width="38" height="42"></a></font></b></td>
<td width="52%" height="62"><b> <a href="http://www.perci.co.uk/quiz.htm">R.E. Game</a> </font></b></td>
</tr>
<tr>
<td width="48%" height="63"><b> <a href="http://www.salaam.plus.com/artificial%20Intel/artificial_intelligence.htm"> Artificial Intelligence</a> <span style="position: absolute; left: 430; top: 698"> <a href="artificial%20Intel/artificial_intelligence.htm"> <img border="1" src="index_files/artifi1.gif" width="36" height="37"></a></font></b></td>
<td width="52%" height="63"><b> <font face="Arial" size="2"></font> <a href="http://www.salaam.plus.com/links%20page.htm"> Links</a></font></b></td>
</tr>
</table>
</center>
</div>
<div style="LEFT: 10px; WIDTH: 985px; POSITION: absolute; TOP: 762px; HEIGHT: 215px"> <b><font face="Verdana" size="5"> </font><font face="Verdana"><font size="5"></font></font></b></div>
</td>
</tr>
</table>
</center>
</div>
<div style="position: absolute; top: 762; left: 10; width: 985; height: 218"> <span style="position: absolute; left: 453; top: 39"> <img src="http://homepages.plus.net/cgi-bin/counter?salaam_pn" width="67" height="37"><b><font face="Verdana" size="5"> </font> <font face="Verdana"><font size="5"></font></font> </font></b>
<p><b> </font></b><b> </b><b> Total Visitors </font></b></p>
<p><b><i> </font></i></b><i><b>This site was last updated
<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%d %B %Y" startspan -->25 July 2004<!--webbot bot="Timestamp" endspan i-checksum="18798" -->
</font></b></i></p>
</div>
</body>
</html>
N/A

text sizes on web page

Quote
<span style="position: absolute; left: 434; top: 447">


This is the root cause of your problem. The pictures are being given a fixed position, relative to the top left of the page. The position of the text is not fixed, so will vary depending on font size, width of the browser, etc.

Generally, using fixed positioning is going to cause problems. Unless everything else is in exactly the right position, it won't work. There is nothing you can do to guarantee that the text will be in a fixed place, so the only option is to make the images flow with the text. I can see two ways to do this:

1. Put the image on the left hand side of the text. You should be able to insert the image just before the text.
2. Put an extra column in the table, with the images in. You can then remove the border on the cell.


Hopefully these comments will be useful...