Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Tables in IE & NS : Not same, Why not? 1

Status
Not open for further replies.
HollyVally

HollyVally

Programmer
Jan 3, 2003
48
BD
Hi all,

I am trying to write where I have to show a grid containing some info. But it shows fine in Netscape whereas in IE its horrible! Basically I use Netscape for a good view. But I want my audiance to be in any one of the browsers available.

How can I do that?

I would highly appreciate any good idea!

Thanks
 
Sort by date Sort by votes
also what versions browsers are you using?

[Hammer]
Nike Failed Slogans -- "Just Don't Do It!"
 
Upvote 0 Downvote
Hi Guys

Here is the short version of the problem. Try viewing it in the NS and then in IE you will see the difference. I simply dont know where have I gone wrong!

Somebody please show me the way...[peace]

Code: 
<HTML>
<HEAD>
<TITLE>Welcome to My Test</TITLE>
<META http-equiv=&quot;Content-Type&quot; content=&quot;text/html&quot;>
<STYLE type=&quot;text/css&quot;>
<!--
.gamecell {
	font-size:10pt;
	font-family:verdana, arial, helvetica;
	font-weight:bold;
	color:#808080;
	border-style:solid;
	border-color:#336600;
	border-width:0px;
	background-color: #FEFACB;
	text-align: center;
	vertical-align: middle;
}

.number {
	font-size:10pt;
	font-family:verdana, arial, helvetica;
	font-weight:bold;
	color:#808080;
	background-color: #FEFACB;
	text-align: center;
	vertical-align: middle;
	height: 15pt;
	width: 15pt;
	border: thin solid #336600;
}

.cross {
	border: thin solid #336600;
	background-color: #336600;
	height: 15pt;
	width: 15pt;
}

-->
</STYLE>
</HEAD>

<BODY leftmargin=&quot;0&quot; rightmargin=&quot;0&quot; topmargin=&quot;0&quot; bottommargin=&quot;0&quot;>
<TABLE width=&quot;100%&quot; height=&quot;100%&quot; border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
  <TR><!-- ContentBar.html -->
	<TD height=&quot;100%&quot; valign=&quot;top&quot;>
		<TABLE width=&quot;100%&quot; height=&quot;100%&quot; border=&quot;0&quot;>
		<TR>
		  <TD valign=&quot;top&quot; align=&quot;center&quot;>

			<FORM action=&quot;CN.php&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot; name=&quot;formCN&quot;>
			
			<TABLE cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
				<TR>
					<TD colspan=&quot;10&quot; class=&quot;number&quot;>To choose a number<BR>Click on it
					</TD>
				</TR>
				<TR>	
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;0&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;1&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;2&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;3&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;4&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;5&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;6&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;7&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;8&quot; readonly=true></TD>
					<TD><INPUT type=&quot;text&quot; class=&quot;number&quot; name=&quot;chosenNumber&quot; value=&quot;9&quot; readonly=true></TD>
				</TR>
				
				<TR>
					<TD colspan=&quot;10&quot; class=&quot;number&quot;>
						<BR><BR>
						<INPUT type=&quot;text&quot; name=&quot;onTheCell&quot; class=&quot;gamecell&quot; value=&quot;Click on a cell!&quot; readonly=true>
						<INPUT type=&quot;text&quot; name=&quot;chosenCell&quot; class=&quot;gamecell&quot; value=&quot;&quot; readonly=true>
					</TD>
				</TR>
			</TABLE>
			
			<TABLE border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;number&quot;>
			<TR>
					<TD><INPUT name=&quot;cell1&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
			
					<TD><INPUT name=&quot;cell2&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell3&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell4&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell5&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell6&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell7&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell8&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell9&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
			</TR>
			
			<TR>
					<TD><INPUT name=&quot;cell10&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell11&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell12&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell13&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell14&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell15&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell16&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell17&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
			
					<TD><INPUT name=&quot;cell18&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
			</TR>
			<TR>
					<TD><INPUT name=&quot;cell19&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell20&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell21&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell22&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell23&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell24&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell25&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
			
					<TD><INPUT name=&quot;cell26&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell27&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
			</TR>
			<TR>
					<TD><INPUT name=&quot;cell28&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell29&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell30&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell31&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell32&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell33&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
			
					<TD><INPUT name=&quot;cell34&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell35&quot; type=&quot;text&quot; class=&quot;number&quot; value=&quot;&quot; readonly=true></TD>
					<TD><INPUT name=&quot;cell36&quot; type=&quot;text&quot; class=&quot;cross&quot; value=&quot;&nbsp;&quot; readonly=true></TD>
			</TR>
			
			</TABLE>
			<INPUT name=&quot;Submit&quot; value=&quot;Enter my game&quot; type=&quot;submit&quot; disabled=&quot;true&quot;>
			<INPUT name=&quot;Reset&quot; value=&quot;Clear the game&quot; type=&quot;reset&quot;>
			<INPUT type=&quot;button&quot; value=&quot;New Game&quot; onClick=&quot;window.location.reload()&quot;>
			</FORM>
			&nbsp;
		  </TD>
	
		</TR>
	</TABLE>
	&nbsp;
  </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Thanks all...
 
Upvote 0 Downvote
Sorry forgot to tell you the versions:

IE 6.0
NS 7.02

.........
 
Upvote 0 Downvote
One more thing....

The table is generated by a cgi script. I have only cut&paste the part that is causing the concern.

Hope that helps a bit.

Cheers.
 
Upvote 0 Downvote
You mean &quot;why does the 'to choose a number...' text get wrapped into a single column?&quot;

In your style sheet you've said
[tt]
.number {
font-size:10pt;
font-family:verdana, arial, helvetica;
font-weight:bold;
color:#808080;
background-color: #FEFACB;
text-align: center;
vertical-align: middle;
height: 15pt;
width: 15pt;
border: thin solid #336600;
}
[/tt]
In your table you've said
[tt]
<TD colspan=&quot;10&quot; class=&quot;number&quot;>To choose a number<BR>Click on it</TD>
[/tt]
IE tries to make the <td> as close to 15pt as it can, NS doesn't. I don't know which one is doing the &quot;right&quot; thing.

You can fix it by putting a [tt]style=&quot;width:100%&quot;[/tt] into that <td> to override the value it inherits from the class. Having all those tables-within-tables-within-tables probably doesn't help your cross-browser compatibility much either.

-- Chris Hunt
Extra Connections Ltd

The real world's OK for a visit, but you wouldn't want to LIVE there!
 
Upvote 0 Downvote
Thanks a million Chris.

I have completely overlooked it.
&quot;why does the 'to choose a number...' text get wrapped into a single column?&quot;

Thanx so much.

But in that case what do you reckon the general cells are doing? is it the same case there too?

Cheers.
 
Upvote 0 Downvote
Hi All,

I am stillin trouble with the table cells. These do not stay together in IE like they do in NS. Can any one help pls?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
pendle666
  • Locked
  • Question Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
398
pendle666
pendle666
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question Question
Media query: display = none/inline/block
Replies
1
Views
1K
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top