Log in

View Full Version : 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:


<!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):
http://www.lollygarden.com/layout_bg.gif

To download the html + image:
Download the HTML & IMAGE in ZIP FILE (http://www.lollygarden.com/layout.zip)

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.


<!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.

http://www.lollygarden.com/layout_issue.jpg

Thanks