Dysan Posted February 25, 2008 Share Posted February 25, 2008 Hi, How do I stop the text contained in the "text1" div, from leaking outside the container div upon the user resizing the browsers text size? Also, how come the text gets displays slightly higher in IE than it does in Firefox? - How do I display the text in exactly the same place when viewed in both browsers? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> #container { WIDTH: 771px; HEIGHT: 850px; POSITION: relative; BORDER: 1px solid rgb(0,0,0); } p { TOP: 74px; LEFT: 467px; PADDING: 0px; FONT-SIZE: 110%; POSITION: absolute; LETTER-SPACING: 0.7px; FONT-FAMILY: Arial, Tahoma, Verdana, sans-serif; } </style> </head> <body> <div id="container"> <p id="text1">jkljkljkljkl</p> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted February 26, 2008 Share Posted February 26, 2008 How do I stop the text contained in the "text1" div, from leaking outside the container div upon the user resizing the browsers text size? You need to set the width of text1 to a dynamic size (ems are best, % can also be used) so that it increases with the text size. Pixels are static, which means that when you increase the text size, the size of the container (text1 in this case) stays the same, which is why your text overflows. Ems are directly tied to pixel size (1 em is approximately the width of a small 'm' in the current text size), which means that as you increase text size, the container size also increases. On a side note, you really shouldn't be using absolute positioning for that p. Absolute positioning is almost never necessary except in rare cases. It seems like an easy way out, but it ends up causing more headaches on its own, because it also doesn't flow with a website as text sizes change. Switching to ems will probably cause you other problems with your layout (it usually does for people when they first switch to using ems from pixels). But don't despair, keep at it and when you get the hang of it, your sites will be that much better. Also, pretty much every site breaks after a few text size increases. So don't aim for your site to stay fine at every single text size, just blow it up to a reasonable amount and make sure its still ok at that point. Also, you should google some different css framework sites (heres a good one: http://www.contentwithstyle.co.uk/index.php?id=17&s=Articles) and check out how they have their structures layed out. See how 2 column structures and 3 column structures are put together. Google floats and see how they work. Its only when you start to get the feel of floating everything that Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.