This is probably a stupid query but I have designed a web page that contains a picture at the bottom. However when viewing the page in different browsers that have different text size settings the picture does not move with the text and ends up obscuring it. What is the best way to get round this problem and ensure that this picture stays at the bottom of the page regardless of different browser settings?

jetboy

3:20 pm on Sep 7, 2005 (gmt 0)

Not a stupid query at all. It shows you're thinking of a web page as a fluid medium, and understanding that there are some things that are out of your control. Asking how you can stop people changing their text size would have been a different matter. ;)

As for a solution; can you post some code to give us a little more detail?

BigC5

3:44 pm on Sep 7, 2005 (gmt 0)

This is an example of one of the pages:

<html>
<title>Molecular Photonics Laboratory - Home</title>
<? include("header.php")?>

<DIV ID="TICKER" STYLE="overflow:hidden; width:948px">
Latest News:Dr. YongGang Zhi has joined the laboratory.
</DIV>
<script src="webticker_lib.js"></script></span>

<p align="left">
<span style="position: absolute; left: 384; top: 676">
<font color="#FF0000" face="Arial" size="5">
Contact us at <a href="mailto:MPL@ncl.ac.uk">MPL@ncl.ac.uk</a></font></span></p>
</body>

The last picture image002.gjf is the one that does not move with the change in text size. I realise that this is probably because of the "absolute" tag however I have tried the use of "relative" with no luck.

jetboy

4:13 pm on Sep 7, 2005 (gmt 0)

Well, it is position: absolute;, but it's a little more complex than just changing it on the image.

When you make an element position: absolute;, you take it out of the document flow; it ceases to have any impact on the positioning of its neighbouring elements. Increasing the size of an absolutely positioned element will just cause it to overlap its neighbouring elements, not push them out of the way.

You want the elements above the image to push it down if they get larger. Therefore none of them can be positioned absolutely. For the image to react to the pushing, it needs to be in the document flow too, so no absolute positioning here either.

Your safe bets are position: static;, the default for <div>s, and position relative;, which will allow you to move things around with top: and left:. Of course you can always use margins to move things around with either type of positioning.

Text Size

BigC5

jetboy

BigC5

jetboy

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week