...

View Full Version : Text exceeds the size of the background



sparkling
11-21-2011, 07:10 PM
Hi all,

I am new to this forum and hope this is the right place to post my question.
I created a page which shows fine in IE but in Firefox, the text exceeds the nominal size of the page background graphic. so the text continues while the white space ends. Would you please help me fix this issue? I would really appreciate this.

Thanks,
workaholic



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="menuscript.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
<!--
body, td, th {
font-family: Tahoma;
font-size: 11px;
color: #373737;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #373737;
}
.style1 {
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: underline;
color: #FFFFFF;
}
a:active {
text-decoration: none;
}
.style2 {color: #5B6C93}
.style3 {color: #FFFFFF}
.dropmenu {
position: absolute;
left: -1500px;
visibility: visible;
z-index: 101;
float: left;
width: 127px;

border-width: 0px;
border-style: solid;
border-color: #2A2A2A;
background-color: #000000;
}
.dropmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dropmenu li {
display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
display: block;
width: 125px;

padding: 2px;
margin: 1px;
font-family: Sans-Serif;
font-size: 12px;
font-weight: normal;
text-align: left;
text-decoration: none;

color: #FFFFF;
background-color: #7F7F7F;
}
.dropmenu a:hover {
padding: 2px;
margin: 1px;
font-family: Sans-Serif;
font-size: 12px;
font-weight: normal;
text-align: left;
text-decoration: none;

color: #FFFFFF;
background-color: #FE1825;
}
-->
</style></head>

<body background="images/background.jpg">
<table width="904" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center">
<tr>
<td width="908">
<table width="908" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="332"><a href="http://www.website.com"><img src="images/title.jpg" width="332" height="217" border="0"></a></td>
<td width="581"><a href="_blank">
<img src="images/header.jpg" width="573" height="217" border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td width="908">
<table width="865" border="0" cellspacing="0" cellpadding="0" height="346">
<tr>
<td width="8" height="346"></td>
<td valign="top" width="233" height="346"><table width="213" border="0" cellspacing="0" cellpadding="9">
<tr>
<td>
<a onmouseover="setOverImg('1','');overSub=true;showSubMenu('submenu1','button1');" onmouseout="setOutImg('1','');overSub=false;setTimeout('hideSubMenu(\'submenu1\')',delay);" href="index.htm">
<img src="buttons/button1up.jpg" border="0" id="button1" vspace="1" hspace="1" width="213" height="32"></a><br>
<a href="" onmouseover="setOverImg('2','');overSub=true;showSubMenu('submenu2','button2');" onmouseout="setOutImg('2','');overSub=false;setTimeout('hideSubMenu(\'submenu2\')',delay);" target><img src="buttons/button2up.jpg" border="0" id="button2" vspace="1" hspace="1" width="213" height="32"></a><br>
<a href="" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3');" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target><img src="buttons/button3up.jpg" border="0" id="button3" vspace="1" hspace="1" width="213" height="32"></a><br>
<a href="" onmouseover="setOverImg('4','');overSub=true;showSubMenu('submenu4','button4');" onmouseout="setOutImg('4','');overSub=false;setTimeout('hideSubMenu(\'submenu4\')',delay);" target><img src="buttons/button4up.jpg" border="0" id="button4" vspace="1" hspace="1" width="213" height="32"></a><br>
<a onmouseover="setOverImg('5','');overSub=true;showSubMenu('submenu5','button5');" onmouseout="setOutImg('5','');overSub=false;setTimeout('hideSubMenu(\'submenu5\')',delay);" href="join.htm"><img src="buttons/button5up.jpg" border="0" id="button5" vspace="1" hspace="1" width="213" height="32"></a><br>
<a href="" onmouseover="setOverImg('6','');overSub=true;showSubMenu('submenu6','button6');" onmouseout="setOutImg('6','');overSub=false;setTimeout('hideSubMenu(\'submenu6\')',delay);" target><img src="buttons/button6up.jpg" border="0" id="button6" vspace="1" hspace="1" width="213" height="32"></a>
<a href="" onmouseover="setOverImg('7','');overSub=true;showSubMenu('submenu7','button6');" onmouseout="setOutImg('7','');overSub=false;setTimeout('hideSubMenu(\'submenu7\')',delay);" target><img src="buttons/button7up.jpg" border="0" id="button7" vspace="1" hspace="1" width="213" height="32"></a>
</td> </tr>
<tr>
<td>&nbsp;<p><br>
<br>
<br>
<br>
&nbsp;</p>
<table width="190" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
</table></td>
<td width="36" height="346"><a href="_blank"><img src="images/spacer.gif" width="36" height="1" border="0"></a></td>
<td valign="top" width="541" height="346">
<table width="537" border="0" cellspacing="0" cellpadding="0" height="183">
<tr>
<td width="537" height="29"><b><font size="2" color="#FE1825">
<span lang="EN">
<p dir="ltr" align="left">NAVSEA SeaPort Enhanced (SeaPort-e)</span></font></b></td>
</tr>
<tr>
<td width="537" height="354">
<div id="main-shadow">
<div id="main">
<div id="middle-shadow">
<div id="middle" class="clearfix">
<div id="c1c2" class="clearfix nofullscreen">
<div id="wrapper" class="clearfix">
<div id="col1" class="marginleft marginright">
<div id="tiki-center-shadow">
<div id="tiki-center" class="clearfix content" style="width: 537; height: 312">
<div id="main-shadow">
<div id="main">
<div id="middle-shadow">
<div id="middle" class="clearfix">
<div id="c1c2" class="clearfix nofullscreen">
<div id="wrapper" class="clearfix">
<div id="col1" class="marginleft marginright">
<div id="tiki-center-shadow">
<div id="tiki-center" class="clearfix content">
<span lang="EN">
<p dir="ltr" align="left">
SeaPort-e is the Navy's
electronic platform for
acquiring support services in 22
functional areas that
potentially span the entire
spectrum of mission areas
supported by the activities and
technical capabilities that
comprise the various ordering
offices, as well as provide
professional services to the
overall Navy and Marine Corps
organizations. The Navy Systems
Commands (NAVSEA, NAVAIR, SPAWAR,
NAVFAC, and NAVSUP), the Office
of Naval Research, and the
United States Marine Corp
compete their service
requirements amongst SeaPort-e
IDIQ multiple award contract
holders.</p>
<b>
<p dir="ltr" align="left">
Contract Number:
N00178-10-D-6044<br>
Business Size: Large<br>
NAICS Code: 541330</p>
<p dir="ltr" align="left">Period
of Performance:&nbsp;<br>
15 July 2010 through 4 April
2014<br>
5 April 2014 through 4 April
2019</p>
<p dir="ltr" align="left">Task
Orders: <font color="#000000">
AWARDED</font></b></p>
<b>
<p dir="ltr" align="left">Task
Order Types:</p>
</b>
<ul>
<li>Firm Fixed Price (FFP)</li>
<li>Fixed Price Incentive (FPI)</li>
<li>Cost Plus Award Fee (CPAF)</li>
<li>Cost Plus Fixed Fee (CPFF)</li>
<li>Cost Plus Incentive Fee (CPIF)</li>
</ul>
<b>
<p dir="ltr" align="left">Team
Members / Experience</p>
</b>
<ul>
<li>
<p dir="ltr" align="left">
AASKI Technology Inc.
<a href="http://www.aaski.com">
<font color="#365F91">www.aaski.com</font></a></li>
<li>
<p dir="ltr" align="left">
Convergent Solutions Inc.<font color="#FE1825">
</font>
<a href="http://www.convergentsolutionsinc.com">
<font color="#365F91">www.convergentsolutionsinc.com</font></a></li>
<li>
<p dir="ltr" align="left">
Programmatics Engineering
Group Inc (PEGi)
<a href="http://www.programmatics.com">
<font color="#365F91">www.programmatics.com</font><font color="#FE1825">
</font> </a>
</li>
<li>
<p dir="ltr" align="left">
Rividium
<a href="http://www.rividium.com/">
<font color="#365F91">www.rividium.com</font></a></li>
</ul>
<b>
<p dir="ltr" align="left">
<u><font color="#FF0000">
<a href="downloads/SeaPort-e%20Functional%20Support.pdf">
<font color="#365F91">Functional
Area of Expertise</font></a><br>
</font></u><br>
Quality Assurance Program
<font color="#0000cc">
<a href="downloads/Quality%20Assurance%20Program.pdf">
<font color="#365F91">(QAP)</font></a></p>
</font></b><strong>
<p dir="ltr" align="left">
Customer Satisfaction POC</strong><br>
Ron Burns<br>
Telephone: (703) 961-1818
ext.155<br>
<a href="mailto:info@website.com">
<font color="#365F91">info@website.com</font></a> <b><br>
<br>
Contact Information</p>
</b>
<p dir="ltr" align="left">For
detailed information on how
we can meet
your needs using this contract,
please contact:<b><br>
<br>
Technical:<br>
</b>Name<br>
Telephone: 000-000-0000 ext.155<br>
<a href="mailto:info@website.com">
<font color="#365F91">info@website.com</font></a><b><font color="#365F91"><br>
</font>
<br>
Contractual:<br>
</b>name<br>
Telephone: (703) 961-1818 ext.
169<br>
<a href="mailto:info@website.com">
<font color="#365F91">info@website.com</font></a></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td width="537" height="13"></td>
</tr>
<tr>
<td width="537" height="1"><br>
&nbsp;</td>
</tr>
</table></td>
<td width="47" height="346"><a href="_blank"><img src="images/spacer.gif" width="47" height="1" border="0"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/gr1.jpg" width="908"><a href="http://www.website.com"><img src="images/spacer.gif" width="766" height="14" border="0"></a></td>
</tr>
<tr>
<td bgcolor="#373737" width="908"><table width="766" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><a href="_blank"><img src="images/spacer.gif" width="10" height="50" border="0"></a></td>
<td width="232"><span class="style3">&copy; copyright 2011 company All Rights
Reserved</span></td>
<td width="514" align="right"></td>
<td width="10"><a href="_blank"><img src="images/spacer.gif" width="10" height="50" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

teedoff
11-21-2011, 07:19 PM
Hi Sparkling,

Wow ok where to begin. lol

First, you should read about why tables for layouts are bad (http://www.hotdesign.com/seybold/)and highly discouraged.

Second, Divs are the best practice today, however there is such a thing as divitis (http://csscreator.com/divitis), which you may be suffering from a bit as well.

And third, you have quite a few errors in your markup. Some of which are multiple id's with the same name, which is invalid, and quite a few mismatched opening and closing tags. You also dont declare a valid doctype, which is essential if you expect valid cross browser compliant webpages.

You should try to eliminate the errors in your code and work on the bad coding practices as well.

sparkling
11-22-2011, 05:16 PM
Hi Sparkling,

Wow ok where to begin. lol

First, you should read about why tables for layouts are bad (http://www.hotdesign.com/seybold/)and highly discouraged.

Second, Divs are the best practice today, however there is such a thing as divitis (http://csscreator.com/divitis), which you may be suffering from a bit as well.

And third, you have quite a few errors in your markup. Some of which are multiple id's with the same name, which is invalid, and quite a few mismatched opening and closing tags. You also dont declare a valid doctype, which is essential if you expect valid cross browser compliant webpages.

You should try to eliminate the errors in your code and work on the bad coding practices as well.

Hi Teed,

Thank you for the great tips, I will read them and follow the steps and will report back with more questions :-)

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum