...

View Full Version : CSS Breaking Layout in Table? (Firefox)



Script Idgit
05-01-2009, 08:25 PM
I am attempting to integrate a BMI calculator into my site. When I put it in a page by itself it displays properly. See here. (http://www.4yourbody.info/test/1) But, when I put it in the actual page I want it in, the layout breaks in Firefox, but not in IE. See here. (http://4yourbody.info/test/diet_weight_loss/bmi/2)

The "ComputeBMI" button and background image of the body should be centered.

CSS Code:

* {
margin: 0;
padding: 0;
}

body {
margin: 0px;
background: #002F43 url(images/bg01.jpg) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
color: #B9B9B9;
}

h1 {
font-size: 26px;
letter-spacing: -0.03em;
margin-bottom: .5em;
}

h2 {
font-size: 1.25em;
margin-bottom: 1em;
color: #ffffff;
}

h3 {
font-size: 1em;
}

p, ul, ol {
margin-bottom: 1.0em;
line-height: 150%;
}

p {
}

ul, ol {
margin-left: 3em;
}

blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
color: #8AC800;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

strong {
color: #D7D7D7;
}

/* Background */

#bg1 {
background: url(images/bg02.jpg) no-repeat center top;
}

#bg2 {
background: url(images/bg03.jpg) no-repeat center top;
}

#bg3 {
background: url(images/bg04.jpg) repeat-y center top;
}

#bg4 {
background: url(images/bg05.jpg) no-repeat center top;
}

#bg5 {
background: url(images/bg06.jpg) no-repeat center bottom;
}

/* Header */

#header {
width: 900px;
height: 90px;
margin: 0px auto;
color: #FFFFFF;
}

#header img {
float: left;
margin: 0px;
padding: 6px 0px 0px 25px;
}

#header h2 {
float: right;
margin: 0px;
padding: 62px 35px 0px 0px;
font-size: 24px;
}

/* Header2 */

#header2 {
width: 900px;
height: 88px;
margin: 0px auto;
}

/* Menu */

#menu {
float: left;
}

#menu ul {
margin: 0px;
padding: 34px 0px 0px 0px;
list-style: none;
text-transform: lowercase;
}

#menu li {
float: left;
}

#menu a {
padding-left: 35px;
font-size: 18px;
color: #FFFFFF;
}

/* Search */

#search {
float: right;
}

#search form {
margin: 0px;
padding: 35px 80px 0px 0px;
}

#search fieldset {
margin: 0px;
padding: 0px;
border: none;
}

#search input.text {
width: 160px;
background: none;
border: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height: 26px;
font-size: 16px;
padding: 0px 0px 5px 0px;
color: #AEC38B;
}

#search input.button {
display: none;
}

/* Page */

#page {
position: relative;
width: 846px;
margin: 0px auto;
padding: 20px 0px 0px 0px;
}

#page .nav {
padding: 0px 0px 5px 28px;
font-size: 12px;
}

/* Content */

#content {
float: right;
width: 583px;
}

.bm {
position: relative;
float: right;
margin-top: 18px;
margin-right: 15px;
}

.post {
}

.post .title {
height: 49px;
background: url(images/img02.gif) no-repeat;
padding: 0px 0px 0px 0px;
}

.post .title h1 {
float: left;
padding: 6px 0px 0px 24px;
color: #FFFFFF;
}

.post .entry {
padding: 13px 21px 0px 21px;
text-align: justify;
}

.post .entry p {
text-indent: 15px;
}

.post .entry .ad_right {
height: 250px;
width: 300px;
margin-left: 10px;
float: right;
background: #ffffff;
}

#bmi1 {
margin-left: 10px;
float: left;
background: #003300;
}

#bmi {
margin-bottom: 0;
line-height: 100%;
margin-left: 10px;
float: right;
background: #ffffff;
}

.post .meta {
height: 100%;
clear: left;
margin: 0px 0px;
padding: 15px 0px 0px 0px;
border-top: 1px solid #262626;
}

/* Sidebar */

#sidebar {
float: left;
width: 236px;
}

