I have website, just discovered when got new mac 27" and zoomed the window, my website links don't work if in Safari zoomed:
http://www.kenweingart.com

No issues -- work perfectly with with Firefox or Chrome & IE.
Any idea why only Safari has problems and issues?-- thanks.

It works for me. I have no idea why it isn't working for you.

Interesting—I've never used Safari's "Zoom everything" feature before. It appears that the links are still there, but in the original, unzoomed locations. If you Zoom In once, for instance, the actual links for Fashion/Beauty, Advertising/Editorial/Music, etc. will be found just below the photo—well above the words.

I imagine that's because the links aren't hypertext, but rather part of an imagemap. The HTML doesn't know anything about the page being zoomed; it just knows that (for example) the points (69, 504) and (180, 590) in the actual image loaded from the server represent the upper left and lower right corners of the clickable area for the "http://weingartbeauty.com" link.

Changing the displayed size of that image via Safari's Zoom function doesn't change the HTML, which still instructs the cursor to find the link between the points (69, 504) and (180, 590). Since the displayed image is larger, this has the effect of "moving" the clickable area "up."

Since I know nothing about how Safari implements its Zoom feature, I don't know how one might go about dealing with this problem. Sorry.

According to a reply to How to fix image maps in Safari? Broken when page is zoomed, this problem doesn't manifest itself in Safari 4.0.4. I'm running 4.0.3, and I imagine Jon is running 4.0.4, so if kevs is running a version earlier than that, the solution may simply be to update.

Firefox works fine for me (3.5.1).

Bingo. Nailed it in one. That's exactly the problem.

I'm using Safari 4.0.4, and I notice the same thing--the links don't work correctly when the page is zoomed.

I also do not understand why that page is built the way it is. Why is the entire page an image with an image map, rather than having those links be text? If the page were built differently, there would not be a problem.

Broken for me in Safari 4.0.4, but works in the Webkit Nightly.

I'd call that a bug if it doesn't adjust image coordinates.

HOWEVER, text word wrapping usually gets hosed too and that's likely to really mess things up in an unfixable sort of way.

Guys, thanks, I really appreciate this help/ analysis.
Ok, I'm in 4.0.4 and the problem persist. The links are there but about and full inch or more above the hotspots.

The homepage is basically one large jpeg. Then in Dreamweaver I make hotspot links.

Never been an issue until I got large 27" and then I noticed issue becuase I keep a permanent zoom script in my default (but never ending issues) browser Safari.

A web coder I use says don't even bother with it, 5-6 people a year on Safari, zooming, not worth it. Still I hate idea every year 5-6 potential clients will mouse to those links and not be able to click.

I can easily solve this. I just had a designer reduce the size of the rectangle, and I'm about to make a long table below it
http://tinypic.com/r/2r4sbbr/6

But before I continue this laborious process.
1) is there an easier way to do this, keeping the large orginial jpeg? (read that article, but did not understand it though.)
2) if this worth it, to do for the few who are zoomed on Safari.
3) Should just wait -- maybe a update of Safari will fix it.
4) Why is Safari the only browser with this issue? don't see it in Chrome, Firefox, or IE in Windows.

Since it works in Webkit, that generally means it'll be fixed in the next release of Safari.

If you want to avoid the issue don't use a large graphic with an image map. Cut the graphic up so the link graphics are individual files with regular links attached to each one.

Why do you want to make the front page, including the links, just one big JPEG? What is your goal in doing that?

Kevin/Tacit
Well my first designer created this for my main site, 10 years ago.
ONe large PSD file with many layers. Then a jpg is made. Then hotspots for the links. Never been an issue till last week.

That said, I'm open to change, but I don't know how to cut up graphics. Is this more elegant than putting a table below the revised, thinner border?

Or should I just assume this will go away with future Safari releases?
Personally, it's only issue with Safari to my knowledge. Few people use Safari, fewer use it zoomed, so if it's going to be fixed down the road, I think that sovle it no? thanks.

What I would suggest is either a table or CSS for the image, then placing text links underneath it. This will make the page load faster, resolve the problem when zooming, and help search engines to better see your site.

Tacit,
thanks, yeah, was thinking of table, but why not just wait for update?
is should fix that correct? and IE, Firefox, Chrome, don't have this issue.
And it's only for those zoomed. Why do all this work for a flawed browser that may even be fixed any day? just playing devils advocate....

How would CSS work -- then would not need a table correct?
I seen the rollover suggestion -- but don't know how to do that. anyone know?

And why does Safari alone have this issue?

I would do it not to fix the zoom problem, but because it's the Right Thing To Do. Having text links makes the page more search engine friendly, makes the page smaller and load faster, and makes it look better (no JPEG degradation of the text!). It also makes site maintenance easier; you can, if you like, swap out that image without changing anything on the rest of the page.

You can do it in CSS without the use of tables. An in-depth explanation is probably beyond the scope of a single reply here, but briefly, you'd set up a styled <div> with float: top for the image, and a styled <div> for the text links underneath. Or even pin the image to a specific location on the page by specifying an absolute position in the css for that image.

Tacit, I woluld have to hire someone to do it. is it worth all that? you agree new version of Safari will fix this. and still curious why this is an issue only with safari. Still open to ideas.

Only Search Engine benfit is a few text links -- negligible considering all SEO already have going on.

Also, every time want to add/ decrease number links, may have to do whole new table. that can be more work that moving layers in photoshop.
Unless of course do full CSS

I think it's worthwhile to do. Maybe a chance for you to do it yourself and pick up some HTML skills along the way, rather than hiring someone?

You could add/delete links without redoing the table, if all the links are in just one cell. There's no need to create a separate cell for each text link.

Tacit,
got not time to become a web- designer, but could make crude table below a thinner version of the jpeg. But yes, you do need table with cells no?
How else can you position new links rightward? just tested in Dreamweaver, and hitting the space bar to move right does not work. Seems you need a new cell to the right.

You can set the cell to right justification instead of left justification, or wrap the line of text in a <div align="right">. Either should work.

Don't see a justification tool for cells. All I know is I hit space bar and nothing happens. html, very tough to figure out

Tacit, just saw a few sites from reps, who rep artist in my field who have homepages with links that don't work in Safari zoomed. Major, major reps with 20 artists links on hopepage --

If they are not fixing it, I don't think I'm going to bother.

Again, you think Safari will solve this?
and I've asked this a few times-- why only Safari? alone among browers with this issue?

You can edit the HTML by hand to say <td align="right"> in the cell, or hilight the text and use whatever justification tool your program uses for text.

The problem only exists in Safari because of a bug in Safari (or more precisely, a bug in the WebKit rendering engine that Safari uses; Google Chrome also uses WebKit and behaves the same way). The bug has been fixed in the current version of WebKit, so the next release of Safari and Chrome will probably fix it.

tacit, I inserted that code. Still press space key to get a few spaces away from last word, and nothing happens. that the nature of html.

thanks for clear explanation of this, why bug? are things suppsed to get more stable with each release, not massively worse? what's worse than links not working?

Chrome: works perfectly now in Chrome. Issue is only with Safari.

You can't use multiple spaces in HTML; if you press the space bar more than once, you only get one space.

HTML has a special code that you can insert when you need more than one space. The code is a non-breaking space, which is written in HTML as



Most HTML editors let you put this in automatically by holding down the Option key and typing a space. In HTML editors that don't, you have to edit the source code to put those codes in. So for example if you want four spaces between the word "big" and "elephant," in HTML it would be written

tacit,
nice trick, works Dreamweaver with the option.
So doing this, you think tables are not even necessary?

(that said, leaning to not bothering as you say Safari will fix this -- but it's nice option)

Did you notice problem is only Safari? Chrome is ok?

You could do it without tables, though you'll get less control over the exact placement of the link. If it were me, I'd use tables or CSS, depending on how lazy I was feeling (very lazy=tables, feeling like tearing my hair out=CSS).

everyone on DW forum replies to every thread with, learn CSS.
How many hours would that take to get down?
like about as much as Photoshop or Final Cut Pro?

You can learn CSS fairly quickly; that's not the problem. It's a bit more complex than old-fashioned HTML, but not vastly so.

The problem is that there are popular browsers (I'm looking at you, Internet Explorer!) that have very serious bugs in the way they interpret CSS, and don't even come close to following the CSS standard. A page written in perfect, 100% flawless CSS is likely to be garbled, or even totally unreadable, in Explorer. That's one of Microsoft's little gifts to the World Wide Web.

What's worse is that different versions of Explorer render the exact same CSS in different ways! You can write a piece of CSS, and it will look different in Explorer 6, Explorer 7, and Explorer 8. So for that reason, if you do a lot of CSS, what you end up doing is writing code that looks at the browser the user is using, and then gives one set of CSS to all browsers except Explorer and then different bits of CSS to the browser if it's Explorer 6, still different bits if it's Explorer 7, and different bits again if it's Explorer 8.

The most maddening, infuriating part of writing CSS isn't learning it and isn't coding it...it's making the site work in Internet Explorer. Creating workarounds and fixes to Explorer's broken CSS rendering can easily take twice as long as writing the CSS to begin with, which is one of the reasons I still use old-fashioned HTML in most of what I do.

I wasnot even on the fence. Was not leaning to spending 30 hours learing CSS. And now I'm even further away!
Why bother!
IE is the most viewed browser.
So why is everyone on the Dreamweaver forum keep asking me for every little 2 bit post I put up; "why don't you learn CSS"?

They're looking ahead.

Usage share of web browsers.

Just got this from that thread on DW.
Still do I want spent time learning CSS?
I'm not a web designer. Only have one little site which I just change little things once in a while:

Edit by moderator to add: Big bulletts at Adobe Forums - Dreamweaver.

am not here to debate because to be honest there is no debate between the old and the new. CSS is very powerful and yes browsers do render it different at times. However, what ever time it takes to fix any issues with CSS is most certainly faster then writing old school html. As far as IE goes...IE6 is in the way out and more and more large sites are not even supporting IE6 anymore (me included) ....even youtube!! http://www.techcrunch.com/2009/07/14/youtube-will-be-next-to-kiss-ie6-support-go odbye/ ....now if youtube is dropping IE6, a website that millions visit weekly...then what does that say about the daily web designer. As far as IE8... one simple line of code in the header of the page fixes any issues and forces the page to only render in IE7 and when you are ready to have IE8 support then simply remove the line.

Insert this meta tag into the head of your html and pow...your page will only render in IE7 even if the end user is using IE8...like magic.
<meta http-equiv="X-UA-Compatible" content="IE=7">


Kevin...again with all do respect to the direction you want to take your skills. CSS is here...it is powerful and not as hard to learn as you may think or fear. Don't listen to the negatives. There are negatives with every type of coding, however what ever negatives there are in CSS they outweighs any reason to code old school.

Maybe you could start with something easier... like learning how to apply quote tags in forums?

kevs,

I have edited your post #7881 to provide a link to the material from {sitewide} which you have posted at FineTunedMac.

In the future, please provide a link to such items in order to respect the property rights of other people and other troubleshooting forums when posting here.

As a side note, you might also consider extending to tacit the courtesy of providing attribution for his information which you copied and pasted at Adobe Forums - Dreamweaver.

There's some truth to that, and I understand where he's coming from. CSS is definitely the way forward, no doubt about it.

But I don't find it faster than using plain HTML; I actually find that using tables for layout is faster than using CSS for layout. I think that learning CSS is a valuable thing to do, but I also think that the choice not to support IE 6, especially if you plan to make money from a Web site, is a bit like saying "I'm going to set up a store, but I will refuse to sell to anyone who drives a Ford."

I'm with you Tacit,
no energy really to learn CSS -- I'll hire others to do pages if need be.