Solved

Browsers don't all function properly

Posted on 2012-12-20
42
313 Views
Last Modified: 2013-01-02
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.
Thanks,
Sas
0
Comment
Question by:sasnaktiv
  • 13
  • 11
  • 8
  • +3
42 Comments
 
LVL 8

Expert Comment

by:Barry62
ID: 38711477
use the title attribute as well as alt.  Chrome sees title.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38711479
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
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38711487
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38711533
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. ;^)

Cd&
0
 
LVL 1

Author Comment

by:sasnaktiv
ID: 38711602
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.
Sas
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38711704
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'>"
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38711753
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

0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38711756
@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.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38711807
@CD& -- Yep, that is the way.  All my best, ~Ray
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38712051
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.
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 167 total points
ID: 38712139
Here's a page about it with examples: http://www.paciellogroup.com/blog/2010/01/alt-and-title-content-display-in-popular-browsers/   From what he says, the fact that you don't have a 'width' value may be the problem.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38712740
...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!
...it'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.
http://www.laprbass.com/RAY_temp_sasnaktiv.php

<?php // RAY_temp_sasnaktiv.php
error_reporting(E_ALL);


// A DEMONSTRATION PAGE TO SHOW HOW TO CREATE AN IMAGE TAG


// CREATE VARIABLES FOR OUR HTML
$CustomerPhoto = 'THIS_DOES_NOT_EXIST';
$CustomerName  = 'SASNAKTIV';
$xyz
= '<img src="../myImages/'
. $CustomerPhoto
. '" alt="'
. $CustomerName
. '" title="'
. $CustomerName
. '" />' . PHP_EOL;


// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>HTML5 Demonstration Page</title>
</head>
<body>

<p>$xyz</p>

</body>
</html>
HTML5;

// RENDER THE WEB PAGE
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.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_7830-A-Quick-Tour-of-Test-Driven-Development.html

Good luck with your project, ~Ray
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38712824
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.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38712860
@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!
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 167 total points
ID: 38712954
I've just had another read through the original question and I think we're all slightly off on it, and my interpretation is now this:

Why does the alt text not display when the image doesn't show, either because of user settings (turned off), device settings (screen readers) or error (404).

It seems that the alt text won't show in Chrome or Safari unless the img tag has dimensions set large enough to display it. It does, however, show in all other browsers, even if  dimensions aren't set. Seems to be another cross-browser issue!

Have a look at the following fiddle using your various browsers, and hopefully it will make sense.

http://jsfiddle.net/ChrisStanyon/2F9pw/
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38713178
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!
0
 
LVL 1

Author Comment

by:sasnaktiv
ID: 38713609
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.
Thanks,
Sas
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38713611
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

Cd&
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713669
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 :)
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38713710
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.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38713745
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.

Cd&
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713784
@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!
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38713831
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.
0
 
LVL 1

Author Comment

by:sasnaktiv
ID: 38713852
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?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713854
With out a hack or a width, it can't be done, unless you've just re-written the core of Chrome and Safari ;)
0
 
LVL 1

Accepted Solution

by:
sasnaktiv earned 0 total points
ID: 38713906
No hack. No width. No height.
Just a totally different approach altogether.
You're going to love it.
<?php
$CustomerPhoto == "";
if ($CustomerPhoto ==""){$image_OR_alt="<span style='font-size:14pt; font-family: Arial; color:RED; font-weight: bold;'>No Photo!</span>";} 
else {$image_OR_alt="<img src='$CustomerPhoto' height='138' border='0' alt='No alt neeed'>";}
echo "
Variable 'image_OR_alt' content is: $image_OR_alt
";?>

Open in new window

Thanks for all the attention.
Sas
PS: How should I award these points?
0
 
LVL 8

Assisted Solution

by:Barry62
Barry62 earned 166 total points
ID: 38713949
hmm.  Good solution.  I don't think most of us were thinking along the lines of a PHP solution (and myself being a PHP developer!)

Glad you figured it out.  I hope your day needed a little drama, because you got it! ;)

Award the points however you feel you must.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38713962
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...
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38714010
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!!
0
 
LVL 1

Author Comment

by:sasnaktiv
ID: 38714054
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?
Sas
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38714067
@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.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38714092
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.
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38714190
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.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38714250
Chris - Didn't both you and dino say I was guessing?
No!

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.
0
 
LVL 1

Author Comment

by:sasnaktiv
ID: 38714307
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?
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38714326
At least no ones figured out how to throw a left hook online :)
0
 
LVL 8

Expert Comment

by:Barry62
ID: 38714358
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.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 38714368
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 :)
0
 
LVL 1

Author Comment

by:sasnaktiv
ID: 38714435
Glad to see you two are trying to "make nice".
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38715547
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."
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38715736
Orbiting Saturn sounds like a fun way to spend the holidays.  Can I come? ;^)

Cd&
0
 
LVL 1

Author Closing Comment

by:sasnaktiv
ID: 38736027
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.
Sas
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now