Table layout breaks in IE 7 and Chrome

I am building a website in Visual Web Developer at:

http://www.tekwrytrs.com

It looks fine in IE 8. In IE 7, the buttons in the left column are totally different sizes than they should be. I am using (or at least trying to use) a liquid layout, with the sizes specified in percentages rather than absolute.

Any suggestions of how to resolve this problem (short of chucking the tables and rewriting the site in CSS, which is not practical at the moment) would be greatly appreciated. I am at a complete loss as to how to proceed.

Thanks!

Liquid layout is an admirable intention, but not when elements are permitted to expand or contract to distorted and indecipherable dimensions. Not to mention content being embedded exclusively in images. I daresay other, weightier, comments will be forthcoming but at a glance this looks like a case for knock down and rebuild. :frowning:

Thank you for your interesting response. However, the elements are permitted to expand or contract to distorted and indecipherable dimensions by the browser, not the code. That is the problem I asked about.

As for content being embedded in images, that is appropriate for the content and context. I am more interested in understanding why IE 7 in particular seems to have such a difficult time rendering a very simple site.

Have you tried validating your code?

OK, I’ll repeat that more weightily. This IS a case for knock down and rebuild.

Some thoughts.

[list][]Layout tables went out of fashion back in the seventeenth century. Tables are only there to mark up tabular data. What you’ve got is not tabular data, so you shouldn’t be using tables.
[
]It is not appropriate to use images for that text content. It’s text, so have it as text. You can set a fancy-pants background image if that’s how you want it to look.
[]If you did want to have images instead of text, you must set appropriate alt and title attributes for accessibility software and search engines.
[
]Never use HTML to resize an image, because (a) browsers generally make a complete hash of it, and (b) you’re forcing people to download images ten times the size they need, which is a complete waste of bandwidth, and makes the site really slow. Use an image editor to create images the size you need.
[*]Get rid of “Click for more information on…”, it’s the internet equivalent of saying “Um…” at the start of every sentence, but much more annoying.
[/list]

Images disabled is useless for users who need it:
http://stommepoes.nl/tekff.png

urk

So ok I turn the images on:
http://stommepoes.nl/tekff2.png

I don’t see how this is different from IE7 (I don’t have 8 here):
http://stommepoes.nl/tekie7.png

They’re all 160px by 62px?
So are you saying IE8 looks different than FF and IE7? I do see a potential for a space difference between the left col and the center col (on IE6 and 7 compared to everyone else), but since you have no left margin on center col you’re not seeing any of the crappy Haslayout stuff, so for now it’s fine. I don’t see anything making the images different sizes.

I am more interested in understanding why IE 7 in particular seems to have such a difficult time rendering a very simple site.

Even simple garbage will easily confuse IE7. I mean, we’re talking about a browser who gets confuzled by good code, let alone ASP wrapping entire pages in form tags.

Buuuut, I don’t see anything that would make IE7 make the images in the left-column navigation to look different from anyone else. IE7 looks remarkably like Firefox. What am I missing?

I’ll note the validation errors you have are not the kinds that confuse old browsers. You should set a charset and should remove valign and should put the alt attribute on all content images, but whatever you’re seeing in IE8 isn’t caused by these.

If you didn’t see the page before today, the OP has not given notification but there have been significant changes since the link was first posted.

Ok, so mistake #1

Yeah, stop trying to use a WYSIWYG or ‘automation software’ to build a website. The only thing you are learning is how web pages are NOT built.

Unfortunately for you, StevieD has it right - this is EXACTLY a case for pitch it all in the trash and start over with semantic markup and separation of presentation from content.

For example, the tranny doctype; Transitional is for supporting old/outdated/half-assed coding techniques, NOT for building new websites. (see why I say don’t use HTML 5, it’s one big TRAP). You aren’t declaring character encoding, media target for the primary stylesheet (which SHOULD be screen only), site language or a dozen other things you should have before you even open BODY.

You’ve got that stupid malfing ASP garbage in there (I thought ASP was DEAD – and here like six different posters in a row using that crap) that’s probably breaking the site in the first place – really sad on a page that doesn’t even HAVE form elements to be stuffeed to the gills with form handling garbage… an ungodly number of ‘tables for nothing’, nonsensical heading orders, presentational markup – it’s a disaster! Thanks Microsoft… Taking web development advice from Microsoft is like taking it from Yahoo – just say no!

The problems are really evident in the 12k of markup and 153k page size in 18 files to deliver 1.7k of plaintext with no content images! I very much doubt that page should take more than 5k of markup and around 32k total in four or five separate files!

