[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

Absolute positioning differences between browsers

I want to write text into a number of boxes on a web page.

I cannot tell in advance what the text length is, but I do not want the boxes to change size, so I thought I'd put the text on a layer using the 'hidden' attribute to trim the text if it gets to long,

I will have about 30 boxes with text in.

Below is a simplified version of the page illustrating my problem.   If I line the text with the box in IE, in Firefox it is out of line and visa versa

Can anyone explain why this happens and how I can correct it?

<html>
<head>
</head>

<body bgcolor="#FFFFFF">

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:3; overflow: hidden; left: 100px; top: 206px">
  <p>Line one<br>
    Line 2<br>
    This Is in line for <br>
    Internet Explorer</p>
</div>
<table width="200" border="0" height="200" bgcolor="#FFFF00" style="position:absolute;left: 100px; top: 206px; z-index: 2; width: 200px; height: 85px">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:3; overflow: hidden; left: 350px; top: 193px">
  <p>Line one<br>
    Line 2<br>
    This Is in line for <br>
    FireFox</p>
</div>
<table width="200" border="0" height="200" bgcolor="#FFFF00" style="position:absolute;left: 350px; top: 206px; z-index: 2; width: 200px; height: 85px">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>


</body>
</html>
0
perrybond
Asked:
perrybond
  • 2
1 Solution
 
markomniCommented:
Take your <p> </p> tags out of the DIV:

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:3; overflow: hidden; left: 100px; top: 206px">
    Line one<br>
    Line 2<br>
    This Is in line for <br>
    Internet Explorer
</div>
<table width="200" border="0" height="200" bgcolor="#FFFF00" style="position:absolute;left: 100px; top: 206px; z-index: 2; width: 200px; height: 85px">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

When it renders the content, the <p> </p> tags cause Firefox to insert an extra line.  IE ignores the tags.  Alternately, you can just use a DIV without the table:

<div id="Layer2" style="position:absolute; width:200px; height:85px; overflow: hidden; left: 100px; top: 506px; background-color: #FFFF00">
    Line one<br>
    Line 2<br>
    This Is in line for <br>
    Internet Explorer
</div>
0
 
markomniCommented:
Glad I could help you.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now