align nested tables in IE - javascript

This is my first question here so let me know if i have not understood the site ethos ;)
I have written a html page for showing and hiding nested tables.
I would like to get the columns to align correctly. I have got close by setting the columns to have a specific width
in both IE and firefox the columns are a few pixels out... - how can i fix this?
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == '') {
e.style.display = 'block';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
</head>
<body>
<div id="root">
<table border="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="200">
<p>itemA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAAA">
<table border="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="200">
<p>itemAA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAA">
<table border="1" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="200">
<p>itemAAA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td width="200">
<p>itemB</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
any ideas? is there a better option to acheive the same functionality?
David


Ok, I think the problem is in the fact that you try to use a static value for the column width (you specify 200px) and than you assign a width of 100% to the table.
You ask two very different things to the browser I think. It have to stretch the widths in some manner.
The other problem is in the definition of the borders, paddings and margins: you don't exactly know (or you don't take into account) how the browser draws the borders/paddings/margins, so you can't specify precise values.
if you want to transform your table in a static one, you can use something like this:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == '') {
e.style.display = 'block';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style>
table{
background-color: black;
}
td{
background-color: white;
margin: 0;
padding: 2px;
}
</style>
</head>
<body>
<div id="root">
<table cellspacing="2">
<tbody>
<tr>
<td width="200">
<p>itemA</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAAA">
<table cellspacing="2">
<tbody>
<tr>
<td width="196">
<p>itemAA</p>
</td>
<td width="200">Feild2</td>
<td width="196">Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAA">
<table cellspacing="2">
<tbody>
<tr>
<td width="192">
<p>itemAAA</p>
</td>
<td width="200">Feild2</td>
<td width="192">Feild3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td width="200">
<p>itemB</p>
</td>
<td width="200">Feild2</td>
<td width="200">Feild3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
As you can see, I deleted the widths from the tables and I put som css in the cose. The widths of the columns are exactly calculated to take in account borders, margins and paddings.


Try this out. The interesting bit is the css border-collapse property. Also notice that deprecated html attributes (width, etc.) have been removed in favor of css rules.
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>item List</title>
<style>
table.grid { padding:0; margin:0; width:100%; border-collapse:collapse; }
table.grid td { padding:0; margin:0; outline:1px outset silver; width:33% }
table.grid div { padding:0; margin:0; }
</style>
<script type="text/javascript">
function toggle_visibility (id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
</script>
</head>
<body>
<div id="root">
<table class="grid">
<tbody>
<tr>
<td>
<p>itemA</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAAA">
<table class="grid">
<tbody>
<tr>
<td>
<p>itemAA</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
<tr>
<td colspan="3">
<div id="itemAA">
<table class="grid">
<tbody>
<tr>
<td>
<p>itemAAA</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<p>itemB</p>
</td>
<td>Feild2</td>
<td>Feild3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Related

how can i add space between table border and text using html only?

HI can someone pls help me I am new to code and this is my college assignment in which we are not supposed to use CSS, only using HTML how can I add space between text and table-border.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" CELLSPACING="4" CELLPADDING="3">
<TR BGCOLOR="BLUE">
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>First Name</u>
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>Last Name</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD> <u>Keith</u>
<TD><u>Richards</u>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u>
<TD><u>Jagger</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Bill</u>
<TD><u>Wyman</u>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Ron</u>
<TD><u>Wood</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Charlie</u>
<TD><u>Watts</u>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u>
<TD><u>Taylor</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Brian</u>
<TD><u>Jones</u>
</TR>
</TABLE>
</BODY>
</HTML>
my code-

<TD> <u>&nbspKeith</u> </TD>
Try using &nbsp should give you the desired result.

To add space between cell content and cell wall you can use the cellpadding attribute in table tag.
The HTML cellpadding Attribute is used to specify the space
between the cell content and cell wall. The cellpadding attribute is
set in terms of pixels.
Refer: cellpadding
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="5" CELLSPACING="4" CELLPADDING="10">
<TR BGCOLOR="BLUE">
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>First Name</u>
<TH ALIGN="CENTER" HEIGHT="20">
<FONT SIZE="4" COLOR="WHITE"> <u>Last Name</u>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Keith</u></TD>
<TD><u>Richards</u></TD>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u></TD>
<TD><u>Jagger</u></TD>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Bill</u></TD>
<TD><u>Wyman</u></TD>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Ron</u></TD>
<TD><u>Wood</u></TD>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Charlie</u></TD>
<TD><u>Watts</u></TD>
</TR>
<TR BGCOLOR="ORANGE">
<TD><u>Mick</u></TD>
<TD><u>Taylor</u></TD>
</TR>
<TR BGCOLOR="YELLOW">
<TD><u>Brian</u></TD>
<TD><u>Jones</u></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Clearing/Emptying the previous TD value when a new option value is selected in the select box

I really need your help, how can the existing code be modified below such that upon selecting another option value from the select box, the previous <td> text value in the table should be cleared.
Here is an pic of the problem:
Here is the HTML Markup and code in question:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
* {
font-family: Arial;
font-size: 9pt;
}
</style>
<script type="text/javascript">
window.onload = function() {
$(document).on('click', '.ufield', function() {
if($(this).find('select').length == 0) {
$(this).append("<select><option value=''></option><option value='ADMIN'>ADMIN</option><option value='USER'>USER</option></select>");
}
});
$(document).on('change', '.ufield select', function(){
var myValue = $(this).val();
var $parent = $(this).parent();
$(this).remove();
$parent.append(myValue);
});
}
</script>
</head>
<body>
<table style="width: 100%">
<tr>
<td>User ID:</td>
<td>JSMITH</td>
<td>Branch:</td>
<td>TESTA</td>
</tr>
<tr>
<td>Access:</td>
<td class="ufield" id="access"></td>
<td>Floor:</td>
<td>12</td>
</tr>
<tr>
<td>Account Status:</td>
<td>active</td>
<td>Office:</td>
<td>D5656</td>
</tr>
<tr>
<td>Last Login:</td>
<td>30/08/2016 4:16 PM</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Firstname:</td>
<td>John</td>
<td>Address:</td>
<td>175 Yahoo Lane</td>
</tr>
<tr>
<td>Lastname:</td>
<td>Smith</td>
<td>Province:</td>
<td>Ontario</td>
</tr>
<tr>
<td>Telephone:</td>
<td>123-456-7891</td>
<td>City:</td>
<td>Niagra Falls</td>
</tr>
<tr>
<td>Fax:</td>
<td>613-990-1301</td>
<td>Country:</td>
<td>Canada</td>
</tr>
<tr>
<td>E-mail:</td>
<td>john_smith#yahoo.ca</td>
<td>Postal Code:</td>
<td>90210</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

$(this).remove(); ------> $(this).closest("td").prev().empty();

This did the trick, modify the following section:
$(document).on('click', '.ufield', function() {
if ($(this).html()) {
$(this).empty()
}
$(this).append("<select><option value=''></option><option value='ADMIN'>ADMIN</option><option value='USER'>USER</option></select>");
//if($(this).find('select').length == 0) {}
});

Function that tests if DIV is showing only works the second time

This problem is so specific I am not sure any search would find a similar answer, so I am asking as though it is a new problem.
The expected behavior:
Click button 'mySol' makes div My solution visible
Click button 'YASS' makes div My solution hidden and div YASS solution visible
Click button 'Tak' makes div YASS solution hidden and div Takaken solution visible
This works as expected, only after the first time you click all three buttons. The first time through does the following (and is repeatable by refreshing the page):
Click button 'mySol' makes div My solution visible
Click button 'YASS' leaves div My solution visible and makes div YASS solution visible
Click button 'Tak' leaves divs My solution and YASS solution visible and makes div Takaken solution visible
Click button 'mySol' leaves divs YASS solution and Takaken solution visible and makes div My solution hidden
Click button 'YASS' leaves div Takaken solution visible and makes div YASS solution hidden
Click button 'Tak' makes div Takaken solution hidden
These can be done in any order with the same result. After the last div is hidden again the function works properly and one div is visible at a time. I do not understand what is causing this problem, and need some help correcting it.
Any help is appreciated.
Here is the code:
function visInvis(id) {
var a = document.getElementById('mySol');
var b = document.getElementById('YASS');
var c = document.getElementById('Tak');
var e = document.getElementById(id);
if(e == a && e.style.display == 'none') {
b.style.display = 'none';
c.style.display = 'none';
}
if(e == b && e.style.display == 'none') {
a.style.display = 'none';
c.style.display = 'none';
}
if(e == c && e.style.display == 'none') {
a.style.display = 'none';
b.style.display = 'none';
}
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
#mySol { display: none; }
#YASS { display: none; }
#Tak { display: none; }
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Sample Solution Page</TITLE>
</HEAD>
<BODY>
<TABLE align="left" valign="top" width="16%">
<TR><TH align="left" colspan="2">Puzzle Name</TH></TR>
<TR><TD>Width:</TD><TH width="50%">0</TH></TR>
<TR><TD>Height:</TD><TH width="50%">0</TH></TR>
<TR><TD>Boxes/Goals:</TD><TH width="50%">0</TH></TR>
<TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution"></TD></TR>
<TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
<TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution"></TD></TR>
<TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
<TR><TD colspan="2"><INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution"></TD></TR>
<TR><TD>Moves/Pushes:</TD><TH width="50%">0/0</TH></TR>
</TABLE>
<TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
<CAPTION align="top"><B>Solution</B></CAPTION>
<TR><TD valign="top">
<DIV id=mySol>My Solution</DIV>
<DIV id=YASS>YASS Solution</DIV>
<DIV id=Tak>Takaken Solution</DIV>
</TD></TR>
</TABLE>
</BODY>
</HTML>

e.style.display only contains styles that are set with inline style="display: xxx" attributes, not styles that are inherited from CSS rules. That's why your code doesn't work the first time.
Use getComputedStyle(e).getPropertyValue('display').
function visInvis(id) {
var a = document.getElementById('mySol');
var b = document.getElementById('YASS');
var c = document.getElementById('Tak');
var e = document.getElementById(id);
var eStyle = getComputedStyle(e).getPropertyValue('display');
if (eStyle == 'none') {
if (e == a) {
b.style.display = 'none';
c.style.display = 'none';
} else if (e == b) {
a.style.display = 'none';
c.style.display = 'none';
} else if (e == c) {
a.style.display = 'none';
b.style.display = 'none';
}
e.style.display = 'block';
} else {
e.style.display = 'none';
}
}
#mySol {
display: none;
}
#YASS {
display: none;
}
#Tak {
display: none;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Sample Solution Page</TITLE>
</HEAD>
<BODY>
<TABLE align="left" valign="top" width="16%">
<TR>
<TH align="left" colspan="2">Puzzle Name</TH>
</TR>
<TR>
<TD>Width:</TD>
<TH width="50%">0</TH>
</TR>
<TR>
<TD>Height:</TD>
<TH width="50%">0</TH>
</TR>
<TR>
<TD>Boxes/Goals:</TD>
<TH width="50%">0</TH>
</TR>
<TR>
<TD colspan="2">
<INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution">
</TD>
</TR>
<TR>
<TD>Moves/Pushes:</TD>
<TH width="50%">0/0</TH>
</TR>
<TR>
<TD colspan="2">
<INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution">
</TD>
</TR>
<TR>
<TD>Moves/Pushes:</TD>
<TH width="50%">0/0</TH>
</TR>
<TR>
<TD colspan="2">
<INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution">
</TD>
</TR>
<TR>
<TD>Moves/Pushes:</TD>
<TH width="50%">0/0</TH>
</TR>
</TABLE>
<TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
<CAPTION align="top">
<B>Solution</B>
</CAPTION>
<TR>
<TD valign="top">
<DIV id=mySol>My Solution</DIV>
<DIV id=YASS>YASS Solution</DIV>
<DIV id=Tak>Takaken Solution</DIV>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The following code may be help you.
function visInvis(id) {
var a = document.getElementById('mySol');
var b = document.getElementById('YASS');
var c = document.getElementById('Tak');
var e = document.getElementById(id);
var eStyle = getComputedStyle(e).getPropertyValue('display');
var display = eStyle == 'none' ? 'block' : 'none';
a.style.display = b.style.display = c.style.display = 'none'
e.style.display = display;
}

It seems that the browser does not set the display to none but to empty string ''. Thus the function could be fixed as below:
function visInvis(id) {
var e = document.getElementById(id);
var eStyle = e.style.display;
// all off
document.getElementById('mySol').style.display = '';
document.getElementById('YASS').style.display = '';
document.getElementById('Tak').style.display = '';
// set style to oposite of the original value
e.style.display = (eStyle == 'block') ? '' : 'block';
}
#mySol {
display: none;
}
#YASS {
display: none;
}
#Tak {
display: none;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Sample Solution Page</TITLE>
</HEAD>
<BODY>
<TABLE align="left" valign="top" width="16%">
<TR>
<TH align="left" colspan="2">Puzzle Name</TH>
</TR>
<TR>
<TD>Width:</TD>
<TH width="50%">0</TH>
</TR>
<TR>
<TD>Height:</TD>
<TH width="50%">0</TH>
</TR>
<TR>
<TD>Boxes/Goals:</TD>
<TH width="50%">0</TH>
</TR>
<TR>
<TD colspan="2">
<INPUT type="button" style="font-weight: bold;" onClick="visInvis('mySol');" value="My Solution">
</TD>
</TR>
<TR>
<TD>Moves/Pushes:</TD>
<TH width="50%">0/0</TH>
</TR>
<TR>
<TD colspan="2">
<INPUT type="button" style="font-weight: bold;" onClick="visInvis('YASS');" value="YASS Solution">
</TD>
</TR>
<TR>
<TD>Moves/Pushes:</TD>
<TH width="50%">0/0</TH>
</TR>
<TR>
<TD colspan="2">
<INPUT type="button" style="font-weight: bold;" onClick="visInvis('Tak');" value="Takaken Solution">
</TD>
</TR>
<TR>
<TD>Moves/Pushes:</TD>
<TH width="50%">0/0</TH>
</TR>
</TABLE>
<TABLE align="right" valign="top" border="1" width="65%" height="600" cellspacing=0>
<CAPTION align="top">
<B>Solution</B>
</CAPTION>
<TR>
<TD valign="top">
<DIV id=mySol>My Solution</DIV>
<DIV id=YASS>YASS Solution</DIV>
<DIV id=Tak>Takaken Solution</DIV>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Save current BGColor of the Cell into XML