Here, it’s christmas, I’ll do a rewrite. First the markup – since I always create my full markup first with zero concern for the final appearance and instead focusing on semantics.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="tekwrytrs.com can handle your web development and technical documentation needs from initial needs analysis to implementation, on time, on target, and on budget."
/>

<meta
	name="keywords"
	content="technical documentation, technical writing, enterprise web development, instructional design"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>


<title>
	Tekwryters - Full Service Design and Development
</title>

</head><body>

<!--
	Empty spans below are image replacement sandbags
	DO NOT REMOVE!!!
-->

<div id="pageWrapper">

	<h1>
		tekwryters.com<br />
		<small>
			Instructional Media - Business Software - Databases<br />
			Full Service Contract Design and Development
		</small>
		<span></span>
	</h1>

	<ul class="jumpTo">
		<li>
			<a href="#mainMenu"
				accesskey="0"
				title="Menu"
			>Jump to Menu</a>
		</li><li>
			<a href="#content"
				accesskey="1"
				title="Content"
			>Jump to Content</a>
		</li><li>
			<a href="#sideBar"
				accesskey="2"
				title="Side Bar"
			>Jump to Side Bar</a>
		</li><li>
			<a href="#footer"
				accesskey="9"
				title="Footer"
			>Jump to Footer</a>
		</li>
	</ul>
	
	<div id="columnWrapper">
	
		<ul id="mainMenu">
			<li>
				<a href="../expertise/index.aspx">
					Home
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/instructionalMediaDevelopment.aspx">
					Instructional<br />Media
				</a>
			</li>
			<li>
				<a href="../expertise/onlineInstruction.aspx">
					Online Instruction
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/userAssistance.aspx">
					Online User<br />Assistance
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/businessUtilityProgramming.aspx">
					Utility<br />Programming
				</a>
			</li>
			<li>
				<a href="../expertise/softwareDesign.aspx">
					Software Design
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/softwareDevelopment.aspx">
					Software<br />Development
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/webDevelopment.aspx">
					Website<br />Development
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/samplesOfOurWork.aspx">
					Samples of<br />Our Work
				</a>
			</li>
			<li class="twoLine">
				<a href="../expertise/requestEstimate.aspx">
					Request<br />FREE ESTIMATE
				</a>
			</li>
			<li>
				<a href="../expertise/contact.aspx">
					Contact Us
				</a>
			</li>
		</ul>
	
		<hr />
	
		<div id="contentWrapper"><div id="content">
	
		  <h2>
		  	Local Development - Inhouse Quality - Offshore Pricing
		  </h2>
	
			<ul>
				<li>Instructional Media Design and Development</li>
				<li>Business Software Design and Development</li>
				<li>Business Utility Software Applications</li>
				<li>Database Design - Programming - Upgrades</li>
			</ul>
	
			<p>
				<strong>Rates: $17-25 per hour offsite - $35-50 per hour onsite - or fixed-price deliverable and fixed-price project pricing.</strong>
			</p><p>
				<b>We are professional instructional media and business software developers with a proven ability to achieve goals and high customer satisfaction. We complete our projects on time, on target, and within budget.</b>
			</p><p>
				We will plan, design, and develop online instruction and online content that leverages the best practices of information architecture and learning theory to convert complex technology, concepts, and documentation into understandable terms.
			</p><p>
				We will design, program, and implement software with the specific functionality required to satisfy your business needs--no more and no less. We develop software using the best practices of software engineering, including Service-Oriented Architecture (SOA), Object-Oriented Analysis and Design (OOAD), and Test-Driven Development (TDD).
			</p>
			<div class="info">
				Phone: 651-414-9643<br />
				Email: tekwrytr@tekwrytrs.com
			</div>
		<!-- #content, #contentWrapper --></div></div>
	
		<hr />
	
		<div id="sideBar">
			Third column content here. I'm assuming you had that third column in the content for something like adverts, calendar, recent news, etc? I'm setting it to 224px wide which should be sufficient.
		</div>
	
		<hr />
		
	<!-- #columnWrapper --></div>		

	<div id="footer">
		<p>
			For questions or comments, send an email to support@tekwrytrs.com
		</p><p>
			For quotes on all your instructional media, online help files, technical documentation, and software development needs, send an email to support@tekwrytrs.com. We specialize in Adobe, Microsoft, Oracle, and Java technology programming and development including: Adobe Captivate, Adobe RoboHelp, Adobe Flex, Adobe Photoshop, Adobe AIR, Oracle databases, Java, Visual C#, and Visual Basic technologies.
		</p>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

Would be +/- 5% of the final markup I’d have on that page… gimme a few minutes and I’ll belt out the CSS to go with that.