#sidebar ul {
margin: 0px;
list-style: none;
}

#sidebar li {
background: url(images/img03.gif) no-repeat;
padding: 0px 0px 0px 0px;
}

#sidebar h2 {
margin: 0px;
padding: 14px 0px 16px 0px;
text-align: center;
font-size: 15px;
color: #FFFFFF;
}

#sidebar li ul {
padding: 0px 23px 5px 23px;
}

#sidebar li li {
background: none;
border-bottom: 1px solid #262626;
}

/* Sidebar ad divs */

.ads {
margin-top: 10px;
margin-bottom:10px;
text-align: center;
}

/* Footer */

#footer {
}

#footer p {
text-align: center;
color: #566D77;
}

#footer a {
color: #8097A1;
text-decoration: underline;
}

Page 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>Health & Nutrition through Healthy Diet, Exercise & Smart Supplementation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="health and nutrition, healthy eating, healthy diet, supplement, supplements, supplementation," />
<meta name="description" content="Health, nutrition and supplementation: How a healthy diet and proper supplementation can improve your life." />
<meta name="Distribution" content="Global"/>
<meta name="Rating" content="General"/>
<meta name="Language" content="en-us"/>
<meta http-equiv="Revisit-After" content="30 days"/>
<link href="../../style.css" rel="stylesheet" type="text/css" media="screen" />
<SCRIPT LANGUAGE="Javascript" TYPE="text/javascript">
<!--
function cal_bmi(lbs, ins)
{
h2 = ins * ins;
bmi = lbs/h2 * 703
f_bmi = Math.floor(bmi);
diff = bmi - f_bmi;
diff = diff * 10;
diff = Math.round(diff);



if (diff == 10) // Need to bump up the whole thing instead
{
f_bmi += 1;
diff = 0;
}
bmi = f_bmi + "." + diff;
return bmi;
}
function compute(){
var f = document.getElementById("bmi_input");

w = f.wt.value;
v = f.htf.value;
u = f.hti.value;

// Format values for the BMI calculation

if (!chkw(u))
{
var ii = 0;
f.hti.value = 0;
} else
{
var it = f.hti.value*1;
var ii = parseInt(it);
}

var fi = parseInt(f.htf.value * 12);
var i = parseInt(f.htf.value * 12) + f.hti.value*1.0; // var i = fi + ii; aeisenberg@air.org: now the height in inches is correctly summed

// Do validation of remaining fields to check for existence of values

if (!chkw(v))
{
alert("Please enter a number for your height.");
f.htf.focus();
return;
}
if (!chkw(w))
{
alert("Please enter a number for your weight.");
f.wt.focus();
return;
}

// Perform the calculation

f.bmi.value = cal_bmi(w, i);
f.bmi.focus();
}