I need to save the value of Bgcolor of column 1 from my table and have it available once i've refreshed the page. The background color on column1 will alter from Red or green once clicked.
This is done in SharePoint so I'm thinking that the simplest way is to save the background color value into an XML file which is saved in SharePoint as well.
I'm new to XML and I don't have access to do server side database like PHP or ASP.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<table border="3" width="100%" cellspacing="0" style="text-align: center;">
<tbody>
<tr>
<td colspan="3" style="width: 595px;">
<strong>Bridges</strong></td>
</tr>
<tr>
<td>Bridge</td>
<td>Host Access Code (0001)</td>
<td>Participant Code</td>
</tr>
<tr>
<td onclick="myFunction(this)">1</td>
<td>45645645</td>
<td>45645644</td>
</tr>
<tr>
<td onclick="myFunction(this)">2</td>
<td>45645645</td>
<td>45645646</td>
</tr>
<tr>
<td onclick="myFunction(this)">3</td>
<td>45645666</td>
<td>45645645</td>
</tr>
<tr>
<td onclick="myFunction(this)">4</td>
<td>45645645</td>
<td>45645666</td>
</tr>
<tr>
<td onclick="myFunction(this)">5</td>
<td>456456456</td>
<td>456456456</td>
</tr>
<tr>
<td onclick="myFunction(this)">6</td>
<td>45645666</td>
<td>45645646</td>
</tr>
<tr>
<td onclick="myFunction(this)">7</td>
<td>45645645</td>
<td>45645666</td>
</tr>
<tr>
<td onclick="myFunction(this)">8</td>
<td>45645645</td>
<td>45645645</td>
</tr>
<tr>
<td onclick="myFunction(this)">9</td>
<td>45645645</td>
<td>45645645</td>
</tr>
<tr>
<td onclick="myFunction(this)">10</td>
<td>45645645</td>
<td>45645664</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function myFunction(x) {
if (x.bgColor == "red"){
x.bgColor = "green";
} else {
x.bgColor = "red";
}
}
</script>
</body>
</html>

