Member Avatar for prawin@123

Please dont laugh at me for this simple doubt, bUT i have to ask . Please help me any one i am creating a html page when i minimize the page the contect in the pages are shuffled .ie normally if we minimize the page to a fixed limit . it should me minimized and scroll bars are seen to change the size or to make to go up or down . But in my page i didnt get like that and the page contents are shuffled. and my html code is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>location</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/adminstylesheet.css" type="text/css"/>
</head>

<body>
<form action="locationindex.php" method="post">
<table width="100%">
  <tr align="center" valign="middle">
    <td colspan="3"><? include('header.php')?></td>
  </tr>
  <tr>
    <td align="left" valign="top"><?php include('left_menu.php')?></td>
    <td align="center" valign="top">
		<div  align="center" > 
		<table v align = "center" width="100%" border='0' >
		

		<tr><a href="addlocation.php"><font class="label">NEW LOCATIONS</font></a></tr>
		<tr bgcolor="#00CCFF"><th>Location Name</th><th>Active</th><th>Edit</th><th>Delete</th></tr>
			<?php
			
				$qry = "SELECT * FROM `tbl_location` ORDER BY `loc_name` ";
				
				$A = 0;
				$rst = mysql_query($qry,$con);
				if($rst){
					while($row = mysql_fetch_array($rst)){
					
			if($A % 2 == 0){
			echo "<tr bgcolor = '#cccc99'>";
			}
			else
			{
			echo "<tr bgcolor=' #cccccc'>";
			}
						//echo "<tr>";
						echo "<td>$row[loc_name]</td>";
						//echo "<td>$row[loc_code]</td>";
						echo "<td>";
						if($row['loc_active'] == 'yes'){
							echo "<center><a href='locationindex.php?act=inactive&id=".$row['loc_code']."'><img src='tut.gif'></a></center>" ;
						}else{
							echo "<center><a href='locationindex.php?act=active&id=".$row['loc_code']."'><img src='tut.gif'></a></center>" ;
						}
						echo "</td>";
						echo "<td>";
						echo "<center> <a href='editlocation.php?act=edit&id=".$row['loc_code']."'>Edit</a></center> ";
						echo "</td>";
						echo "<td>";
						echo "<center> <a href='deletelocation.php?act=edit&id=".$row['loc_code']."'>Delete</a> </center>";
						echo "</td>";
						echo "</tr>";
						$A++;
						
					}
				}
			?>
		</table>
		</div>
	</td>
    <td align="right" valign="top"><? include('right.php')?></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

I dont know where i went wrong Please any one help me

  • 5 Contributors
  • 4 Replies
  • 90 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by danishbacker

Dani AI

Generated

This is a common layout problem: browsers try to "fix" invalid table markup and that repair can change how cells flow when the window is resized. and were right to ask for clarification, and is correct that moving to a CSS/div layout is a cleaner, modern solution. Short term, the page can be made stable by correcting markup and adding a few CSS rules so the browser shows scrollbars instead of letting table cells reflow unpredictably.

Checklist to apply now:

  • Validate the page at the W3C validator and fix every markup error (tr must contain only th/td; remove stray attributes).
  • Replace deprecated tags like <font> and <center> with CSS classes.
  • Stop using presentation attributes (bgcolor/width) in HTML; use CSS classes instead so styles stay consistent.
  • Ensure images and long strings can shrink: give images max-width and apply word-breaking to cells.
  • Wrap the table in a container with overflow: auto so scrollbars appear when space is tight.

A minimal CSS pattern to stabilize a table layout:

.table-stable { width: 100%; table-layout: fixed; border-collapse: collapse; }
.table-stable th, .table-stable td { padding: 6px; overflow-wrap: anywhere; word-break: break-word; }
.wrapper { overflow: auto; max-width: 100%; }
.table-stable img { max-width: 100%; height: auto; }

If a responsive layout is the goal, convert the rows to block-based rows at small widths (flexbox or stacked divs) via media queries. For details on table behavior and overflow rules, see MDN's docs on table-layout and overflow.

Recommended Answers

All 4 Replies

Member Avatar for HITMANOF44th

are you trying to make the table get bigger and smaller with the window it's kinda hard to follow what you are saying? if you clear up what you are trying to do i can help more

Member Avatar for mishra.ajitesh

i think hitmanof44th is right

Member Avatar for cwarn23

are you trying to make the table get bigger and smaller with the window it's kinda hard to follow what you are saying? if you clear up what you are trying to do i can help more

Well I can understand it due to the use of code I'll explain what I think he is saying even though I'm not entirely sure on how to what he is saying.
In the code there is a html table, 100% width and 100% height if the window is the right size. Then if the window is large enough when the page loads there will be no scroll bars. However, if the user resizes the window after the page loads and the content inside the table cannot fit inside the window then the scrollbars appear. Then when the user resizes the window to make it a big window again the scrollbars disappear and the table is 100% width and 100% height. I think that is what he meant. But as I said, I am not sure on how to do that, just though I would explain my interpretation.

Member Avatar for danishbacker

I think you have problem with table elements.
me too tried like once, to me it is little difficult to do it with table (th,tr,td............).

But it became very easy when made with div and css

check the above link the faculty list is dynamic. I'll give u the code if u need it.

Using css will reduce dom elements too which increase performance. As I noticed that u r using un-necessary elements like center,font etc.

I know this is not a good suggestion. But if nothing else worked just give it a try. :)

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.