Ewww a table thread

Question

PixelatedKarma 65 Junior Poster in Training

13 Years Ago

So I am working on a project right now and it has been requested of me to do the layout in tables (I know I know).

Everything is going surprisingly well but I got to one hitch and I have validated and re-validated (W3C doesn't seem to like the way my php is spitting somethings out), used table checkers and all sorts of this and cannot seem to get the darn thing to work.

What is wrong is everything shows up as good as it should in firefox (still tweaking here and there). But when I go to explorer I get this large gap in parts of my table (top and bottom). Yes I have the correct colspans.

The code lays out as such

</head>
		<body>
			<table id="container" cellspacing="0" cellpadding="0">
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="2"><h1>Office Ecosystem</h1></td>
					<td colspan="2" align="right" valign="bottom">Login</td>
				</tr>
				<tr>
					<td id="topleft" rowspan="2">&nbsp;</td>
					<td id="tborder" colspan="2">&nbsp;</td>
					<td id="topright" rowspan="2">&nbsp;</td>
				</tr>
				<tr>
//BIG GAP HERE
					<td colspan="2">
	<span class="mainmenu">
		<a href="_blank">NEWS & EVENTS</a> | 
		<a href="_blank">ABOUT OFFICE ECOSYSTEM</a> | 
		<a href="_blank">OUR CLIENTS</a> | 
		<a href="_blank">TRAINING & SUPPORT</a> | 
		<a href="_blank">CONTACT US</a>
	</span>
	
					</td>
				</tr>
		<tr>
			<td colspan="4">
				<table width="760px" cellspacing="0" cellpadding="0">
					<tr>
						<td id="sideborders">&nbsp;</td>
						<td id="imagebanner" background=http://pixelatedkarma.com/s.oe/assets/imagebanner/image1.png alt="Office Ecosystem" />&nbsp;</td>
						<td id="sideborders">&nbsp;</td>
					</tr>
				</table>
			</td>
		</tr>
 
 
				<tr>
					<td colspan="4">
						<table width="760px" cellspacing="0" cellpadding="0">
							<tr>
								<td id="sideborders">&nbsp;</td>
								<td id="submenu">This is the submenu</td>
								<td id="sideborders">&nbsp;</td>
							</tr>
							<tr>
								<td id="sideborders">&nbsp;</td>
								<td id="content">
									<table width="100%" cellspacing="0" cellpadding="0">
										<tr>
											<td valign="top">
												<h2>This will be content</h1>
												<p>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br>BLAH<br></p>
											</td>
											<td valign="top">
												<h2>This will be content</h1>
												<p>this will be content</p>
											</td>
										</tr>
									</table>
								</td>
								<td id="sideborders">&nbsp;</td>
							</tr>
						</table>
					</td>
				</tr>
				
 
				<tr>
					<td id="bottomleft" rowspan="2">&nbsp;</td>
//BIG GAP HERE
					<td colspan="2" id="bottomcenter">Verisign Stuff</td>
					<td id="bottomright" rowspan="2">&nbsp;</td>
				</tr>
				<tr height="1px">
					<td id="bborder" colspan="2">&nbsp;</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
					<td>&nbsp;</td>
				</tr>
				<tr>
					<td colspan="2">
						<h5>
							Office Ecosystem in its design, concept, and content are copyright &#169; 2011
						</h5>
					</td>
					<td colspan="2" align="right">
						<h5>
							This site is powered by
						</h5>
					</td>
				</tr>
			</table>
		</body>
	</html>

Any ideas?

web-design

3 Contributors
8 Replies
181 Views
5 Days Discussion Span
Latest Post 13 Years Ago Latest Post by PixelatedKarma

Arkinder 93 Posting Pro in Training

13 Years Ago

I really hope that whomever is employing you for this is paying you exceptionally well. I've never heard of a client that asks for deprecated techniques from 1996.

Regards
Arkinder

almostbob 866 Retired: passive income ROCKS

13 Years Ago

would be inclined (very inclined) to build the page right and just let the client see the finished product

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.

PixelatedKarma 65 Junior Poster in Training Featured Poster · Answer 1 · 2011-07-28T09:22:34+00:00

After further investigation IE was ignoring the widths I was assigning to certain td elements via CSS, however I found the solution by using:

style="table-layout: fixed"

which made it work in IE.

almostbob 866 Retired: passive income ROCKS · Answer 2 · 2011-07-29T20:49:39+00:00

indented code, back to the 80s, current practice is to use a highlighting editor
indenting can add as much as 40% to the size of the code, if the editor uses spaces to create the indenting
and it looks like shit when you ask for assistance

Arkinder 93 Posting Pro in Training · Answer 3 · 2011-07-30T10:58:59+00:00

and it looks like shit when you ask for assistance

It's a table with non-tabular data. I would be worried if it looked like anything else. ^_^

PixelatedKarma 65 Junior Poster in Training Featured Poster · Answer 4 · 2011-08-01T20:48:39+00:00

Thank you so much for the not so helpful input.

Yeah its been awhile since I've dealt with anything tables, so excuse me for not highlighting (I'll remember that in 10 years when I request more help with tables =P).

As for why I am using a layout with tables instead of divs, alot and I mean alot of it is generated automatically via php and mysql.....So until alot of the script is updated as per the clients wishes I am not going to go out of my way to update a bunch of code.

Kinda the same idea as why a person doesn't re-write phpnuke to be div friendly....you'd be at it for the next 6 months by the time you touched every module and the backend.

almostbob 866 Retired: passive income ROCKS · Answer 5 · 2011-08-02T01:54:15+00:00

if it is generated by php, sql
is this the template, so we can look at that for the bug

much has to do with the way IE and firefox handle tables/margins/padding
IE puts padding on the inside of the container element
EE(everything else) puts padding on the outside of the container element
changes the position of everything
some discussions on the fixes

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
http://webdesign.about.com/od/css/a/aaboxmodelhack.htm
http://www.renownedmedia.com/blog/css-box-model-differences-in-firefox-and-internet-explorer/
http://www.creativebumps.com/2011/05/common-ie-hacks/

PixelatedKarma 65 Junior Poster in Training Featured Poster · Answer 6 · 2011-08-02T02:29:27+00:00

Ya what I needed to do was put table-layout:fixed; which corrected the issue across all browsers.

And yes it is a template, of sorts. They are static template files which output the data.