Those ASP tools are REALLY screwing with you – whoever came up with trying to let those output markup needs to be put down like old yeller; it leads SO many people down the garden path. The polluted garbage markup they output is so much unbelievable bull, I CANNOT believe anyone can actually build a useful website with them.

Oh wait…

Here’s what I came up with:

as with all my examples the directory:

http://www.cutcodedown.com/for_others/tekwrytr/

is unlocked for easy access to the bits and pieces. (CSS and Images). Tested working IE 5.5 through 9 Beta, Opera 10.5 and 11, FF 3.5.19 and 3.6.3, and the latest flavors each of Safari and Chrome.

I got rid of the separate images for each button – not only was that ‘80k of nothing’ the jpeg artifacting and odd highlight colors made the entire menu illegible. Combined with the image replacement technique on the header it makes the page really good for people browsing with images off but with CSS still on – like all the people using that free 100mb/mo that comes with the CR-48. Also gives search engines something MEANINGFUL to look at. I also gave it hover states.

In your original I cannot fathom what purpose the double nested table nonsense and all that javascript nonsense was for – it LOOKS like it was supposed to give it hover states which frankly, is NOT javascript or HTML’s job!

I added some content so we could see that third column, changed some of the styling – the biggest change being to put the whole thing into a semi-fluid layout. Fixed is an accessibility /FAIL/, and fully fluid can make single lines of text too long… making the center column fluid and then having min/max-width on the container takes care of both issues quite nicely.

I did axe the odd double-border on the foot, not sure what that was even for… You had a single .jumpTo link in your original, I expanded it to a full menu with accesskeys; which is handy not just for people on lesser mobile user agents like blazer, but for Opera users on the desktop as well. Open up the page in Opera and hit “shift-esc” to see what I mean.

I also put everything in sans-serif. Serif fonts pretty much suck for websites; at the default size what you had being an illegible mess for me and many other vision impaired user. Serif is for print, sans-serif is for screen. I personally LIKE arial despite all the bashing it gets – beats the tar out of the illegible disasters of Verdana or Tahoma.

5k of markup, 3k of CSS, 23k of images in TWO files… for a grand total of 31k in four files. Pretty close to my guesstimate.

Hope this helps.

Excellent work. I hope it gets the appreciation it deserves.

The left column buttons expand to roughly half the width of the center column in IE 7 (and disproportionately longer).

I appreciate the suggestions. Fashion is not the issue–the “why” of how IE 7 renders the same code (extremely simple) so much differently than IE 8 is what I was curious about. If it were some arcane, “creative” code, I might find it more understandable. It is about as simple and plain HTML as can be found. It still renders weirdly in IE 7. I don’t know why.

I really, really appreciate your efforts. I cannot thank you enough.
tekwrytr

Well, I think your definition of arcane differs from Stevie D’s… and my own. This:

<table id="ctl00_mymenu" class="ctl00_mymenu_2" cellpadding="0" cellspacing="0" border="0">
	<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(event)" title="Click for tekwrytrs Home Page" id="ctl00_mymenun0">
		<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
			<tr>
				<td style="white-space:nowrap;width:100%;"><a class="ctl00_mymenu_1" href="../expertise/index.aspx"><img src="../expertise/ximages/btnHome.jpg" alt="Click for tekwrytrs Home Page" style="border-style:none;vertical-align:middle;" /></a></td>
			</tr>
		</table></td>
	</tr>

Is NOT “as simple as it comes”… and is the root of much of your problem – which is just PART of why it’s rewrite or live with it – hence my rewrite and hence the statements of others in this thread… Neither is all the ASP / “visual designer” nonsense polluting the markup like all the javascript for nothing and endless pointless ct100_ classes. “simple as it comes” – I (and I suspect Stevie D) would in fact define that as “a convoluted unnecessary mess”

See the exact same thing in my rewrite:


<ul id="mainMenu">
	<li>
		<a href="index.aspx">
			Home
		</a>
	</li>

THAT is about as simple as it comes… and why almost two thirds of the original markup really ends up on the cutting room floor.

It’s part of why the people behind “Visual web developer” need to be put down HARD like a rabid dog… Since they keep biting and infecting people with their illness.

Just like Dreamweaver, the artist formerly known as frontpage, jquery, mootools, YUI, and all the other bull people are destroying perfectly good site concepts with.

Well, shucks. I really appreciate all the help and advice. Basically, I didn’t develop the site originally, and I thought I could just re-use a lot of what was there, add different content, and get by with it. As most such endeavors, it flopped badly.