function chkw(w){
if (isNaN(parseInt(w))){
return false;
} else if (w < 0){
return false;
}
else{
return true;
}
}
// -->
</SCRIPT>
</head>
<body>
<div id="bg1">
<div id="header">
<img src="../../images/4yourbody_logo.gif" alt="4yourbody Logo: Free health and nutrition information." width="375" height="80" />
<h2>Health, Nutrition and Proper Diet</h2>
</div>
<!-- end #header -->
</div>
<!-- end #bg1 -->
<div id="bg2">
<div id="header2">
<div id="menu">
<ul>
<li><a href="../../default.html">Home</a></li>
<li><a href="../../about.html">About Us</a></li>
<li><a href="../../privacy.html">Privacy</a></li>
<li><a href="../../site_map.html">Site Map</a></li>
<li><a href="../../contact.html">Contact Us</a></li>
<li><a href="../../disclaimer.html">Disclaimer</a></li>
</ul>
</div>
<!-- end #menu -->
<div id="search">
<form method="get" action="http://www.google.com/custom" target="google_window">
<fieldset>
<input type="hidden" name="hl" value="en" />
<input type="hidden" name="ie" value="windows-1252" />
<input type="hidden" name="oe" value="windows-1252" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="client" value="pub-4855258898460788" />
<input type="text" name="q" value="Search by Google" id="q" class="text" />
<input type="submit" value="Search" class="button" />
</fieldset>
<input name="sitesearch" type="radio" value="http://www.4yourbody.info" value="checked">
<font size="2" face="Arial">4yourbody</font>
<font size="2" face="Arial">
<input type="radio" name="sitesearch">
Web</font>
</form>
</div>
<!-- end #search -->
</div>
<!-- end #header2 -->
</div>
<!-- end #bg2 -->
<div id="bg3">
<div id="bg4">
<div id="bg5">
<div id="page">
<div id="content">
<div class="post">
<div class="title">
<h1>Standard BMI Calculator</h1>
<div class="bm">
<!-- AddThis Button BEGIN -->
<script type="text/javascript">var addthis_pub="4yourbody";</script>
<a href="http://www.addthis.com/bookmark.php?v=20" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">
<img src="../../images/bookmarks/img01.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/200/addthis_widget.js"></script>
<!-- AddThis Button END -->
</div>
</div>
<div class="entry">
<div class="ad_right">
<script type="text/javascript"><!--
google_ad_client = "pub-4855258898460788";
/* 300x250, created 12/21/08 */
google_ad_slot = "5145830753";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<h2>What is BMI?</h2>
<P>BMI is short for body mass index. BMI can be used to get a general idea of
body fat by calculating your weight relative to height and may be used as an
alternative to direct body fat measurement. BMI calculations may be applied to
both <i>adult</i> men and women.</P>
<h2>How to use the BMI calculator</h2>
<UL>
<LI>Enter your height and weight into the BMI calculator using either
standard or
<a href="metric_bmi_calculator.html">metric</a>
measures.</LI>
<LI>Click on the &quot;Give Me My BMI&quot; button and your Body Mass Index number will show in the center of the characters heart.</LI>
</UL>
<h3>BMI Categories</h3><br />
<TABLE WIDTH="275" bgcolor="#003300" BORDER="1" SUMMARY="BMI ranges for different weight categories" id="bmi1">
<TR>
<TH ALIGN="CENTER"><B>BMI Categories</B></TH>
<TH ALIGN="center" SCOPE="col"><B>BMI</B></TH>
</TR>
<TR>
<TH ALIGN="LEFT" SCOPE="row">Underweight</TH>
<TD ALIGN="RIGHT">Below 18.5</TD>
</TR>
<TR>
<TH ALIGN="LEFT" SCOPE="row">Normal</TH>
<TD ALIGN="RIGHT">18.5 - 24.9</TD>
</TR>
<TR>
<TH ALIGN="LEFT" SCOPE="row">Overweight</TH>
<TD ALIGN="RIGHT">25.0 - 29.9</TD>
</TR>
<TR>
<TH ALIGN="LEFT" SCOPE="row">Obesity</TH>
<TD ALIGN="RIGHT">30.0 - 39.9</TD>
</TR>
<TR>
<TH ALIGN="LEFT" SCOPE="row">Extreme Obesity</TH>
<TD ALIGN="RIGHT">40 and Above</TD>
</TR>
</TABLE>
<table id="bmi" cellSpacing="0" cellPadding="0" width="200" summary="This table is used for layout purposes only." border="0">
<tr>
<td width="200" bgColor="#6f48b3" colSpan="3">
<table cellSpacing="0" cellPadding="0" width="209" summary="This table is used for layout purposes only." border="0">
<form name="bmi_input">
<tr>
<td bgColor="#6f48b3">
<img height="28" alt="Standard Measurements" src="../../img/bmi-e_01.gif" width="105" border="0"></td>
<td bgColor="#6f48b3">
<a href="http://www.nhlbisupport.com/bmi/bmi-m.htm">
<img height="28" alt="View Metric Measurements" src="../../img/bmi-e_02.gif" width="104" border="0"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="13" bgColor="#6f48b3">
<img height="1" alt=" " src="../../img/spacer.gif" width="12" border="0"></td>
<td width="184" bgColor="#6f48b3">
<table cellSpacing="0" cellPadding="2" width="185" bgColor="#ffffff" summary="This table is used for layout purposes only." border="0">
<tr>
<td width="95">
<span style="FONT-SIZE: 10pt"><b>Your
Height:</b></span></td>
<td align="left" width="45">
<input id="height_feet" size="3" name="htf"></td>
<td align="left" width="50">
<input id="height_inches" size="3" name="hti"></td>
</tr>
<tr>
<td width="95">
<span style="FONT-SIZE: 10pt">&nbsp;</span></td>
<td align="left" width="45"><b>
<span style="FONT-SIZE: 10pt">
<label for="height_feet">(feet)</label></span></b></td>
<td align="left" width="53"><b>
<label for="height_inches">
<span style="FONT-SIZE: 10pt">(inches)</span></label></b></td>
</tr>
<tr>
<td colSpan="3">
<img height="6" alt=" " src="../../img/spacer.gif" width="1" border="0"></td>
</tr>
<tr>
<td width="95">
<span style="FONT-SIZE: 10pt"><b>
<label for="your_weight">Your Weight:</label></b></span></td>
<td align="left" width="45">
<input id="your_weight" size="3" name="wt"></td>
<td align="left" width="53">&nbsp;</td>
</tr>
<tr>
<td width="95">
<span style="FONT-SIZE: 10pt">&nbsp;</span></td>
<td vAlign="top" align="left"><b>
<span style="FONT-SIZE: 10pt">(pounds)</span></b></td>
</tr>
<tr>
<td align="middle" colSpan="3">
<input onclick="self.compute();" type="button" value="Compute BMI"></td>
</tr>
<tr>
<td align="middle" colSpan="3">
<table cellSpacing="0" cellPadding="0" width="150" summary="This table is used for layout purposes only." border="0">
<tr>
<td style="background-image: url('../../img/oeilogo.gif'); background-repeat: no-repeat; background-position: center top" align="left" width="122" colSpan="3" height="201">
<div style="MARGIN-TOP: -3px; MARGIN-LEFT: 45px">
<label for="yourbmi">
<font style="FONT-SIZE: xx-small; FONT-FAMILY: Arial, helvetica, sans-serif">
Your BMI:</font></label><br>
<input id="yourbmi" style="TEXT-ALIGN: center" size="4" name="bmi"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="13" bgColor="#6f48b3">
<img height="1" alt=" " src="../../img/spacer.gif" width="12" border="0"></td>
</tr>
<tr>
<td align="middle" width="100%" bgColor="#6f48b3" colSpan="3">
&nbsp;</td>
</tr>
</form>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p><br />
<p>The BMI calculator may not work in all browsers. If it does not work in yours you can refer to our
<a href="body_mass_index_tables.html">BMI tables</a>.</p>
<h2>Limitations of the BMI</h2>
<p>BMI can be a good indicator of total body fat. Total body fat is directly related to
your risk for certain diseases and even death. The BMI score is valid for adult men and women.
The body mass index does have
some limits though. </p>
<p>The limitations are:</p>
<ul>
<li>Do not use the body mass index to estimate total body fat for children
or teens.</li>
<li>The body mass index may overestimate body fat in anyone who has a
muscular build.</li>
<li>The body mass index may underestimate body fat in the elderly or others who
have lost muscle mass.</li>
</ul>
<p>Determine your waist circumference by placing a measuring tape snugly around your waist. It is a good indicator of your abdominal fat which is another predictor for developing risk factors for
<a href="../../health_nutrition_articles/diseases_and_conditions/coronary_artery_disease.htm">heart disease</a>,
<a href="../../diseases_conditions/diabetes.html">diabetes</a> and other diseases. This risk increases with a waist measurement of over 40 inches in men and over 35 inches in women.</p>
</div>
<div class="meta">
</div>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<ul>
<li>
<h2>Health Information Articles</h2>
<ul>
<li><a href="http://www.4yourbody.info">Beauty</a></li>
<li><a href="http://www.4yourbody.info">Diseases and Conditions</a></li>
<li><a href="http://www.4yourbody.info">General Health</a></li>
<li><a href="http://www.4yourbody.info">Mental Health</a></li>
<li><a href="http://www.4yourbody.info">Nutrition</a></li>
<li><a href="http://www.4yourbody.info">Senior Health</a></li>
<li><a href="http://www.4yourbody.info">Supplements</a></li>
<li><a href="http://www.4yourbody.info">Weight Loss</a></li>
</ul>
</li>
<li>
<h2>Nutritional &amp; Health Books</h2>
<!--webbot bot="Include" u-include="../../includes/books/health_default.htm" tag="BODY" --></li>
<li>
<h2>Give the Gift of Health</h2>
<!--webbot bot="Include" u-include="../../includes/general_health/donate.htm" tag="BODY" --></li>
<li>
<h2>Clean, Healthy Air &amp; Water</h2>
<!--webbot bot="Include" u-include="../../includes/ads/125x125_environment.htm" tag="BODY" --></li>
<li>
<h2>Amazon Health</h2>
<!--webbot bot="Include" u-include="../../includes/ads/125x125_amazon.htm" tag="BODY" --></li>
<li>
<h2>Related Health Links</h2>
<div class="ads">
<script type="text/javascript"><!--
google_ad_client = "pub-4855258898460788";
/* 160x90, created 12/21/08 */
google_ad_slot = "9002037867";
google_ad_width = 160;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</li>
<li>
<h2>Spread the Health</h2>
<!--webbot bot="Include" u-include="../../includes/general_health/add_2.htm" tag="BODY" --></li>
</ul>
</div>
<!-- end #sidebar -->
<div style="clear: both; height: 40px;">&nbsp;</div>
</div>
<!-- end #page -->
</div>
</div>
</div>
<!-- end #bg3 -->
<!--webbot bot="Include" u-include="../../includes/general_health/copyright.htm" tag="BODY" --><!-- end #footer -->
</body>
</html>

