Link to home
Create AccountLog in
Avatar of sasnaktiv
sasnaktivFlag for United States of America

asked on

Browsers don't all function properly

Does anybody have any idea why the following image link functions properly with Firefox & Flock & Camino & Opera, but when using Safari & Chrome it fails to present the (alt='$CustomerName') content when '$CustomerPhoto' is unavailable?

"<img src='../myImages/$CustomerPhoto' height='138' border='0' alt='$CustomerName'>"

Please tell me what the solution is to get  Safari & Chrome  to parse properly.
Avatar of Barry62
Flag of United States of America image

use the title attribute as well as alt.  Chrome sees title.
Please post a link so that we can see this in situ.  Without seeing the fully-resolved HTML document, it's almost impossible to guess about it.  Thanks, ~Ray
Avatar of Chris Stanyon
You may need to give us a little more info.

When you say $customerPhoto is unavailable, what exactly do you mean. If the variable isn't set then you're likely to get a PHP error, so there's no telling what will be output after that.

Also, you talk about an image link, but the code you've posted isn't a link - it's just an image.

What exactly do you mean be failing to present the alt tag. Bear in mind that different browsers handle the alt tag slightly differently. IE for example will present the alt tag content in a tooltip manner when the image is hovered over, but firefox won't. It needs to be in the title tag for that to happen.
Old guys like Ray and I prefer a link so we can sort of plod through actual code instead of speculating and missing our nap. ;^)

Avatar of sasnaktiv


Please enlighten me at to what Barry62 is talking about with "title attribute"?
How would I use that?
Right not it's much too difficult to send a link since the pages are in development and I'd have to strip everything out or my boss will have my head.
You use the title attribute just like the alt attribute.  some browsers don't recognize alt (Chrome & Safari), so use title:

"<img src='../myImages/$CustomerPhoto' height='138' border='0' alt='$CustomerName' title='$CustomerName'>"
All browsers recognise alt and title attributes.

The alt attribute is for attaching alternative information to your image, in case the image doesn't display (errors / turned off / screen readers)

The title attribute is for adding a title to your image, and is what shows when you hover over an image.

The alt attribute is required for standards compliance. The title attribute is optional.

<img src="mountain.jpg" alt="A picture of Mount Everest" title="Mount Everest - The World's Highest Mountain" />

Open in new window

@Barry62: All browsers recognize alt - it's a required attribute, and 'alt' and 'title' are not designed to be used the same. Also, the border attribute is deprecated in HTML4 and not supported at all in HTML5. Use CSS instead.
@CD& -- Yep, that is the way.  All my best, ~Ray
I rescind my previous comment.  Chris is correct.  Your original image tag should work just fine as written.  The only thing that needs to change is the border attribute should be handled in CSS not in the tag itself.
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
...original image tag should work just fine...
We are still waiting to see the original image tag!  We are still waiting to see the web page that illustrates the failure!'s much too difficult to send a link since the pages are in development...
I just can't believe that.  Please create a web page that illustrates the issue, give it a URL on your test web site, post the URL here.  

If that's much too difficult for you, it's even more difficult for us to guess about what you might want to have differently or what might be wrong.  So far, all we have is an unresolved combination of PHP and HTML, with unresolved variables.  I might as well be asking, "My car won't run - what's wrong?"  You would be left to guess whether it has any petrol, or whether I lost the keys, or whether it's up on blocks.

I'll offer this suggestion, which should pass validation and probably paraphrases the other suggestions, then I'll sign off until you post the URL of a page that illustrates the failure.

<?php // RAY_temp_sasnaktiv.php


$CustomerPhoto = 'THIS_DOES_NOT_EXIST';
$CustomerName  = 'SASNAKTIV';
= '<img src="../myImages/'
. $CustomerPhoto
. '" alt="'
. $CustomerName
. '" title="'
. $CustomerName
. '" />' . PHP_EOL;