It has been a rather stressful learning experience, but it has had effect. The first step in learning is to understand what you don’t know, and I have certainly had ample opportunity to see that with a great deal of clarity. I thank everyone for that, as well as for the direct help and advice. It has been a humbling experience, to say the least.

Trust me, we’ve all been there. It’s kinda sad but there becomes a point, especially in trying to work with code built by others, where it is actually LESS work to throw it out and start over. It sucks, but it sucks LESS than trying to salvage train wrecks like that one.

Well again, we can all relate as we all have encountered that feeling of stress, and being humbled.

In a lot of ways back when I was starting out doing websites a decade ago I kind-of wish there had been people like Stevie D, Dan Schulz and myself to slap me around a little on the stuff I was doing. It’s easy to want to try and salvage things when taking over a project from someone else; when really so many major changes and issues are present it’s going to take some real work to modernize it.

It also doesn’t help that 90%+ of the online tutorials are web rot, half of the books on shelves are at least a decade out of date, another third being filled to the gills we “gee ain’t it neat” nonsense that does nothing but lead people down the garden path…

Which goes hand in hand with the emperor telling you “the garden will be made available to you” For those of you not familiar with the latter phrase, it’s so you can have a nice quiet place to slit your own belly as atonement!

Or the ‘educators’ who think that because they know how to start frontpage or dreamweaver they’re qualified to teach ANYTHING about the Internet…

When I started out on websites I came from a twenty year background in database development and occasional collaboration with a print media department – So I thought I knew all there was to know about user interfaces and presentation of information… It was just about learning the tags and using the capabilities of the browser to the fullest – or so I thought.

So naturally the first two websites I built and maintained were effectively HTML 3.2 slapped together using Netscape Composer back in '99; the third site was a rewrite of someone else’s where I bit off a LOT more than I was prepared to chew at the time – and the end result was an entire site of DHTML; javascript off, there was no website – and that would have been 2001 at which point there SHOULD have been no good excuse not to be working in HTML 4 strict, even with supporting Nyetscape 4 a reality – and yet it was another four years before someone was able to talk me into it…

… and the sad part was, it was the guy I taught HTML and good coding practices who convinced me to embrace STRICT. The apprentice had become the master. What Dan (Schulz) used to sell me on STRICT + semantics + separation of presentation from content was how it exploits the caching model, ends up easier to maintain, easier to revise, and results in faster page loads in less bandwidth; I was on that like a hooker on a five dollar bill. Between the two of us we started hammering out a method for just building sites in a better way.

We had even started work on a website to cover that and promote better coding and development practices – cutcodedown.com; but since his illness and death last year the project has slowed to a crawl.

Ok, I’ll stop – I’m starting to ramble on and on about nothing. I do that - “for god sake’s John, sit down…”

Basically most of us old timers have gone through it, and for the people who haven’t – you really need to at some point.

If you didn’t see the page before today, the OP has not given notification but there have been significant changes since the link was first posted.

Ah, I kinda wondered, as I didn’t see all-tables when I looked.

The left column buttons expand to roughly half the width of the center column in IE 7 (and disproportionately longer).

Since Jason pretty much took care of how to fix it, I’ll just say the buttons were doing what you said: the left side was only 200px wide and the images were less than that… they looked the way I’d expect in FF and IE7, so if IE8 made everything bigger, it was the browser doing things wrong, not IE7.

Off Topic:

Someone wrote quite a rant about the education system: http://www.andyrutledge.com/the-ux-design-education-scam.php

While he says UX specifically, it holds for web developers in general.

The “original” problem was that the left column was declared as a percentage value in a table layout, not explicitly in pixels. It rendered fine in IE 8 (which I use most of the time) and I was unaware of the problem until my associate (who uses IE 7) mentioned that the left column buttons (images, actually) were totally out of whack.

I will be working on it during the holidays, implementing the recommended changes, and hope to have it functional by the start of the new year. Again, thanks to everyone for their invaluable advice and assistance.

That is not funny. I found pretty much the same lack in “educational materials.” Unfortunately, it took me a bit longer than most, because I was rounding out my third year in graduate school before it really dawned on me that most of what I was “learning” was useless in the real world.

I looked for more efficient learning methods and methodologies, and discovered the truth of your statements above–nearly all the so-called “tutorials” and “instructional material” available are not just useless for learning, but create completely warped perspectives on whatever topic is being studied.

The problem is not trivial; it is pervasive throughout many aspects of the instructional field, from online “tutorials” to colleges and universities. Essentially, they are not teaching–they are only demonstrating one process, and expecting that simply witnessing or reading about someone doing something is going to enable someone else to do something completely different. It doesn’t work like that.