0

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?

3
Contributors
8
Replies
9
Views
7 Years
Discussion Span
Last Post by PixelatedKarma
0

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.

0

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

0

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

0

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. ^_^

1

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

0

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.

0

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/

Edited by almostbob: n/a

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.