PDA

View Full Version : Backgrounds and Tables


aargus07
11-11-2007, 03:53 AM
I have a table with a background attached with a stylesheet.
I've embedded a second table withi the first, but it too
assumes a seperate but idenical background of the parent
table. How can I remove the background on the embedded
table?

DJD

domedia
11-11-2007, 02:11 PM
table#yourid {background: url(image.jpg)}
table#yourid table {background: none}

Let me know if this make sense or not.

aargus07
11-11-2007, 04:46 PM
doMedia,

Thanks so much for the tip. It worked (partially) and here
is how; It did surpress the background in the embedded table
but in setting the parameters required beyond the background
removal, 1 of the following does not seem to want to co-operate;

Table no-repeats Embedded Table Surpression

Example: In the CSS sheet, based on your example I put;

table#10 {background-image: ;
background-image: url(image2/v3_def.jpg);
background-repeat: no-repeat;
};

table#11 table {
background-image: none;
};

( 10 is parent, 11 is embedded )

Although this has the embedded table background
removed and the no-repeat works on the parent
table, a seconf parent table shows up under the
intended parent table, slightly offset (thats how
I know it's there).

Having limited HTML skills, I suspect that a style
defined right in the HTML page itself might be
causing the effect of the dupped table/background,
but I am not sure. If you have a minute to look, I
would be happy to send you the code.

Thanks,

Dan

Cary
11-11-2007, 06:31 PM
Go ahead and post the code.

aargus07
11-11-2007, 06:47 PM
Below is the entire page. Use any graphic you have to replace
the v3_def.jp referenced. Content of back1.css is stated in
my previous message (ref table 10 table 11 lines). The
embedded table is #11 and the parent is #10.

Thanks

*****************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="file:///C|/Inetpub/wwwroot/nlaa/back1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style5 {
font-style: italic;
font-size: 24px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style9 {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
}
.style10 {
color: #000000;
font-family: MagistralC;
}
.style12 {font-size: 24px; font-family: "Monotype Corsiva";}
.style16 {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
}
.style20 {font-size: 12px}
.style24 {font-size: 9px}
.style29 {font-size: 10px}
.style34 {font-size: 18px}
.style37 {font-size: 12px; font-family: "Monotype Corsiva"; }
.style39 {font-family: "Times New Roman", Times, serif; font-size: 14px; }
.style13 {color: #2E2E67}
.style7 {color: #0000FF}
.style8 {color: #FFFFFF}
.style52 {
color: #102B85;
font-family: "Times New Roman", Times, serif;
font-size: 9;
}
.style54 {font-family: "Times New Roman", Times, serif}
.style55 {color: #000000; }
.style56 {
color: #0000FF;
font-family: "Times New Roman", Times, serif;
font-size: 9;
}
.style59 {font-family: "Times New Roman", Times, serif; font-size: 9; }
-->
</style>
</head>
<body>

<table width="840" height="1143" border="0" align="center" id="10" no-repeat>
<tr>
<th width="834" height="1139" align="left" valign="top" class="backImage" scope="col"><table width="755" border="0" align="center" background="image2/v3_def.jpg" id="10">
<tr>
<th height="79" colspan="3" scope="col"><div align="center"><span class="style9"><br />
<br />
<br />
</span></div></th>
<th width="461" class="style5" scope="col"><div align="center"><br />
<span class="style10"><span class="style34">Next Level Athletic Advisors</span><br />
</span></div></th>
<th width="122" scope="col"><div align="center"><br />
</div></th>
</tr>
<tr>
<th height="31" colspan="3" scope="col"><div align="center"><span class="style16">nextlevelaa.org</span></div></th>
<th class="style16" scope="col"><div align="center"></div></th>
<th scope="col"><div align="left"><span class="style9">Grand Rapids, MI </span></div></th>
</tr>
<tr>
<td height="31" colspan="5"><div align="center">Contact Us </div> </td>
</tr>
<tr>
<td width="1">&nbsp;</td>
<td width="2" height="174"><div align="right"><span class="style24">.</span><br />
</div></td>
<td width="147" align="left" valign="top" class="style24"><p align="left" class="style20"><span class="style29"><br />
</span></p>
<p align="left" class="style20">&nbsp;</p> </td>
<td valign="top" class="style12"><table width="461" height="621" border="0" id="11" background: none>

<tr>
<td height="47" colspan="2"><p align="center" class="style52"> <span class="style7 style8">
<!--webbot
bot="SaveResults" endspan i-checksum="43374" -->
</span> <span class="style17 style17 style54 style20 style55">If you would like more information about NLAA or are interested in participating <br />
either as a student or benefactor, please fill out the form below and Submit it to us. </span></p> </td>
</tr>
<tr>
<td width="18%" height="23" class="style7"><div align="right" class="style54 style20 style55">Name:</div></td>
<td width="82%" height="23"><span class="style59">
<!--mstheme-->
<font color="#000000">
<input name="PersonName" type="text" id="PersonName" tabindex="2" size="50" maxlength="50" />
</font>
<!--mstheme-->
</span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7"><div align="right" class="style54 style20 style55">Company:</div></td>
<td height="23"><span class="style59"><font color="#000000">
<input type="text" size="50" maxlength="50" name="CompanyName2" tabindex="2" />
</font></span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7"><div align="right" class="style54 style20 style55">Address 1: </div></td>
<td height="23"><span class="style59">
<!--mstheme-->
<font color="#000000">
<input type="text" size="50" maxlength="50" name="Address1" tabindex="3" />
</font>
<!--mstheme-->
</span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7"><div align="right" class="style54 style20 style55">Address 2: </div></td>
<td height="23"><span class="style59">
<!--mstheme-->
<font color="#000000">
<input type="text" size="50" maxlength="50" name="Address3" tabindex="4" />
</font>
<!--mstheme-->
</span></td>
</tr>
<tr>
<td height="27" class="style7"><div align="right" class="style54 style20 style55">City:</div></td>
<td height="27"><span class="style59"><font color="#000000">
<input type="text" size="21" maxlength="256" name="City" tabindex="5" />
</font></span></td>
</tr>
<tr>
<td height="27" class="style7"><div align="right" class="style54 style20 style55">State:</div></td>
<td height="27"><span class="style59"><font color="#000000">
<input type="text" size="4" maxlength="256" name="State" tabindex="6" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style7"><div align="right" class="style54 style20 style55">Zip:</div></td>
<td height="23"><span class="style59"><font color="#000000">
<input type="text" size="20" maxlength="256" name="ZipCode" tabindex="7" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style7"><div align="right" class="style54 style20 style55">Phone:</div></td>
<td height="23"><span class="style59"><font color="#000000">
<input name="Phone" type="text" id="Phone" tabindex="8" size="20" maxlength="256" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style7"><div align="right" class="style54 style20 style55">Fax:</div></td>
<td height="23"><span class="style59"><font color="#000000">
<input name="Fax" type="text" id="Fax2" tabindex="8" size="21" maxlength="256" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style54 style20 style55"><div align="right">Repond Via: </div></td>
<td height="23"><span class="style59">
<!form name="form1" method="post" action="">
<label>
<select name="respBy" id="respBy">
<option>Phone</option>
<option>E-Mail</option>
<option>Fax</option>
</select>
</label>
<!/form>
</span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7"><div align="right" class="style55 style54 style20">E-Mail:</div></td>
<td height="23"><span class="style59">
<!--mstheme-->

<!--mstheme-->

<!--mstheme-->
<span class="style55"><font color="#000000"><font color="#000000"> <font color="#000000"><font color="#000000">
<input name="mailAddress" type="text" id="mailAddress" tabindex="9" size="50" maxlength="50" />
</font></font> </font></font></span>
<!--mstheme-->
</span></td>
</tr>
<tr>
<td height="9" colspan="2" class="style7 style13"><div align="center" class="style16">Project or Needs Description</div></td>
</tr>
<tr>
<td height="274" colspan="2" valign="middle" class="style56"><!--mstheme-->
<div align="center" class="smaller">
<textarea name="textarea" cols="60" rows="15" wrap="physical"></textarea>
</div></td>
</tr>
</table>
<p class="style39"><br />
</p>
<p class="style39">&nbsp;</p>
<p class="style39">&nbsp;</p>
<p><br />
<br />
</p> </td>
<td valign="top" class="style12"><p class="style16">&nbsp;</p> </td>
</tr>
<tr>
<td>&nbsp;</td>
<td height="1197">&nbsp;</td>
<td align="left" valign="top" class="style24">&nbsp;</td>
<td valign="top" class="style12"><p align="left" class="style16">&nbsp;</p>
<p align="left" class="style20"></p></td>
<td valign="top" class="style37">&nbsp;</td>
</tr>
</table></th>
</tr>
</table>
</body>
</html>

Cary
11-12-2007, 06:38 AM
Several changes had to be made because your page wasn't validating.

The modified code is in the following post because it wouldn't fit in this one.

I changed id="10" to id="table10" because IDs can't start with letters. You can only use each unique ID once on a page, but you had "10" twice. I don't know which one you wished to have the background on, but I removed one and changed the other to "table10". All inline background stuff was removed, and an ID for table "11" wasn't necessary.

I removed the spans from around your form because that's not allowed, and I transferred the styling from those spans to the form itself.

Styling like this didn't validate:

.style59 {
font: 9 "Times New Roman", Times, serif;
}

A valid font size wasn't given. I changed the styling from "9" to "small". You may have wanted a 9px font, but that's way too small for most people. Using "small" instead of a pixel size also allows IE 6 users to increase font size if necessary. Pixel sizes don't give them that freedom.

Also, the "wrap" and "height" attributes weren't valid. I removed the wrap attribute and changed the height attributes into styling.

Cary
11-12-2007, 06:49 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#table10 {
background: url(image2/v3_def.jpg) no-repeat;
}

#table10 table {
background: #FFF;
}

.style5 {
font: italic bold 24px Verdana, Arial, Helvetica, sans-serif;
}

.style9 {
font: bold 12px "Times New Roman", Times, serif;
}

.style10 {
color: #000000;
font-family: MagistralC;
}

.style12 {
font: 24px "Monotype Corsiva";
}

.style16 {
font: 12px "Times New Roman", Times, serif;
}

.style20 {
font-size: 12px;
}

.style24 {
font-size: 9px;
}

.style29 {
font-size: 10px;
}

.style34 {
font-size: 18px;
}

.style37 {
font: 12px "Monotype Corsiva";
}

.style39 {
font: 14px "Times New Roman", Times, serif;
}

.style13 {
color: #2E2E67;
}

.style7 {
color: #0000FF;
}

.style8 {
color: #FFFFFF;
}

.style52 {
color: #102B85;
font: small "Times New Roman", Times, serif;
}

.style54 {
font-family: "Times New Roman", Times, serif;
}

.style55 {
color: #000000;
}

.style56 {
color: #0000FF;
font: small "Times New Roman", Times, serif;
}

.style59 {
font: small "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<table style="height:1143px;" width="840" border="0" align="center">
<tr>
<th width="834" height="1139" align="left" valign="top" class="backImage" scope="col">
<table width="755" border="0" align="center" id="table10">
<tr>
<th height="79" colspan="3" scope="col">
<div align="center"><span class="style9"><br />
<br />
<br />
</span></div>
</th>
<th width="461" class="style5" scope="col">
<div align="center"><br />
<span class="style10"><span class="style34">Next Level Athletic Advisors</span><br />
</span></div>
</th>
<th width="122" scope="col">
<div align="center"><br />
</div>
</th>
</tr>
<tr>
<th height="31" colspan="3" scope="col">
<div align="center"><span class="style16">nextlevelaa.org</span></div>
</th>
<th class="style16" scope="col">
<div align="center"></div>
</th>
<th scope="col">
<div align="left"><span class="style9">Grand Rapids, MI </span></div>
</th>
</tr>
<tr>
<td height="31" colspan="5">
<div align="center">Contact Us </div>
</td>
</tr>
<tr>
<td width="1">&nbsp;</td>
<td width="2" height="174">
<div align="right"><span class="style24">.</span><br />
</div>
</td>
<td width="147" align="left" valign="top" class="style24">
<p align="left" class="style20"><span class="style29"><br />
</span></p>
<p align="left" class="style20">&nbsp;</p>
</td>
<td valign="top" class="style12">
<table style="height:621px;" width="461" border="0">
<tr>
<td height="47" colspan="2">
<p align="center" class="style52"> <span class="style7 style8"> </span> <span class="style17 style17 style54 style20 style55">If you would like more information about NLAA or are interested in participating <br />
either as a student or benefactor, please fill out the form below and Submit it to us. </span></p>
</td>
</tr>
<tr>
<td width="18%" height="23" class="style7">
<div align="right" class="style54 style20 style55">Name:</div>
</td>
<td width="82%" height="23"><span class="style59"> <font color="#000000">
<input name="PersonName" type="text" id="PersonName" tabindex="2" size="50" maxlength="50" />
</font> </span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7">
<div align="right" class="style54 style20 style55">Company:</div>
</td>
<td height="23"><span class="style59"><font color="#000000">
<input type="text" size="50" maxlength="50" name="CompanyName2" tabindex="2" />
</font></span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7">
<div align="right" class="style54 style20 style55">Address 1: </div>
</td>
<td height="23"><span class="style59"> <font color="#000000">
<input type="text" size="50" maxlength="50" name="Address1" tabindex="3" />
</font> </span></td>
</tr>
<tr>
<td width="18%" height="23" class="style7">
<div align="right" class="style54 style20 style55">Address 2: </div>
</td>
<td height="23"><span class="style59"> <font color="#000000">
<input type="text" size="50" maxlength="50" name="Address3" tabindex="4" />
</font> </span></td>
</tr>
<tr>
<td height="27" class="style7">
<div align="right" class="style54 style20 style55">City:</div>
</td>
<td height="27"><span class="style59"><font color="#000000">
<input type="text" size="21" maxlength="256" name="City" tabindex="5" />
</font></span></td>
</tr>
<tr>
<td height="27" class="style7">
<div align="right" class="style54 style20 style55">State:</div>
</td>
<td height="27"><span class="style59"><font color="#000000">
<input type="text" size="4" maxlength="256" name="State" tabindex="6" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style7">
<div align="right" class="style54 style20 style55">Zip:</div>
</td>
<td height="23"><span class="style59"><font color="#000000">
<input type="text" size="20" maxlength="256" name="ZipCode" tabindex="7" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style7">
<div align="right" class="style54 style20 style55">Phone:</div>
</td>
<td height="23"><span class="style59"><font color="#000000">
<input name="Phone" type="text" id="Phone" tabindex="8" size="20" maxlength="256" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style7">
<div align="right" class="style54 style20 style55">Fax:</div>
</td>
<td height="23"><span class="style59"><font color="#000000">
<input name="Fax" type="text" id="Fax2" tabindex="8" size="21" maxlength="256" />
</font></span></td>
</tr>
<tr>
<td height="23" class="style54 style20 style55">
<div align="right">Repond Via: </div>
</td>
<td height="23">
<form action="" method="post" name="form1" class="style59" id="form1">
<label>
<select name="respBy" id="respBy">
<option>Phone</option>
<option>E-Mail</option>
<option>Fax</option>
</select>
</label>
</form>
</td>
</tr>
<tr>
<td width="18%" height="23" class="style7">
<div align="right" class="style55 style54 style20">E-Mail:</div>
</td>
<td height="23"><span class="style59"> <span class="style55"><font color="#000000"><font color="#000000"> <font color="#000000"><font color="#000000">
<input name="mailAddress" type="text" id="mailAddress" tabindex="9" size="50" maxlength="50" />
</font></font> </font></font></span> </span></td>
</tr>
<tr>
<td height="9" colspan="2" class="style7 style13">
<div align="center" class="style16">Project or Needs Description</div>
</td>
</tr>
<tr>
<td height="274" colspan="2" valign="middle" class="style56">
<!--mstheme-->
<div align="center" class="smaller">
<textarea name="textarea" cols="60" rows="15"></textarea>
</div>
</td>
</tr>
</table>
<p class="style39"><br />
</p>
<p class="style39">&nbsp;</p>
<p class="style39">&nbsp;</p>
<p><br />
<br />
</p>
</td>
<td valign="top" class="style12">
<p class="style16">&nbsp;</p>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td height="1197">&nbsp;</td>
<td align="left" valign="top" class="style24">&nbsp;</td>
<td valign="top" class="style12">
<p align="left" class="style16">&nbsp;</p>
<p align="left" class="style20"></p>
</td>
<td valign="top" class="style37">&nbsp;</td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>

domedia
11-12-2007, 03:57 PM
You didn't follow my example, the CSS id in the 2 CSS rules should be the same

aargus07
11-13-2007, 12:14 AM
Thanks Cary! I will try this out as soon as possible and let
you know how it goes. You assistance is greatly appreciated.

Dan