PDA

Click to See Complete Forum and Search --> : NO text overlap

Dysan
02-25-2008, 06:00 PM
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>
stalebrew
02-25-2008, 06:20 PM
Certain browsers display margins different than other browsers by default. So you should set all margins to 0 by using this CSS code.


* { margin:0px; }


Then set margins or padding to each individual element.
stalebrew
02-25-2008, 06:22 PM
Oh and to prevent the text from overflowing use overflow: on your container.
Dysan
02-25-2008, 06:29 PM
Why do I need to add the margin?
Dysan
02-25-2008, 06:33 PM
that doesn't work, the text still leaks outside the container div?
Dysan
02-25-2008, 06:36 PM
How do I make the text in the text1 div move down to the next line, upon the text reaching the width of the text1 div?
stalebrew
02-25-2008, 06:49 PM
I mean after you set the page margins to 0, if you want to add margins to other elements you can then do so with a clean slate.

The reason your text is not breaking to the next line is because you have no spaces in your sample text. write something in there with spacing and you will see what happens.
Centauri
02-25-2008, 06:51 PM
Why do I need to add the margin?

Browsers apply default values of margins (and sometimes padding) to various elements to assist in the display when expicit values are not set. Unfornately, there is no standard for this, and the values, and even type of spacing (whether it is margin or padding, especially when it comes to lists), can vary quite a bit between browsers (as can the rendering of text). Zeroing these values on all elements at the start of the css is one way of providing an even start point so that you have control over spacings whithout the browser adding extra were you don't expect. Due to the above mentioned lists display issue, I usually zero padding as well :* {
margin: 0;
padding: 0;
}

A single line of text with no spaces cannot be made to wrap to the next line - the wrap is calculated on spaces between words. Even on your example, the text size needs to be increased quite a long way before the situation occurs. If a user needs to increase text size by any more than 2 steps, then the text was probably too small to start with (far too common with too many sites these days).