can anyone tell me why the arrangement in layout is not same................

Question

Jessurider -10 Posting Whiz in Training

15 Years Ago

<html>
<body>

<body bgcolor="#FFE193">

<table width="100%" border="1" cellspacing="1" cellpadding="1">
  <tr>
      <td width="50%" align="left" valign="top" bgcolor="#BDECFE">
        <table width="75%" height="180"  border="1" align="leftcorner">
          <tr>
             <td colspan=2 style="font-size:12pt;color:#00000;" align="center">
             <font size=5> Search Employee </font></td>
          </tr>
          <tr>
             <td><b> Employee Name</b></td>
             <td>: <input  type="text" name="emp_name" id="emp_name"></td>
          </tr>
          <tr>
             <td><b>Department</b></td>
             <td>: <input  type="text" name="emp_dept" id="emp_dept"></td>
          </tr>
          <tr>
             <td><b>Email</b></td>
             <td>: <input  type="text" name="email" id="email"></td>
          </tr>
          <tr>
             <td colspan=2 align="center">
             <input  type="submit" name="submit" value="Search"></td>
          </tr>
        </table>
      </td>


    <td width="127%" align="right" valign="top">
     <table width="127%" height="180"  border="3" align="leftcorner">
      <tr>
        <td align="top" height="135" valign="top" bgcolor="#BDECFE">
        <marquee height="150" align="left" direction="up" scrollamount="2" scrolldelay="1" onMouseOver="this.stop()" onMouseOut="this.start()"><br/><b>
          <a href="news.asp" class="more">Faith InfoTech Academy for Professional Advancement starts operations at Technopark..</a><br/><br/>
          <a href="news.asp" class="morelink">Faith InfoTech Academy for Professional Advancement starts operations at Technop...</a><br/><br/>
          <a href="news.asp" class="more">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</a><br/><br/>
          <a href="news.asp" class="morelink"><b>Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</b><br>...</a><br/><br/>
          <a href="news.asp" class="more">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health services.</a><br/><br/>
          <a href="news.asp" class="morelink"><b>Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health...</a><br/><br/>
        </marquee>
        </td>
      </tr>
     </table>
    </td>

<td width="250%" align="right" valign="top">
     <table width="320%" height="180"  border="1" align="rightcorner">
      <tr>
        <td align="top" height="135" valign="top" bgcolor="#BDECFE">
        <marquee height="150" align="left" direction="up" scrollamount="2" scrolldelay="1" onMouseOver="this.stop()" onMouseOut="this.start()"><br/><b>
          <a href="news.asp" class="more">Faith InfoTech Academy for Professional Advancement starts operations at Technopark..</a><br/><br/>
          <a href="news.asp" class="morelink">Faith InfoTech Academy for Professional Advancement starts operations at Technop...</a><br/><br/>
          <a href="news.asp" class="more">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</a><br/><br/>
          <a href="news.asp" class="morelink"><b>Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</b><br>...</a><br/><br/>
          <a href="news.asp" class="more">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health services.</a><br/><br/>
          <a href="news.asp" class="morelink"><b>Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health...</a><br/><br/>
        </marquee>
        </td>
      </tr>
     </table>
    </td>


  </tr>
</table>

</body>
</html>

user-interface web-design

Edited 15 Years Ago by Jessurider because: n/a

5 Contributors
4 Replies
112 Views
1 Week Discussion Span
Latest Post 15 Years Ago Latest Post by teedoff

Dani AI

Generated 9 Months Ago

This is a layout/validation problem more than a browser bug. As pointed out, a missing doctype forces browsers into quirks mode; that plus invalid markup and odd table widths produces different results across engines. is right to recommend CSS-based layout, and ’s edit shows the kind of cleanup needed. The original markup has a duplicated body tag, nonstandard align values, and column widths that exceed 100% (e.g., 127% / 250% / 320%), which will overflow and render inconsistently.

Why it breaks: quirks mode changes the box model and default UA stylesheet behavior (see ). Tables with percentage widths that don’t sum sensibly, deprecated attributes (bgcolor, align, font) and nonstandard tags like <marquee> make layout fragile and browser-dependent. Modern browsers become predictable when pages use a standards doctype, valid markup, and CSS for presentation.

Concrete checklist and quick fixes:

Add a standards doctype (HTML5) and a proper head/meta charset.
Validate and remove duplicate/invalid tags and attributes. Ensure column widths don’t exceed the container.
Replace presentational attributes with CSS; prefer Flexbox or Grid for layout. Use box-sizing: border-box to make width calculations consistent (box-sizing on MDN).
If keeping tables, set table-layout: fixed and give explicit column widths that sum ≤100%.

