Random griping about Dreamweaver/Firefox/HTML

So, I’ve gotta vent after spending today doing about an hour’s worth of web work. Well, it should have been an hour’s worth of work, but between Macromedia Dreamweaver, Firefox, and the vagaries of HTML, it took pretty much all day.

Bonnie’s Bookstore is launching on Tuesday (still can’t state all details here - press release pending). So I decided to clean up the New Crayon website a bit in preparation for the launch. All I wanted to do was 3 simple things:

1) Fix the left hand column so that the two sidebars there (news and ’submit your e-mail’ for our newsletter), justified at the top of the column, rather than centering (which looked odd on tall pages)
2) Set up a page for Bonnie’s Bookstore
3) Change the main games page to a list of games, featuring Bonnie initially, with room for more later.

If web pages were Word documents, I could have done the above in 60 minutes. But instead, I spent about 8 hours completing these tasks.

The biggest problem is that HTML itself is really odd. It’s hard to arbitrarily carve a page up, and then within each section, align the individual elements as desired. Basically, it comes down to using an HTML construct called a table. But rather than just using a single table, you have to use tables within tables within tables - I think my main page is nested about 5 deep in places. To set up these tables, you have to use various tags <table> <tr> <td> <p>, and for each one, you need a corresponding end tag, in reverse order (i.e. <\p> <\td> <\tr> <\table> Forget an end tag, or invert two of them (I was frequently inverting <td> and <tr> by accident), and Dreamweaver will show you a garbled page, with little indication of what’s wrong. If you’re just a shade unlucky, Dreamweaver will crash, or automatically revert your changes, both of which will wipe out your last 5-10 minutes of work.

In theory, you should be able to use Dreamweaver’s WYSIWYG editor to lay this stuff out, but in practice, the editor starts barfing whenever you get your tables nested more than about 2 levels deep.

So instead, you peer through the html source code, hunting for an overlooked < \td> somewhere. But Dreamweaver tends to create code that spills out to roughly column position 300, so you have to scroll your document horizontally as well as vertically. And if you should dare to click anywhere within the WYSIWYG view of your document, the code view will frequently jump to a random position 100 lines away from where you thought you should be looking.

Eventually, you think you have it right, but you can’t really tell, because what you see in Dreamweaver’s preview window corresponds to how it will really look (in Internet Explorer) about as closely as the picture on the TV dinner box corresponds to the mess that emerges from your microwave 6 minutes later. Coincidentally, it seems to take about 6 minutes to get a ‘real’ preview of a page - even though all you want to do is upload a single 20K page to the web to preview it there. But Dreamweaver instead wants to upload your whole web site, and when it does, warns you that various files on the web are newer than the files on your hard drive. That’s not the case, but Dreamweaver is confused because you live in St. Louis and your web host is in Los Angeles, and apparently nobody who works at Macromedia has heard of different time zones, so all your files are out of synch by two hours and it takes about 10 dialog clicks and warnings to finally get your lone 20K page up to the web site where you can see it ‘for real’.

So, after a few iterations of this, you finally guess right and your page looks the way you want it to in Internet Explorer, running from a real live web site. Then, you decide to see how it looks in Firefox - shouldn’t be an issue right?

Wrong, of course. Despite the claims, Firefox is not as good as I.E. It may be more compliant with the ‘official’ HTML standard - it may be less compliant. I don’t really care - all I know is that it’s different, and when one browser is produced by Microsoft and has a 90% share, any other browser that displays pages differently is out of luck. After a few passes to clean up Firefox issues, I give up. You can still see the last Firefox scar - the fact that the two independent boxes on the left side of the page here have thin lines joining them. In I.E., that displays fine, in Firefox, it’s wrong, and at this point, I don’t feel like wasting more time figuring out why.

[edit - two different readers - PJay and former PopTop colleague Dave Deen both pointed out the error in my HTML code causing this Firefox glitch. It's fixed now. Still, html is not for the faint of heart. I've mastered C++ coding for over a decade, and I couldn't spot the error without help from others. And the error only showed up in Firefox, but not I.E. - ahh well...]

So anyways, that’s a very small subset of the issues in trying to put together two pretty simple pages and one sidebar in Dreamweaver. The two new pages will be up this coming Tuesday, when Bonnie’s Bookstore launches.

7 Responses to “Random griping about Dreamweaver/Firefox/HTML”

  1. William Willing Says:

    Don’t take this the wrong way, but part of the problem is that you’re not using HTML right. You really shouldn’t use tables for layout; use CSS instead. There’s a bit of a learning curve, but you’ll be able to create much better web pages. You might even (re)discover why HTML behaves the way it does. :-)

    I agree with the IE/Firefox problem, though. It doesn’t really matter who’s more standards compliant, it just sucks that they treat the same HTML differently. I take it you are not about to test on Opera, Safari and other browsers. :-p

  2. Factory Says:

    “Microsoft and has a 90% share, any other browser that displays pages differently is out of luck.”
    In defence of Firefox, coding to replicate bugs is just asking for HTML coding to be more complex in the long run.

  3. PJay Says:

    delete line 82 and 156:

    82 =

    156 =

    I don’t know why IE doesn’t display those lines though, the code looks like you deliberately put them there.

    And, I think you might have had less trouble finding these error if you write the html by hand from the beginning. Ofcourse, I know you are no web designer, but it’s always hard find your way in such a generated-code.

    A tip for easier debug html in firefox: the DOM inspector lets you click through a tree-like structure of the code and you see the corresponding item flash in the browser: http://www.codestore.net/store.nsf/unid/BLOG-20050228

  4. Phil Steinmeyer Says:

    PJay - thanks for the tip. And I’ll take a look at that DOM inspector after I do a general Firefox upgrade when 1.5 comes out this week.

    Factory - I agree that it’s hard to ask Firefox to replicate I.E. bugs. For that matter, when I see pages displaying incorrectly on one browser or the other, I don’t know whose ‘bug’ it truly is. But that doesn’t really matter - pure market share forces developers (smart ones anyways) to pay closest attention to the bigger player, and as you move down the scale from I.E. -> Firefox -> Safari -> Opera -> Konqueror -> etc, you’re going to see fewer and fewer webmasters testing their pages on these browsers, much less optimizing for them.

  5. Jos Says:

    While you are right that dev’s need to look at market share, you also have to look a bit more deeply then just “IE has 90% of the market”. If you are targeting technically minded people, IE might not be 90% of that market. Or, if your software is cross-platform, but your market is the type that buy mac’s as often as PC’s, you’d want to support Safari.

  6. Phil Steinmeyer Says:

    Jos - What you say is true. The visitors to this blog run about 55% Firefox, 35% I.E., and 10% all others.

    But my company website (www.newcrayon.com) is targeted at casual game players/buyers, and I’m guessing they’ll be at least as much I.E. loyal as the web population as a whole, perhaps somewhat more so.

    I may draw a bit disproportionately high for Mac/Safari, as the game does have a Mac version - I’ll keep an eye on that.

  7. Factory Says:

    Dunno if you changed the code or not, but the sidebox is now displayed fine in Firefox 1.5.

New comments are disabled.