$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<meta charset="utf-8" />
<title>HTML5 Demonstration Page</title>



echo $htm;

Open in new window

In case you're interested in why we would ask to see the issue "in the wild" this article will show you something of the thought process that goes into testing and debugging.  It's not about broken HTML, but hopefully you will get the idea.

Good luck with your project, ~Ray
Ray-with all due respect, he gave is the image tag in his opening question.  Just because it isn't accompanied by the rest of the code doesn't mean we can't help.  Do you need to see the entire page in code to diagnose one tag?  I think not.
@Barry62: What I see in the opening question is an image tag with unresolved PHP variables, and the wrong kind of quote marks.  If we don't know what is in the variables, we are a little at a loss to know what the HTML document contains.  And since this appears to be an issue of how browsers render image tags, it follows that the HTML content of the "failing" image tag would be an essential part of the process to understand and correct the issue.

That's why I posted a code example that shows how to frame the question in a way that will lead to an answer.  As you can tell, we do not need to see sasnaktiv's entire web page.  All we need to see is the "simple sample" that illustrates the issue.

Sometimes the answer to the question is much simpler than the thought process that leads one to find the answer, and I think that is the case here.  It's like that old adage about, "give a man a fish... or teach a man to fish."  Learning the process to define and isolate the problem, and then find the answer, is a valuable skill!
Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Chris - good catch.  that makes sense.

Ray - We do know what the problem was.  The image tag is NOT failing.  The only thing that is not working (in SOME instances) is the alt attribute.  The author said

"...but when using Safari & Chrome it fails to present the (alt='$CustomerName') content when '$CustomerPhoto' is unavailable"

Also, it doesn't matter what the unresolved php variables are.  We are fixing this problem as it relates to attributes, not php variables.  And btw, you can use either kind of quote mark in an html tag, unless you are going to use quotes inside the attribute value.  In that case, you use both kinds of quote.

Also, I was teaching him about title and alt attributes, whether it turned out to be relevant to his problem or not.

If you have forgotten already, I rescinded my original comment.  Please stop picking me apart.  I'm done.  Obviously, if you think you are that much better than me, then please, by all means, keep attacking me!
Hey, I didn't mean to start a piss fight.
Each of you has his/her own opinion on how to solve this problem, and I'm glad to see that both Chris & Barry understand the core problem, because sometimes I'm not always as clear as I could be.

You guys are right, the $variable content has nothing to do with the problem.
The following line fails as well:
"<img src='MyMissingImage.jpg' height='138' border='0' alt='This image is missing!'>"

Including the "width" seems to resolve the problem, but I don't have that luxury to include it.
The reason for that is visitors to the site will have the capability to add their own images. And those images could be any dimension. I need to control the size of those images so that they would fit a certain 138px high area on the website. The width could be anything. That's why there is no value for the "width".

I want you all to know that I truly appreciate the help and opinions. And I hope there is a way to resolve this.
The two most experienced experts in the thread have asked for a link.  Without it you can continue to listen to guesses, or you can post the link and let us work on a solution

There is no solution - it's just the way Safari and Chrome work.

It has nothing to do with PHP variables, quotes, erroneous HTML or missing images - it's simply the age-old issue of browser inconsistency.

You'll just have to live with it :)
OK, not to continue the 'piss fight', but dinosaur-how do you know how much experience I have?  Just because I haven't answered as many questions as any of you doesn't mean I don't have a lot of experience.  I have been building web applications and designing websites for over 13 years.  

Enough.  I am not posting anymore comments.  I will let sasnaktiv decide what solution he wants to accept, and if it's not mine, so be it.  I'm done.
It is not about experience at a given technology.  It is about experience answer questions.  Guessing results in a weak outcome 90% of the time.  Solutions come from applying knowledge to information and requirements.

Lucky guesses that patch a fragment of a page often have unintended consequences
 and the user is back the next week with an even bigger problem, because they got a bandage instead of a solution.  Maybe that is a good thing... more points ... but points  won't buy beer.

@COBOL (and anyone else that's still reading this). Have a read through the comments I've already made - they're not based on lucky guesses!

Ray posted some code and then said he was done until a URL was posted that demonstrated the failure (right before he posted a URL that demonstrated the failure!) - not really sure how another link would help.

I think experts can sometimes look for a problem that simply isn't there. I've done it myself!
OK, I'm not done.  I DON'T make lucky guesses!!  I don't just pull up a question and see if whatever bulls**t answer I give works!  If I don't know anything (or very little) about a subject, I don't try to answer it.  

And if the author of a question wants his entire page picked apart, he can ask for it!  In this case, he asked for a specific solution to a specific part of a page!  

I am REALLY regretting getting in on this question!  To sasnaktiv, I sincerely apologize for all of this.  I did not mean  to draw all of the attention away from your question, but some of the experts think that they are GOD and their opinions are the sh**t and nobody else matters!  I will be filing a complaint.
I've got it !!!
The solution is actually very simple.
It has nothing to do with experience (I have very little of that), and nothing to do with guessing. Although you can probably guess how I did it.
It just took a little creative thinking.

And it functions regardless of which browser you are using -- even if it's IE on Windows!

All of you have been a great help.

Who wants to be the first to know how it's done?
With out a hack or a width, it can't be done, unless you've just re-written the core of Chrome and Safari ;)
Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
That's not really a solution to your problem, it's a huge side step :)

What if:

$CustomerPhoto = "this_picture_doesnt_exist.jpg";

As for points, it's really up to you, but I'll offer this (biased) opinion. Looking back through the 27 comments, and ignoring all the bull, guesses, arguments and general opinion, there are only 2 people who offered you any idea as to what the problem was - DaveBaldwin (comment #38712139) and me (comment #38712954).

The ball is in your court...
Look!  I may not be a WIZARD, or a GURU, or whatever the F*** else you guys are, but I don't deserve to be berated like I don't know what I'm doing!!

I just made ONE misinformed suggestion, and everyone thinks I'm guessing!!!  I even RESCINDED the comment!!  

go ahead and take all the points!!  I don't give a SH*T!!
Okay, cool your jets everybody!
After all who would have guessed that there would be a completely different approach to the problem? Except me of course. Does that make me a WIZARD or a GURU or a whatever? I don't think so. I'm the furthest from it.

It seems to me that Barry was the only one so far to admit that it was indeed a solution.

As Chris points out, it may be a "huge side step," but it's one that solves more than just the obvious 'alt=' problem. It gives me the results I want across all browsers and all platforms. That in itself is a major accomplishment. And it eliminates those stupid icons that indicate that an image is broken or missing.  It also avoids that ridiculous border around the broken image link. It gives me a clean page, exactly the way I want it.

Any other comments?
@Barry62 - you don't seem to be having a very good day, and for some reason that seems to be making you very angry.

Re-read the comments here and explain where you think you're being berated. This is a forum for discussing technical issues, and that often includes giving and receiving constructive criticism - it's how we all learn. If you're going to lose the plot and throw a tantrum every time that happens, then maybe this isn't the place for you.

Can you show me where, in any of this thread, you've given a correct and valid explanation for the problem that sasnaktiv had.

As for taking all the points, none have been awarded yet.

go ahead and take all the points!!  I don't give a SH*T!!
Clearly, you do!

Effing and Blinding when you don't get your own way makes you sound like a petulant child and is probably not the best way of earning the respect of your fellow experts.
Hey sas.

It's your question and your right to accept a solution however you see fit. The only reason I said it was a side step (and that wasn't a criticism) was because it really is a bit of a 'hack'.

That's not always a bad thing and every web developer has employed more than their fair share of hacks in the past, but it is important that you're aware of the fact that it's a hack, because it doesn't solve the problem (or really answer your question). The solution you've found answers the question: how do I show alternative content based on a PHP variable.

