Can't get hyperlinked graphics to show in table cells

[NicheMaster]

I'm creating a website using SiteBuildIt, but have encountered an insane glitch that their forums and experts can't seem to solve, so I'm broadening my search for help.

I have placed several three column, multi-row tables on my home page. Each cell has a hyperlinked graphic to another page or website in the first two columns, a static graphic filling all rows of the third column.

When everything is properly coded, I get nothing in the cells - no graphic, no hyperlink, not even ALT TEXT - in every browser except Maxthon, where they appear perfectly.

And now for the really wierd part: When I leave the closing ">" off the HREF preceding the SRC code, I get perfect hyperlinked graphics in every cell . . . but only in Firefox. Most also appear in Netscape. I get just what you would expect in IE, Maxthon, Avant, Opera, etc. - which is nothing. Empty cells (except for the static graphic, which always shows in every browser).

If I leave out the graphic and use the same HREF (with closing ">") in a text link, it's fine. If I leave out the HREF and just put in the graphic, it's fine. When I use exactly the same code formation with both in place . . . zilch.

This makes absolutely no sense to me or anyone at SBI.

Anybody out there have a clue?

Any and all help most welcome.

Thanks,
J.R.

[edited by: encyclo at 5:55 pm (utc) on Mar. 18, 2006]
[edit reason] No URLs please! See TOS [webmasterworld.com] [/edit]

[JAB Creations]

Hi J.R. and welcome to WebmasterWorld!

This community deals with quoted snippets (or in rare cases quoted pages) of code posted here. The TOS states not post to personal URLS except (I think) in the rarest of cases.

Moving along I visited your link before a mod spotted your post and validated it with 1190 errors! *feel sharp chest pains and passes out*

I'm going to go as all out to help you on this one so re-read something if you don't understand the first time please IoI...

First off if you are using a WYSIWYG editor (What You See Is What You Get) you'll want to post in the following forum...
[webmasterworld.com...]

However I highly suggest if you're going to participate in web design (and especially these forums) that you realize web pages are ultimately code and that doing it correctly (while a pain in the butt) pays off in the (very) long term IoI.

Now your anchored image problem.

In HTML 4.01 Transitional this is what you want your anchored image code to look like...

<a href="#"><img alt="Alternative Text" src="image.gif"></a>

You must use the alt attribute (even in HTML 4.01 Transitional) on image elements.

Proper markup is important and it seems your editor is not going to live up to the task!

Quick and easy validation directions...

1.) What I would suggest is in your browser right click and view the source. Select all the code and paste it in to notepad.

2.) Go to the W3C validator page and paste the code.
[validator.w3.org...]
* There are three options, use the third, "Validate by Direct Input"

3.) Validate the code, you should see 1190 errors but don't panick because I'm going to show you how to VERY quickly iron most of them out!

4.) The first error in your code is...

<script language="JavaScript">

You'll want to fix this to look like...

<script type="text/javascript">

5.) Go back to Notepad and press CTRL+H (Find and Replace keyboard shortcut).

6.) In find put...

<img src="

In replace put...

<img alt="" src="

...

That should reduce your errors by about 30. But keep in mind your page is huge and the editor you are using generates very poor code.

So what I would suggest is asking questions about validation errors. Let me go over a few so that you have some idea of how to go through the page in notepad and manually edit problems. It's downright dirty but thats the quality of the code.

Once you clean out these errors only then you can reliably go greater things.

---

Validator Error:

required attribute "ALT" not specified.

Your image element (<img) is missing the alt attribute (alt="").

Find your img element and add the alt attribute.

<img alt="" src="">

Validator errors for this will dispear.

---

Validator Error: cannot generate system identifier for general entity "url".

Amperstamps in HTML must use entitys.

Find
&

Replace with
&amp;

That includes URLs of links in your anchors.

So turn...

//add.my.yahoo.com/content?.intl=us&url=http://www.

In to...

//add.my.yahoo.com/content?.intl=us&amp;url=http://www.

---

Validator Error: end tag for element "INPUT" which is not open.

*Ignore the fact that the Validator calls elements "tags". There are no such things as "tags".

WHOA.....

size="17" maxlength="255" value=""></input>

Another reason you want to use a different editor. This code is simply not acceptable! Input elements (ignore the fact that the valid

Quick reference of references...

<table class="bob">

<element attribute="value">

So in the first quote your "table tag" is the table element. The table's "class" is the "class attribute". Then "bob" is the value of the "class attribute". You'll need to know this if you want to correctly reference or understand references used here.

- - - - - - - -

Post summary: Get a new editor! This code would be in my nightmares if I ever had a nightmare (I've never had nightmares ever).

There are a variety of editors but I would suggest for a free editor working with (what was once known as Composer from the Mozilla Suite) the SeaMonkey Composer (editor).

Get SeaMonkey internet Suite...
[mozilla.org...]

It's based off of the same rendering engine (Gecko) as Firefox is.

It's editor (comes as part of the entire suite) can be accessed from the VERY bottom left second to the left icon. It's called "Composer" as I've mentioned before.

Simply opening your page and saving it and then validating it will reduce your over 1K errors to 256 when I did this.

In Composer after you've opened your file and saved it click on the TOOLS menu and then use the validation menu.

This should hopefully get you in the right direction.

Until then working with your current editor is absolute coding suicide. I can vouch that I have learned more then you can imagine from hanging out here and if you make the same effort you'll be able to do the same.

John

[edited by: encyclo at 6:11 pm (utc) on Mar. 18, 2006]
[edit reason] tidying up [/edit]

[NicheMaster]

That, Sir, is the most complete and thorough response I have received from anyone in three months of trying to straighten this mess out. You have my eternal gratitude.

As to the editor I'm using, it is the homepage creator in SiteBuildIt, which has been around quite awhile and - the reason I went there - should be thoroughly proofed by now. Unfortunately, SBI inserts a lot of code over which the user has no control - everything in the HEAD section, for example (which makes some scripts impossible to use). And I've just been informed they also insert some kind of tag in outgoing URLs, which I'm still trying to track down and validate.

I have run that section over which I do have control - just the Body - through validators, fixed the errors and replaced my whole contribution, only to see some pretty strange things happen to it after I've saved the new version and "built" the page.

There is an option to skip their pagebuilder and go entirely with homegrown HTML, which I have come to suspect will be my only salvation (using Dreamweaver); what you lose are the common elements (logo, footer, navbar, etc.) that you then have to insert and update for each page individually, unless your third party editor can do that, which is why most people just use the SBI editor.

While your message got oddly mangled in places, I think almost all of it came through and I shall now devote myself to following your advice. Believe it or not, there was a time, shortly after the Web came to be, that I hand-coded fairly complex (for the time) multi-page sites on the fly, with no WYSIWYG editors to help. And they worked. It's been awhile, tho, and things are a tad more complicated now, so I welcome all the help I can get.

Thanks again,
J.R.

[JAB Creations]

I don't like Dreamweaver though I have a feeling I'll use it to baby myself in to databases (only for the visual until I can convert back to all text). I first started using Frontpage98 for about 4 years or so until I was forced to move to notepad which I tentatively work within until I can find a true UTF-8 capable text editor (as I'm interested in multiple language support).

Hand coding is much easier and if you were good back then you should only require a little of an update.

I suggest using XHTML 1.0 strict as you can use text/html mimetype, later impliment application/xhtml+xml and force yourself to validate the code. It will still work like HTML and there are very few differences in the markup as long as you have some decent hold on CSS.

I knew my post would require some edit so no worries encyclo. :)

Just let me know if there are any specific problems you need help addressing.

John

[NicheMaster]

Well, I have it down to 336 errors, according to [validator.w3.org,...] of which 68 are SBI-generated and I have no control over them. What puzzles me is, of the remaining 278, most don't exist - at least, notepad's search and replace can't find them. The rest largely are things I already fixed, such as extraneous <P>s SBI adds whenever I save the page, or allegedly orphaned "end tags" for which, in fact, the element was opened.

Despite all this "progress", my original problem remains untouched: No hyperlinked graphics in IE with or without the closing ">" on HREF; hyperlinked graphics in Firefox only if I leave the ">" off.

Looks like it's Dreamweaver or bust.

Thanks again,
J.R.

[NicheMaster]

Rats! Make that 268.

J.R.

[JAB Creations]

Yeah, with your site live you need to get rid of that program like a nose rash two hours before the date of your life.

Uppercase code doesn't fly with XHTML. I should have checked when I was playing with the code in Composer to see if it made the code lowercase.

Yeah, keep working on those errors! Once you really find your limit on how far you can go, post the code (between [quote] and [/quote]) and I'll work on validating the rest of the page with you on the remaining problems.

John

[jessejump]

>>>>> Each cell has a hyperlinked graphic to another page

The code should be like this:

<td><a href="index.html"><img src="mainmenu.gif" alt="photo" width="55" height="55"></a></td>

Don't experiment with leaving brackets off etc.

Try a new page, with a one cell table, add a hyperliked picture
See if that works

[rocknbil]

Despite all this "progress", my original problem remains untouched:....

Niche examine your document for unmatched quotation marks. This will always cause things to disappear. Also for unquoted attributes that **should** be quoted.

jessejump's process of elimnation is the best approach for unexplainable errors.

[NicheMaster]

Believe me, I've tried everything I could think of - but leaving off the > wasn't an experiment, it was a typo I discovered when I loaded the page one time and found one lonely hyperlinked graphic staring back at me.

I now have the errors down below 100, but SBI crashed just as I started to load it up to see how or if it would work/integrate with the rest of the site.

J.R.

[JAB Creations]

Just uninstall SBI and concentrate on the errors. Just post the errors you're not sure about on this post. :)

John

[NicheMaster]

SBI isn't something you can uninstall - it's the hosting service, with its own built-in site creation system, for which you pay a year in advance. When it works, it's great; unfortunately for me, I can't get the blasted thing to work quite right.

Story of my life lately.

J.R.

[JAB Creations]

Whoa, ouch IoI. I was thinking it was a regular dsktop application!

Well in that case I suggest using an FTP. I assume you're editing pages in some sort of text version of their editor?

Oh the situations that people create for other people! Anyway how is your page/site coming along? :)

John

[NicheMaster]

No FTP as you mean it, altho you can opt to upload HTML pages created outside the network. But in the site creation pages, you enter your own BODY code (they do everything in HEAD, which is a real HEAD-ache!), then preview it and, if it works, "build" the page, with them inserting the logo, footer, navbar and such you choose at separate locations on the site. You also can build forms, special pages and most of the usual site support and info pages by the same method.

As to mine, I had to turn my attention elsewhere the past couple of days, but I had the errors down to about 75 (half in the areas outside my control). But some of the errors being reported already have been corrected, which has me a bit perturbed.

I tried mounting the mostly-cleansed code as a straight HTML page upload to SBI, but that element apparently has been out of service for several days.

Technology: What does not kill you makes you insane.

J.R.