Table data does not display in correct row or column

RESOLVED INVALID

Status

()

--
major
RESOLVED INVALID
15 years ago
15 years ago

People

(Reporter: david_awerbuch, Assigned: bugs)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8a) Gecko/20040425 Firefox/0.8.0+
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8a) Gecko/20040425 Firefox/0.8.0+

Please review the HTML code below.  It works in IE 5 and 6, but does not work in
Firefox 0.8 and 0.9.   The tabular data (like my name, phone #, etc) does not
display in the correct columns, or even sometimes on the correct lines.

This is from a corporate phone directory website.

Thanks,
Dave A.

PS.  Is there a way I can attach a graphic screen shot of what I am actually
seeing on my browser?

=======================================================

<html>
<head>
<title>Search Result</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--


body {  background-image: url("images/tel_background_calyon.gif");
                background-repeat: repeat;
                margin-left: 0px;
                margin-top: 0px;
        }

span { font-family: "Arial";
          font-size: 9pt;
          }     

span.phonelastname {    width: 114px;
						margin-left: 90px;
                                        height: auto;
                                        text-align: left;
                                }

span.phonefirstname {   width: 115px;
                                                height: auto;
                                                text-align: left;
                                }

span.phonetele {        width: 120px;
                                        height: auto;
                                        text-align: center;
                                }

span.phonet{
	text-align: left;
	height: auto;
	width: 120px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
}

span.phonegroup {
	width: 280px;
	height: auto;
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
                                        
                                }
span.space {       width: 12px;
                                        height: auto;
                                        text-align: left;

                            }
a:link       { text-decoration: none }
a:visited    { text-decoration: none }
a:hover      { text-decoration: none }
-->
IMG.off {position: relative; left:86}
IMG.flag1 {position: absolute; top: 80; left:10}
IMG.flag2 {position: absolute; top: 110; left:10}
IMG.flag3 {position: absolute; top: 150; left:10}
</style>
<script LANGUAGE="JavaScript">
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version = "n3";
else if (browserName == "Microsoft Internet Explorer" && browserVer >= 4)
version = "n3";
else version = "n2";
if (version == "n3") {
   menu_01on = new Image(116, 25);
   menu_01on.src = "../../images/subs/menu/ob_on.gif";
   menu_01off = new Image(116, 25);
   menu_01off.src = "../../images/subs/menu/ob_off.gif";
   menu_02on = new Image(113, 25);
   menu_02on.src = "../../images/subs/menu/os_on.gif";
   menu_02off = new Image(113, 25);
   menu_02off.src = "../../images/subs/menu/os_off.gif";
   menu_03on = new Image(113, 25);
   menu_03on.src = "../../images/subs/menu/yl_on.gif";
   menu_03off = new Image(113, 25);
   menu_03off.src = "../../images/subs/menu/yl_off.gif";
   menu_04on = new Image(113, 25);
   menu_04on.src = "../../images/subs/menu/ni_on.gif";
   menu_04off = new Image(113, 25);
   menu_04off.src = "../../images/subs/menu/ni_off.gif"; 
   menu_05on = new Image(113, 25);
   menu_05on.src = "../../images/subs/menu/up_on.gif";
   menu_05off = new Image(113, 25);
   menu_05off.src = "../../images/subs/menu/up_off.gif";   
   menu_06on = new Image(113, 25);
   menu_06on.src = "../../images/subs/menu/sm_on.gif";
   menu_06off = new Image(113, 25);
   menu_06off.src = "../../images/subs/menu/sm_off.gif";  
   menu_07on = new Image(113, 25);
   menu_07on.src = "../../images/subs/menu/411_on.gif";
   menu_07off = new Image(113, 25);
   menu_07off.src = "../../images/subs/menu/411_off.gif";
   menu_08on = new Image(113, 25);
   menu_08on.src = "../../images/subs/menu/home_on.gif";
   menu_08off = new Image(113, 25);
   menu_08off.src = "../../images/subs/menu/home_off.gif";
}

function img_act(imgName) {
   if (version == "n3") {
      imgOn = eval(imgName + "on.src");
      document [imgName].src = imgOn;
   }
}

function img_inact(imgName) {
   if (version == "n3") {
      imgOff = eval(imgName + "off.src");
      document [imgName].src = imgOff;
   }
}
function gosite(site) {
   if (site != "0") {
      self.location=site;
   }
}

//-->
</script>
</head>

<body rightmargin="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="130" bgcolor="#FFFFFF">&nbsp;&nbsp;<a href="/site/index.html"
onFocus="if(this.blur)this.blur()"><img alt src="/site/images/calyon_logo.gif"
border="0"></a></td>

    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  </table>

<img class="off" src =" images/tel_names_calyon.gif" width="800" height="30"
alt="tel_names.gif"> 
<div style="width: 879px; clip: rect(auto auto auto 879px);">

<span class="phonelastname"><a href="listRC_mref.asp?RC=S600#191"><font
color='blue'>Awerbuch</font></a></span> 
<span class="phonefirstname"><a href="listRC_mref.asp?RC=S600#191"><font
color='blue'>David</font></a></span>
<span class="phonetele">(732)<br>590-7452 Consultant</span> 

<span class="phonet">

<font color='black'><b>Super Division</b></font><br>
<font color='black'><b>Division</b></font><br>
<font color='black'><b>Department</b></font><br>
<font color='black'><b>RC</b></font>
</span>
<span class="phonegroup"><img src="images/space.gif" width="85"
height="1"><!--<a href="listRC_mref.asp">--><a
href="http://claintranet/site/life/hr/hrdept/pdf's/ORGCHART.pdf"><font
color="black">Organization Chart</font></a><br>
<a href="listRC_mref.asp?RC=S600"><font color="navy"> IT OPERATIONS & PROJECT
MGT   </font></a><br>

<a href="listRC_mref.asp?RC=S600#V041"><font color="red"> USD CLEARING CAO     
        </font></a><br>
<a href="listRC_mref.asp?RC=S600#D190"><font color="green"> IT PAYMENT SYSTEMS 
          </font></a><br>



<a href="listRC_mref.asp?RC=S600#191"><font color="blue">191<img
src="images/space.gif" width="5" height="1" border="0">IT PYMT & CASH MGMT
SYSTEMS   </font></a></span>


<div style="width: 677px; clip: rect(auto auto auto 677px);"><img width="757"
height="1" src="images/tel_divider.jpg" class="off"></div>

<span class='phonelastname'><br>1 result(s) found. <br></span><br><br>
<!--  <span class='phonegroup'><br>0.046875 seconds <br> </span>-->
<br><img src="images/space.gif" width="90" height="1"><font size='-1'>Note:
Click on the Name or Unit to see the organization</font><br>
<br><img src="images/space.gif" width="90" height="1"><a
href="search_mref.asp"><font color="black"><u>back to search
page</u></font></a><br><br>
</div>
</body>
</html>


Reproducible: Always
Steps to Reproduce:
1.  Just display this page as-is.



Expected Results:  
Render the same page under IE5 or IE6, and the data aligns in the proper row/column.
...from what I can tell, the layout depends on setting widths and heights with
css to span elements, which I think is nonsensical since span is an inline
element. Why the page would first use a table for non-tabular data, and then
fail to use a table for the tabular data, is beyond me...

Comment 2

15 years ago
http://www.w3.org/TR/html401/
 might wanna look at that.

To take a screenshot hit print screen, paste and save in an image editor.

Comment 3

15 years ago
not a product page issue -> general
Component: Web Site → General
reporter never bothered to respond
->INVA
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.