Text going out of border - Please Help

**me_myself** · 10-08-2008, 04:59 PM

I am creating a launch screen with a background image of our office. When i see the screen in IE7 it looks good but when i see it in Firefox, the text in the screen is coming out of the box - not sure what i am doing wrong. Please see the code below and tell me what i should change to make it look good in all browsers. APPRECIATE THE HELP.

Here is the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Launch Layout</title>
<style type="text/css">
<!--
#launch_bg {
	background-image:url(images1/launch_bg.gif);
	background-repeat:repeat;
}
#launch_holder{
	border:1px solid #dbdbdb;
	margin-top:30px;
	margin-bottom:30px;
	width:632px;
	height:512px;
	position:relative;
	left:50%;
	margin-left:-316px;
	background-image:url(layout_bg.gif);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}
#launch_content{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	width:340px;
	margin-left:2px;
}
-->
</style>
</head>

<body id="launch_bg">
<div id="launch_holder" align="center">
  <table width="632" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="212" valign="top"><table border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td><img src="images/spacer.gif" width="1" height="170"></td>
          </tr>
          <tr>
            <td>Small image will come here</td>
          </tr>
              </table></td>
      <td width="420" valign="top"><table id="launch_content" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="images/spacer.gif" width="1" height="120"></td>
        </tr>
        <tr>
          <td align="left" valign="top"><strong>Welcome Message and some sample content in this place to be filled</strong></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>
</body>
</html>

Background Image (layout_bg.gif):

To download the html + image:
Download the HTML & IMAGE in ZIP FILE

Thanks a million in advance.

**wfinley** · 10-08-2008, 06:26 PM

I'm sure there's a more elegant way to do this but here's a quick hack showing the right side text. You'll have to play w/ placement as it renders differently in IE than FF.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Launch Layout</title>
<style type="text/css">
<!--
#launch_bg {
	background-image:url(images1/launch_bg.gif);
	background-repeat:repeat;
}
#launch_holder{
	border:1px solid #dbdbdb;
	margin-top:30px;
	margin-bottom:30px;
	width:632px;
	height:512px;
	position:relative;
	left:50%;
	margin-left:-316px;
	background-image:url(layout_bg.gif);
	background-repeat:no-repeat;
	background-color:#FFFFFF;
}
.launch_content{
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	color:#000000;
	width:340px;
	margin-left:15px;
	padding: 10px;
	margin-top: 90px;
	margin-right: 15px;
	margin-bottom: 10px;
}
-->
</style>
</head>

<body id="launch_bg">
<div id="launch_holder" align="center">
  <table width="632" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="212" valign="top"><table border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td><img src="images/spacer.gif" width="1" height="170"></td>
          </tr>
          <tr>
            <td>Small image will come here</td>
          </tr>
              </table></td>
      <td width="420" valign="top"><table  border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="images/spacer.gif" width="1" height="120"></td>
        </tr>
        <tr>
          <td align="left" valign="top"><div class="launch_content"><strong>Welcome Message and some sample content in this place to be filled</strong><br>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div></td>
        </tr>
      </table></td>
    </tr>
  </table>
</div>
</body>
</html>

**me_myself** · 10-08-2008, 06:40 PM

wfinley thanks for the post. I tried using your code, that looks a little ok but the text still looks (is placed) different in IE and Firefox - see screenshot below.

Thanks

Thread: Text going out of border - Please Help

Thread Tools

Search Thread

Text going out of border - Please Help

Bookmarks

Bookmarks

Posting Permissions