It may sound trivial but in programming terms, it's a world away. In one of my previous posts I pointed out that your solution doesn't resolve the issue of not showing the alt text if an image not shown (missing / currupt etc.).

If your solution works for you on this occasion, then that's a good thing, just be aware of why your original code didn't work.
Chris - Didn't both you and dino say I was guessing?  In my book that is a berating comment, especially when you have no idea what my qualifications are.

And I never said the explanation I posted was correct.  I THOUGHT it was correct when I posted it, but I was proven wrong - but not before I was cited for GUESSING!  I even rescinded, as I have pointed out multiple times.

I don't 'throw a tantrum' when I get constructive criticism.  I am not complaining about the corrections that were made to my original post.  I am complaining about the fact that other experts think I am guessing when I am just misinformed.  I am complaining about the fact that some experts think answering millions of questions makes you a better expert than anyone else.  As I said before, just because I don't answer a lot of questions here doesn't necessarily make me less qualified!  I simply don't have time to spend all day answering questions.

I apologize to all involved for the flames, and I am sure every expert who participated in this question is more 'qualified' than I am based on questions answered, but I just don't have patience for people who flaunt that.  The constructive criticism was welcome.  Being told I am guessing was not.
Chris - Didn't both you and dino say I was guessing?

And I never said the explanation I posted was correct.
So why are you upset that you might not get the points?

I was proven wrong - but not before I was cited for GUESSING!
In comment #38711756 I pointed out some inaccuracies with your comments (about the alt and title tag being the same and your code using a deprecated tag) which you accepted. This was long before anyone even mentioned guessing!

I am complaining about the fact that some experts think answering millions of questions makes you a better expert than anyone else.
Really! Show me a single comment in this entire thread where that's the case.
Let me know when you guys are done.
Then I'll figure out the points.
Or maybe I should give it a day or so for everyone to cool down.

Let me ask this: Does anybody object to me splitting the points equally between Barry & Chris?
At least no ones figured out how to throw a left hook online :)
As I said, use the points however you like.  

Chris, I honestly am sorry for perpetuating this whole thing.  I suppose I have let my pride go before my judgement. But however you look at it, there were things said here (by other experts than me) that did not need to be said.  

I'm just looking for a little professional courtesy.

I'll be unmonitoring this question now.  I hope, if any of us meet in another question, that things will be different.
I'm sure it will be different. I've never seen anyone hold a grudge between questions.

The downside to communicating through a keyboard is that subtleties conveyed in spoken language are often missed on-screen and an off-the-cuff comment can seem harsher than was intended.

Have a very Happy Christmas :)
Glad to see you two are trying to "make nice".
Well, it looks like the Mayans were wrong by at least one day.  On Monday, October 17, 2011, the A.Word.A.Day "Thought for Today" was "A problem well stated is a problem half solved."  I am sure there is a contra-version of this quote somewhere ;-)

The most insightful comment here seems to be the one at ID: 38714092

I have enough points to orbit Saturn, so I haven't any issue with how you might dispose of the points, but if it were up to me, I would delete this question. It was a red herring about "browsers don't all function properly."  The better characterization is at ID: 38713906.  The 50,000-foot view of this issue might be "We should write PHP programming that takes all of the variables into account and thereby generates sensible and valid HTML documents."
Orbiting Saturn sounds like a fun way to spend the holidays.  Can I come? ;^)

Hi guys,
Sorry this took so long, but the holidays & family participation kept this on the back burner. In an effort to be fair to everyone involved I went back and reread the comments as well as the high level of participation from everyone. I split the points evenly between the three participants who offered what I thought was the most helpful input.

I believe that my solution is the way to go. It eliminates all the problems with different browsers.

BUT without all the help and involvement from each of you, I might never have discovered the alternate PHP route on my own.

I thank you all for your help & involvement and wish you all a happy, healthy & prosperous new year.