Quick CSS starter to make sizing predictable:

/* predictable sizing */
* { box-sizing: border-box; }

/* simple 3-column layout replacement */
.container { display: flex; gap: 12px; align-items: flex-start; }
.column { flex: 1 1 0; min-width: 0; }
.marquee { height: 180px; overflow: auto; }

Debugging tips: use browser DevTools to inspect computed widths/borders, temporarily outline elements with a border to see overflow, and test after each change. ’s “ugghhh tables” is a fair summary: table layouts work, but CSS layouts are far more robust for cross‑browser consistency.

All 4 Replies

Arkinder 93 Posting Pro in Training

15 Years Ago

Please be more specific. What is it exactly that isn't being arranged the same? Also, almost all of your code is deprecated, and I strongly suggest using more modern techniques (CSS).

Regards
Arkinder

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

almostbob 866 Retired: passive income ROCKS · Answer 1 · 2011-05-13T19:46:12+00:00

there is no doctype declaration in the html
without a doctype the browser is free to interpret the code any way it chooses, each browser, and each version within each browser, has its own default doctype to use.

Danilomol 0 Newbie Poster · Answer 2 · 2011-05-17T14:12:48+00:00

<!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=utf-8" />
<title>Please use css and divs next time, not tables</title>
<style type="text/css">
.more { width:180px; margin-top:20px;}
.morelink { width:300px; margin-top:20px;}
</style>
</head>

<body bgcolor="#FFE193">

<table width="100%" border="1" cellspacing="1" cellpadding="1" bgcolor="#BDECFE">
  <tr>
      <td width="348" align="left" valign="top" bgcolor="#BDECFE">
        <table width="75%" height="180"  border="1" align="leftcorner">
          <tr>
             <td colspan=2 style="font-size:12pt;color:#00000;" align="center">
             <font size=5> Search Employee </font></td>
          </tr>
          <tr>
             <td><b> Employee Name</b></td>
             <td>: <input  type="text" name="emp_name" id="emp_name"></td>
          </tr>
          <tr>
             <td><b>Department</b></td>
             <td>: <input  type="text" name="emp_dept" id="emp_dept"></td>
          </tr>
          <tr>
             <td><b>Email</b></td>
             <td>: <input  type="text" name="email" id="email"></td>
          </tr>
          <tr>
             <td colspan=2 align="center">
             <input  type="submit" name="submit" value="Search"></td>
          </tr>
        </table>
      </td>


    <td width="200" align="left" valign="top">
     <table width="200" height="180"  border="1" align="leftcorner">
      <tr>
        <td align="top" height="180" valign="top" bgcolor="#BDECFE">
        <marquee height="150" align="left" direction="up" scrollamount="2" scrolldelay="1" onMouseOver="this.stop()" onMouseOut="this.start()">
          <div class="more"><a href="news.asp" >Faith InfoTech Academy for Professional Advancement starts operations at Technopark..</a></div>
         <div class="more"><a href="news.asp">Faith InfoTech Academy for Professional Advancement starts operations at Technop...</a></div>
         <div class="more"> <a href="news.asp">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</a></div>
          <div class="more"><a href="news.asp">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director....</a></div>
          <div class="more"><a href="news.asp">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health services.</a></div>
          <div class="more"><a href="news.asp">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health...</a></div>
        </marquee>
        </td>
      </tr>
     </table>
    </td>

<td width="300" align="left" valign="top">
     <table width="300" height="180"  border="1" align="rightcorner">
      <tr>
        <td align="top" height="180" valign="top" bgcolor="#BDECFE">
        <marquee height="150" align="left" direction="up" scrollamount="2" scrolldelay="1" onMouseOver="this.stop()" onMouseOut="this.start()">
          <a href="news.asp">Faith InfoTech Academy for Professional Advancement starts operations at Technopark..</a>
          <a href="news.asp">Faith InfoTech Academy for Professional Advancement starts operations at Technop...</a>
          <a href="news.asp">Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director.</a>
          <a href="news.asp"><b>Mr. R. Narayanan joins Faith InfoTech as Chief Mentor and Director..</a>
          <a href="news.asp">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health services.</a>
          <a href="news.asp">Faith InfoTech engaged by RevenueMed to deliver training in IT enabled health...</a>
        </marquee>
        </td>
      </tr>
     </table>
    </td>


  </tr>
</table>

</body>
</html>

teedoff 3 Posting Pro · Answer 3 · 2011-05-21T00:40:36+00:00

teedoff 3 Posting Pro

15 Years Ago

ugghhh tables...http://www.hotdesign.com/seybold/

can anyone tell me why the arrangement in layout is not same................

Dani AI

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers