|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
You eat, breathe and sleep innovation. Build your mobile intelligence with BlackBerry® experts this July. Register Today! |
|
#1
February 25th, 2008, 05:01 PM
|
|||
|
|||
|
NO text overlap
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? Code:
<!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>
|
|
#2
February 26th, 2008, 01:40 AM
|
||||
|
||||
|
I think the trick there is making a fluid layout, where your containers are positioned and sized relative to the size of the screen rather than with absolute size and positioning.
IE and mozilla display things differently because they are based on different concepts of what size, border, margin and padding mean. For example. If you specify a div that is 100 x 100 px has a 1px margin 1px border and 1px padding in IE this box will wind up being exactly 100px wide in Firefox this box will be 104px wide This is becuase IE takes the width of the border, and maring out of the specified width of the box. Whereas, Firefox makes the box exactly as wide as you specify then adds the width of the border and margin. There are various hacks and kludges to get around this. My personal favorite is to use this technique. width:98px !important; width:100px; using this technique FF will make the box 98 pixels wide then see the !important and ignore further instructions on that line. IE on the other hand doesn't recognize the !important and first sets the width to 98 px then to 100. The final width in ie is 100px.
__________________
There is no spoon.
|
|
| Viewing: Codewalkers Forums > Other Technologies > Client Side Things > NO text overlap |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