drhowarddrfine
05-01-2009, 08:33 PM
271 HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2F4yourbody.info%2Ftest%2Fdiet_weight_loss%2Fbmi%2F2)

Script Idgit
05-01-2009, 08:34 PM
How is this a helpful reply?!? I know there are errors in the HTML, mostly fom the adsense and amazon ads, but they are not what's affecting the layout - thanks anyway.

ajhauser
05-01-2009, 09:28 PM
In terms of valid code, if you fix the first error, many times it will also "fix" several additional errors after the first. You can't come in here and expect people to dive through your code without validating though.

If the ads are the problem, then create this same layout on a seperate page and see if you get the same display errors without them. If you do, then validate that page - THEN if you have valid code, no ads and the page is still displaying incorrectly, you have already whittled down the possible problems, and could probably get some help here.

Rowsdower!
05-01-2009, 10:44 PM
There are a couple of easy band-aid solutions here, but ultimately you should take note of the posts above. In the meantime I'll only hint at using margin:0 auto; and align="center" separately in two key locations. This might pooch the whole thing in IE though so really you're better off just fixing the page.

abduraooft
05-02-2009, 08:42 AM
I am attempting to integrate a BMI calculator into my site. When I put it in a page by itself it displays properly. See here. But, when I put it in the actual page I want it in, the layout breaks in Firefox, but not in IE. See here. Have you solved it? I get 404 Not Found for both links

Script Idgit
05-02-2009, 01:11 PM
No - not yet. I have bigger problems now. I was up all night working on my site and published the new version before it was ready. Now I'm trying to stay up to get as much done with the publishing part as I can. If someone can remove this post for now that would be okay. If I can't get it fixed after all the publishing is done I'll come back. It will be about a week or two until I get it done. Thanks for checking it out though. I'm sure y'all will see more of me cuz I ain't got it all figured out yet.

Until then - God bless

Script Idgit
06-08-2009, 06:44 PM
Please mark resolved.

Apostropartheid
06-08-2009, 07:19 PM
You're perfectly welcome to do it yourself. Click "Edit", press "Go Advanced" and edit the "No prefix" field.

Script Idgit
06-09-2009, 02:42 AM
If the edit button were available I would have.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum