[RESOLVED] Image links not working right

@AmazingAntMar 08.2007

You’d think I’d be having problems with IE, but I’m not… For some reason this is a problem in Firefox. You heard me right, Firefox. So anyway, Here’s the problem code:

[code=html] <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html> <head> <title>Testing Page</title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <meta name=”author” content=”AmazingAnt — AmazingAnt.***.***” /> <meta name=”generator” content=”Notepad 2 — http://www.flos-freeware.ch/notepad2.html ” /> <link rel=”stylesheet” type=”text/css” href=”stylesheet.css” /> </head> <body> <div class=”Left_Links”>

</div> <div class=”content”>I hope you realize there’s no content yet.<br />I <span style=”font-size: 15pt; font-style: italic; text-transform: uppercase;”>dare</span> you to click News again!</div> <div class=”Footer_Links”>  | <a href=”#” onclick=”alert(‘Link1 is a dud.nThat means that this link does nothing.’);” title=”Null Link”>Link1</a> |   | <a href=”#” onclick=”alert(‘Link2 is a dud.nThat means that this link does nothing.’);” title=”Null Link”>Link2</a> |   | <a href=”#” onclick=”alert(‘Link3 is a dud.nThat means that this link does nothing.’);” title=”Null Link”>Link3</a> | 

 | <a href=”#” onclick=”alert(‘Link4 is a dud.nThat means that this link does nothing.’);” title=”Null Link”>Link4</a> |   | <a href=”#” onclick=”alert(‘Link5 is a dud.nThat means that this link does nothing.’);” title=”Null Link”>Link5</a> |   | <a href=”#” onclick=”alert(‘Link6 is a dud.nThat means that this link does nothing.’);” title=”Null Link”>Link6</a> |  </div> </body> </html> [/code]

From this, you might have noticed that some of the links don’t work. The problem part is the links for the “Main Page”, “News”, “Contact”, and “Other”. For some reason, it won’t let me click on “Contact”, but the other three are fine. When I take the last one out, then the contact button works again, but the News button dies!
GAHHH!!!!

Just so everyone knows, that part of the code has NO OUTSIDE CSS, the page is written in XHTML 1.0 Strict, and in case you hadn’t guessed by where it says “I DARE you to click News again!”, the page has been generated by a server-side script, specifically PHP.

Any ideas? Pleasy cheesy?

Edit: Forgot to remove my server’s address from the Meta tag for author…:eek:

to post a comment

HTML

17 Comments(s) _↴

@ryanbutlerMar 08.2007 — #Do you have a link to the page in question?

@AmazingAntauthorMar 08.2007 — #No I do not, as it is on my home computer's web server, and as such I'd rather not pass out the address. (Hence my editing out of some code) However, I can save the page (images and all), zip it, and upload it for you to see.

Ignore my css notes, but I made sure to edit the meta data before uploading.

[upl-file uuid=b32da880-07f4-424d-8305-8dd946e13fd8 size=13kB]Problem Code.zip[/upl-file]

@WebJoelMar 08.2007 — #...From this, you might have noticed that some of the links don't work. The problem part is the links for the "Main Page", "News", "Contact", and "Other". For some reason, it won't let me click on "Contact", but the other three are fine. [I]When I take the last one out, then the contact button works again, but the News button dies![/I]

GAHHH!!![/QUOTE] -You are describing the "white-space bug", -but that is actually an IE thing. That this isn't working in Firefox actually bodes favorably, as it might suggest that the code is [I]correct[/I] and IE, um, -[I]isn't[/I]! I know that's a tough concept to get one's head around, but when Firefox shows it wrong, the code is probably wrong but Firefox is showing it [I]as it is written[/I]. Incorrect code tends to show '[I]correctly[/I]' on IE. -Welcome to our world of paradigms! :eek:

Would needs to see the whole code but I will try some things with just this and see if I can replicate your observation(s).

@AmazingAntauthorMar 08.2007 — #Would needs to see the whole code but I will try some things with just this and see if I can replicate your observation(s).[/QUOTE]
Well, that was the whole code. However, if you really need it with the images in there, I uploaded it in a zip file already.
-You are describing the "white-space bug", -but that is actually an IE thing. That this isn't working in Firefox actually bodes favorably, as it might suggest that the code is [I]correct[/I] and IE, um, -[I]isn't[/I]! I know that's a tough concept to get one's head around, but when Firefox shows it wrong, the code is probably wrong but Firefox is showing it [I]as it is written[/I]. Incorrect code tends to show '[I]correctly[/I]' on IE. -Welcome to our world of paradigms! :eek: [/QUOTE]
Ok, so what you're saying is that the code was done wrong, and IE shows it how I intended it because IE is a piece of feces?

Well, there's another bonus for Firefox!

@WebJoelMar 08.2007 — #Well, that was the whole code. However, if you really need it with the images in there, I uploaded it in a zip file already.[/QUOTE] yes yes... I was composing my reply and uploaded probably just moments after your comment was posted. I may not need any further code at this point.

Let's get rid of the navigation as you have it, and go for the semantic "<ul>". You have images as anchors and the <br /> is throwing-in unnecessary line-wrap.

I note one 'warning', -"malformed URI referance" here:

<img src="Graphics/linkimages.php?text=[B]Main Page[/B]&center=60" alt="Main Page" style="border: none; height: 29px; width: 211px;" />

should avoid "white space" in image names. probably harmless, but should be addressed to correct.

@AmazingAntauthorMar 08.2007 — #yes yes... I was composing this and uploaded before your comment was posted. I may not need any further code at this point.[/quote]
Yea, I just did the same thing. :rolleyes:

<img src="Graphics/linkimages.php?text=[B]Main Page[/B]&center=60" alt="Main Page" style="border: none; height: 29px; width: 211px;" />

should avoid "white space" in image names. probably harmless, but should be addressed to correct.[/QUOTE]
I must have forgotten to put the %20 into the PHP array that puts that together. You can consider that fixed.

@WebJoelMar 08.2007 — #I re-did the links to be [I]unordered lists[/I], and styled them nicely.

I photo-edited [I]one[/I] of your background-images and am using just that, -one image (at a cost-savings of 300X the size of the image, because we are using ONE image for the background, and TEXT for the link-proper. I could take a vertical 'slice' of that one image and cause it to 'tile' the <li>s, - further reducing your page-weight by another few bytes...)

Haven't tested this much... try it out and see what you think.

[upl-file uuid=71be7586-dc0f-407e-bfe1-0bbb8664e458 size=3kB]testThis.zip[/upl-file]

@AmazingAntauthorMar 08.2007 — #Well, that's... nice. I like the use of the a:hover thing, but I was trying to do this [I]without[/I] text, thus using only images.

This is nice, and works pretty well, but ruins the anti-text thing.

As to saving file space, I'm not really concerned about it. What would you suggest for doing this with the images?

Actually, now that you reminded me of the CSS Pseudo stuff, I'm going to have to add them in.

@AmazingAntauthorMar 08.2007 — #If worst comes to worst, I don't mind doing it that way. I'd just prefer to do it with separate images with the text already part of said images.

@WebJoelMar 08.2007 — #Why would you want to do this [I]without text[/I]? ? It makes updating difficult, -adding or re-naming link names means another image, another http-request, etc. For the blind, the images are more-or-less without meaning for the links (but you can insert text that is very, very small like 1px high so that screen-readers can 'read' them). If you are worried about anti-aliasing of the font, use "verdana" font which is the 'made for the web' font, or "arial" which is probably the 'cleanest' looking font, and/or add "font-weight:bold" and totally fake the whole thing ("bolded" text looks to have the least amount of aliasing around the edges).

-I'm just trying to understand why you'd want to use a technique that is about 10-years old (images with text embedded into the image, very DM/FP). But anyway, -did this at least fix the problem you cited? I didn't see the problem with what you had in Firefox (although the <ul>s really should be retained for the "lists", even if you do go with seperate image backgrounds for the anchors).

?

@AmazingAntauthorMar 08.2007 — #...It makes updating difficult, -adding or re-naming link names...[/QUOTE]
Actually, it doesn't. If you look at the original code I posted, the img tag's src attrib for each and every image is pointing to the same php file.

The php file in question is taking the original image, adding the text, and outputting the result as a new gif file. As such, this is actually a very easy way for me to get things done, as all I need to do is update a database with the new link's URL, title, and the text I want in it.

As to the screen-readers, the site I'm working on is for a very specific group of people, which does not include anyone who uses a screen-reader. However, could they not just use the alternate text supplied?

However, I'll try this once more with the original code, and put everything into an unordered list just to see if that fixes it.

@AmazingAntauthorMar 09.2007 — #Well, it doesn't look like that's going to work out how I had hoped.

So, I guess this is gonna be what I meant by "if worst comes to worst", and so I'll go ahead and use your code, and just live with the text.

But, what may I ask is this "white-space bug"?

@AmazingAntauthorMar 09.2007 — #?

I changed to your code, and now it's back to it's evil...

The contact line now has about one px by the 211 wide that can be clicked, and other only works on the bottom half of the word.???

Again, IE does not show the problem...

This is weird, because the code you gave me worked fine, it just doesn't once I add your code to my page. You still have everything else, any clue?

@AmazingAntauthorMar 09.2007 — #Ok, I'm lost now... I tried blocking out portions of my CSS file, and it turns out that when I block out the right line of code, it all works again.

This was the problem:

div.content_box

{[INDENT][COLOR="Red"]top: -70px;[/COLOR]

text-align: center;

position: relative;[/INDENT]}

Now how that broke the whole thing I'll never know, but when I remove that line, all the buttons work.

Unfortunately, the divider content_box is gonna have to be moved so it's back where I wanted it, but I guess at least I know what's broken.

@WebJoelMar 10.2007 — #...But, what may I ask is this "white-space bug"?[/QUOTE]

If you've ever created an <ul> and have a number of <li>s in it, and the [I]last one[/I] either is cut-off, shows up in two places, spaced rather big vertically or is somehow 'messed up' and [I]adding another <li>[/I] makes the previous one 'okay' and the last one added [I]messed up...[/I], -'white-space bug'.

In a nutshell, in an <ul>, IE sometime incorrectly sees a 'line break' in your HTML code as a "virtual carriage return" (to borrow the typing expression), and it inserts a 'virtual <br />' there... totally messin' up your code.

So:

<ul><li><a href="#">One</a></li><li><a href="#">Two</li><li><a href="#">Three</a></li></ul>

and the output is a list like:

One

Two

Three

above is 'white-space bug-free', whereas:

................................

<ul>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

triggers the 'white-space bug' and the output is:

One

Two

Three

......................

Ways to combat this are to declare "display:inline-block;", set a default width for the <li>, use "<--" after <"/li>" and "-->" before "<li>", -there are other methods but either of these is sufficient.

This will explain it further and probably better:

http://www.csscreator.com/node/6745

@AmazingAntauthorMar 10.2007 — #Wow. Craziness.

@WebJoelMar 10.2007 — #...Now how that broke the whole thing I'll never know, but when I remove that line, all the buttons work....[/QUOTE] Oh yeah (-was in a a hurry to take my son out for a walk and didn't finish the reply properly), -my example worked and when you changed it, it stopped? -I bet you were looking at the file from my template, -with the " [B]* {margin:0; padding:0}[/B] " in <STYLE>. If you merely cut & pasted the <ul> and the stuff for the <ul>-proper without the "margin:0;" from the first line of my STYLE, -it [I]just might[/I] bust apart.

You would have to insert "margin:0;" in the <ul> somewhere, -probably on the " ~ul li {[I]margin:0;[/I] foo:etc.}. That might be how to solve the whole thing...

The <ul> I did is [I]fairly simple[/I] but if we're using different CSS in <style>, the results would probably be quite different. :o I really should create a more 'generic' or transitional template to use for returning my often verbose explanations and not just assume that everyone uses the same uber-STYLE that I do. ? (and, this is probably why when I test others' code I often fail to see [I]their[/I] complaint in [I]my[/I] template the first time or two and I have to ask for clarification... :eek: )

Also in #HTML _↴

php or shtml for headers and menus IFrame Help, Please!HTML5 GeoLocation - Where are you on the Google map?

Success!

Help @AmazingAnt spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Image links not working right

17 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

[RESOLVED] Image links not working right

17 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #HTML _↴