Search Results page destroys background

Here is the original site. usahvacsupply.com Once you search an item, the search results take over the whole page and kill the background. I'm not sure how to control the overflow. The part of the site where the overflow goes haywire is http://www.usahvacsupply.com/servlet/Categories. I'll post more code if needed. The code on the bottom corresponds with the http://www.usahvacsupply.com/servlet/Categories page. any help would be appreciated.
<table id="body" width="960" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="100%">
<script type="text/javascript">
if (!createBookmark) {
var createBookmark = function() {
if (window.sidebar) // Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title, location.href, '');
else if (window.external) // IE Favorite
window.external.AddFavorite(location.href, document.title);
else // all others
alert("Please press CTRL+D to bookmark this page.");
};
}
</script>
<table id="layout" class="panel-layout" width="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
<tbody>
<tr>
<td id="p1" valign="top">
<script type="text/javascript">
var ProStores;
if (!ProStores)
ProStores = {};
ProStores.PageLink = function(link) {
var strParams = 's=' + link.getAttribute('page');
var strThis = location.href;
if (strThis.indexOf('?') > -1) {
if (strThis.search(/s=[0-9]+/) > -1)
link.href = strThis.replace(/s=[0-9]+/, strParams);
else
link.href = strThis + '&' + strParams;
}
else
link.href = strThis + '?' + strParams;
};
</script>
<link href="/servlet/0-3-30d-727500-com.prostores.panel.List%7Estyle.css/Asset" title="style" type="text/css" rel="stylesheet">
<style type="text/css">
<table id="cataloglist.31" class="list-boundary" width="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
<tbody>
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" rules="none">
<tbody>
<tr>
<td valign="top" align="left" colspan="1">
<h1 align="left">Search Results</h1>
<div class="" align="left" style="padding:2px">
<p>
Found
<b>1000</b>
product(s) for
<b>All</b>
(1-25 of 1000)
</p>
</div>
</td>
</tr>
<tr>
<td valign="middle" colspan="1">
<div class="product-list-container">
<div class="top">
<div class="right">
<div class="left"></div>
</div>
</div>
<div class="titlebar group-title">
<b> Breakers | Bryant Carrier Payne Day&Night </b>
</div>
<div class="panel-content">
<center>
<table class="" width="100%" cellspacing="2" cellpadding="0" border="0">
<tbody>
<tr>
<td colspan="1" style="height:1px"></td>
</tr>
<tr>
<td class="item-cell" width="100%" valign="bottom" height="100%" style="padding:8px">
<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0" rules="none">
</td>
</tr>
<tr>
</tbody>
</table>
</center>
</div>
<div class="bottom">
</div>
</td>
</tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

I can see that your problem isn't occuring anymore, but when you search for a product that doesn't exist. Your div.footerBorder gets floated over the background to the left. Fix that by applying:
margin-left: 10px;
To your
/servlet/0-0-30d-13e0e1158d0-legacycss/Asset
Inside your ".footerBorder" on row 240, replace the whole rule to:
.footerBorder {
width: 960px;
min-height: 160px;
background: url("/images/store_version1/footer.gif") no-repeat;
margin-left: 10px;
}
Edit:
If that conflicts on other pages, let me know and I'll help you with it. Cheers!

Categories

Resources