I have this site: http://www.fly2.com.cy/index2.html which is set up and displaying fine with firefox and internet explorer on my PC but my client has a mac and sent me a screen shot where the site is all messed up in Safari and Explorer on his mac. I’ve tried a few things but nothing seems to work, does anyone have any ideas on resolving this issue?
I’ve attached the screenshots the client sent me.
any help will be greatly appreciated.
Thanks!
I can only do the browsercam shot (which you don’t like ;)) but I’ve recaptured here anyway (you may need to refresh) .
http://www.browsercam.com/public.aspx?proj_id=523012
Your page is listed as template.html and seems to be fine now in IE5.2 mac (10.3 and 10.4). Safari 1.2 and 1.3 is also displaying much better although there is the repeat bug in the top menu with the arrow - which I don’t think is worth bothering about.
Excellent work far above and beyond the call of duty.
I hope the OP realises how much work you put into this (and charges his client double) otherwise everyone will want IE mac compatibility for free.
It looks rubbish in Netscape 4 though 
(That’s a joke I never checked)
I just uploaded a new version that works for IE 5.2 mac – I finally got Snow Leoptard running in VirtualBox. Looks good in the latest safari there too… I generally don’t bother checking legacy versions of safari as prior to 2.0 they were too buggy to rely upon. The latest is 4.0.3 and it’s not like it doesn’t work on legacy versions of the OS. (hell, they still update the PPC builds for it when they won’t even update the OS for that anymore!)
Screencap of it working – IE 5.2.3, OSX 10.6.3
Though it’s funny realizing I’m running OSX in a Virtual Machine which is then running “rosetta” – a PPC emulator to run IE 5.2 – Almost as convoluted as when I used to run WinUAE to run sheepsaver to run the Atari 5200 Emulator I liked.
the side area just needs a width on it… don’t know why but it was collapsing PADDING. The margin issues were able to be resolved by shifting around some values, and then throwing the /* \/ / */ hack at it. Ugly, but it’s IE, what do you expect… and yet somehow it’s STILL valid CSS 2.1 (I’m amazed I didn’t have to throw zoom in there). The ‘double line-height on position:relative next to a float’ bug also reared it’s ugly head… I increased the padding so there’s no longer overlap between the rounded corners and the content, that way I didn’t need the z-index trickery. Sometimes appearance has to give way to accessibility/compatibility.
If anyone else wants to double check that it would be much appreciated… since I’m inside Rosetta I’m wondering if PPC native would render different; much less how older versions work since I only tested against the latest version of IE Mac. (though yes, it’s broken in 4 and there’s not a thing we can do about it – I forgot that with 4.5 they dropped 68K support)
Very good work Jason as usual
Unfortunately IE5 mac is a hard nut to crack and the display is quite broken there:
http://www.browsercam.com/public.aspx?proj_id=523012
The images called testfly were the OP’s original site with my added fixes and everything is displaying correctly in Ie5mac. However the images of your layout (template.html) show that the side navigation and the see our offers section is badly broken (the menu is also slightly out).
Which is no real surprise as Ie5mac is badly flawed and needs testing at every stage (unless old school tables are used).
I’ve put my old mac in the loft which had ie5.2 on it so I can’t really help with testing as it’s almost impossible doing it via browsercam. I’m sure it could be fixed relatively easily but here are a few fixes.
The height:126px min-height fix needs to be hidden from IE mac as it doesn’t have the same expanding box bug as IE pc.
[B]/* IE6- has no min-height, but incorrectly treats height as such \\*/[/B]
* html #seeOurOffers {
height:126px;
overflow:visible;
}
[B]/* finish mac hiding hack */[/B]
Ie5 mac doesn’t like the image replacement when using a span. It works if you use em instead.
#travelTools h2 [B]em[/B] {
position:absolute;
top:0;
left:0;
width:204px;
height:170px;
background:url(http://www.cutcodedown.com/for_others/designBox/images/sideMenuReplacements.jpg) 0 0 no-repeat;
}
<h2>Travel Tools[B]<em></em>[/B]</h2>
The same process for the other ones as well.
That’s about all I can remember from my mac fixing days as I stopped supporting it ages ago
IE on his Mac? OS 9? Holy hell, his computer is over ten years old, from the dinosaur era. Frankly, he needs to upgrade. No web designer should be worrying about how sites display on browsers from that era. He must be using a pre-pubescent version of Safari, too. I didn’t even think that ran on OS 9.
Below are two screen shots of how your site actually displays on Safari and Firefox. The guy is being ridiculous. You should write into your contract that you will charge a lot extra if he really wants the site to work on browser versions with 0.00001% market share.
EDIT: OK, I see his Safari shot was from OS X. But it’s not the latest version. It would be worth finding out what version it is.
You would do well to remove the left margin on the topmenu UL. From a glance, I can’t see any other reason why Safari is throwing a wobbly.
By gum, yer right…
Gah, seems like every blasted program I run these days wants to update to a new version every three days; uTorrent, Firefox and filezilla being the worst offenders
I just tested, the page also works fine in the latest version of iCab (4.7)… Won’t let me test for 3.0.5 though which is probably the best bet for 68K users. – edit – nevermind, got it working, it appears to be fine in iCab 3.0.5, so the folks still using pre-PowerPC macs have a option available.
Oops, you must have blinked. The latest is now 5.0. Hard to keep up with them these days.
Yes you’re right, I just remembered that the reason for the em instead of a span was from a weird bug in ie5mac where when using a span for a linked element the link was unclickable. For some reason the em (or other inline element) didn’t suffer from the problem. As there are no linked image replacements in the page it shouldn’t be an issue.
I’d have to dig my old mac out to test further but I doubt the machine would work after years of being hidden in the loft
I’ll believe it once I either get the hackintosh working or virtualBox and see it for myself; browsershots is **** useless crap, especially for mac versions of browsers.
Though the span replacements appear to not be broken; it’s backgrounds on floated LI and anchors that are having issues; Though you are right on the height issue. there was another way around that, and I can’t remember what it is right now.
wow thank you everybody for your help.
Deathshadow thank you very much for taking the time to write out the code again.
… and here we are:
http://www.cutcodedown.com/for_others/designBox/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/designBox
is unlocked for ease of access to the gooey bits and pieces. Given it’s all remastered images you’ll want to dig deep on that. The HTML saw a few revisions since my last post as well, but nothing truly major. (a lot of the spans I was planning on for sandbags proved unnecessary)
Valid XHTML 1.0 Strict, Valid CSS 2.1, tested working IE 5.01, 5.5, 6, 7 & 8, Opera 9.6 and 10.6, FF 2 & 3, and the latest flavors each of Safari and Chrome.
I did have to change the styling on a few elements to make them more predictable - the ‘see our offers’ getting the most noticeable changes as first it’s now the same width as the other content in the column (I think it makes it look less ‘slapped in there’ anyways) and more apparent, the shadow on the image box had to go/be reduced.
The reason for that is designing ANY element that will contain text (like that lorem ipsum) over a fixed height image means fixed metric fonts (px) and restricted content… That’s bad design and bad accessibility so I opened it up to stretch to however tall it needs to be. In order to have that combined shadow you would have to resort to alpha transparency for the .png – something IE doesn’t do well and requires filter or scripting solutions - just dodge that bullet altogether and use palette transparency to build those bits. It’s part of what I mean when I talk about “photoshop mentality” – “but I can do it in photoshop” doesn’t mean it’s good accessibility OR web design.
In all of the buttons, both in the sidebar and on the top menu the text for those buttons is now actually TEXT. This is important for images off, and for CSS off, and for search engines/data scrapers.
I’m currently unable to test IE 5.2 for Mac, but since it works in 5.01 and 5.5 windows I expect no real difficulties. I’ll see if I can get my hackintosh to boot and see what it thinks. (That or I’ll track down my OS9 emulator)
The .png’s have all also had their “GAMA” line stripped, so there’s no color matching issues in IE which is how many sections that were images in the original are now background-color.
I’m busy the rest of today, but if I have time tomorrow I’ll see about putting together a section by section breakdown of the HTML and CSS to explain how it works and why I made the decisions I did.
Still, it’s half as many files, 131k vs. 238k, so it also should load about 60% faster… and look!!! No javascript! The only scenario I can predict breakage is with firefox users who are still using the old text-resize instead of the new zoom; If they aren’t used to resizing text like netscape 4’s sweetly retarded cousin breaking websites, **** 'em.
Hi,
The layout has dropped in Ie5mac due to the default left margin on the ul (as Ralph already pointed out) so change it to this:
#topmenu {
text-align: center;
list-style: none;
padding: 0px;
width: 600px;
[B]margin: 5px 0 0;[/B]
}
I didn’t see what problem you saw in safari except that the background image was around the center of the layout which is exactly where you placed it. The screenshot shows a long window so the background will be further down. Why not set it to the top?
body {
background: url('http://www.fly2.com.cy/images/bg.jpg') no-repeat fixed 50% 0;
}
The above are just quick fix until Jason (deathshadow) provides you with more solid and reliable code
While like Ralph M. I’m a bit surprised, most of my pages are still coded to support back that far so I can probably give you a few pointers on that…
A lot of people will tell you don’t bother; but if you had designed the site from the start making these choices it wouldn’t have been any extra labor, and given that I’m seeing four different appearances in four different browsers here I would say many of the coding decisions made for that page are what’s biting you in the backside now.
Also IE 5.2 mac is still the most recent version available for the Mac and many owners still use it due to the large number of sites that just don’t work in Safari/chrome/firefox/IE. Most notably international banks.
I mean the first telltale is the 44 validation errors; admittedly most of those are the unescaped javascript or unescaped ampersands, but that’s something that should have been taken care of LONG before worrying about IE 5.2 Mac.
Some simple accessibility tests show further issues; No images off graceful degradation, images for text with no actual content for them – particularly bad on the anchors. It’s got javascript doing CSS’ job, missing alt text on many images, presentational images in the markup; aka IMG tags on stuff that should be in the CSS, tables for layout, presentational markup (like the use of align attributes), etc, etc… and that’s before I even look at the CSS.
No media types on the CSS embed being just the start of the CSS woes. No reset, multiple redundant width declarations, and frankly, there’s not ENOUGH CSS for the layout that’s here.
Though it’s entirely typical of what I’ve come to expect from someone working in Dreamweaver; or at least I assume this is based of it’s half-assed outdated recommendations given the presence of that stupid mm_ javascript.
Topping it off is the 32 separate files, 30 of them in images doing the job of… 10to 15 images. In other words twice as many handshakes as should be neccessary. That the body background doesn’t even fade to white properly…
First step is to clean up the markup to bring it into this century… That means no images in the markup where text should be like on your two menus. We can still apply those in the CSS, but they do not belong in the html. Likewise we need to replace a lot of your images with text – otherwise there’s no content for screen readers or search engines to even look at.
My approach to the markup - and yes I would have written the markup before I even thought about graphics, would go something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Fly2 Travel
</title>
</head><body>
<div id="pageWrapper">
<h1>
Fly<sup>2</sup><small>Travel</small>
<span></span>
</h1>
<div id="sideBar">
<div id="travelTools">
<h2>Travel Tools<span></span></h2>
<ul>
<li><a href="#">Weather<span></span></a></li>
<li class="even"><a href="#">Currency<span></span></a></li>
<li><a href="#">Maps<span></span></a></li>
<li class="even"><a href="#">Booking<span></span></a></li>
<li><a href="#">Airport<span></span></a></li>
</ul>
<p>
Get Your Info <strong>+357 22 458628</strong><br />
<span></span>
</p>
<!-- #travelTools --></div>
<!-- #sideBar --></div>
<div id="content">
<ul id="topmenu">
<li class="home"><a href="#">Home<span></span></a></li>
<li class="about"><a href="#">About<span></span></a></li>
<li class="offers"><a href="#">Offers<span></span></a></li>
<li class="flights"><a href="#">Flights<span></span></a></li>
<li class="hotels"><a href="#">Hotels<span></span></a></li>
<li class="news"><a href="#">News<span></span></a></li>
<li class="events"><a href="#">Events<span></span></a></li>
</ul>
<hr />
<h2>Welcome to Fly2 Travel</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed mi non elit congue consequat. Nunc rhoncus fringilla tellus, vel sollicitudin diam dapibus sed. In dolor diam, rhoncus non vehicula nec, convallis non est. Vivamus ac justo lorem. Sed sit amet diam eros, ac placerat nisl. Mauris consectetur sapien sit amet felis feugiat facilisis.
</p>
<p id="niceTrip"><i>Have a nice trip</i><span></span></p>
<div id="seeOurOffers">
<h2>See Our Offers<span></span></h2>
<div class="trailingPlate">
<img src="images/waterfront.jpg" alt="A Waterfront Scene" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed mi non elit congue consequat. Nunc rhoncus fringilla tellus, vel sollicitudin diam dapibus sed. In dolor diam, rhoncus non vehicula nec, convallis non est. Vivamus ac justo lorem. Sed sit amet diam eros, ac placerat nisl. Mauris consectetur sapien sit amet felis feugiat facilisis.
</p>
<div class="borderbottom"></div>
<!-- #seeOurOffers --></div>
<hr />
<div id="disclaimer">
<img src="images/IATA.png" alt="IATA Logo" />
<img src="images/LoveCyprus.png" alt="Love Cyprus" />
Fly2 Travel is an IATA accredited travel agency.
</div>
<hr />
<div id="advertise">
<h2>Advertise here</h2>
<ul>
<li><a href="#"><img src="images/etihad.png" alt="Etihad Airways" /></a></li>
<li><a href="#"><img src="images/lufthansa.png" alt="Lufthansa" /></a></li>
<li><a href="#"><img src="images/emirates.png" alt="Emirates" /></a></li>
</ul>
<!-- #advertise --></div>
<hr />
<!-- #content --></div>
<div id="footer">
www.fly2.com.cy © 2010. All rights reserved - Designed by Oliver Creative Communications
</div>
<!-- #pageWrapper --></div>
</body></html>
The empty spans you see interspersed across the page are there for image replacement. You’ll notice I also made separate IMG’s of a few elements; To me those images are content, so they get their own IMG tag. You had images inlined in the markup that were more presenation than content; and presentation goes in the CSS.
At 3.5k it shaves 2.4k off your original in the process as unneccessary/redundant. We’ll probably make that up in the CSS, but CSS is cached across pages on your site and markup is not.
I have time later I’ll toss together the CSS to make that work and remaster the images to work with my techniques. Said techniques avoid many of the cross-browser pitfals your current design encounters, and should work in IE 5.2 Mac and 5.5 windows – and may even work in 5.01 (though I make no guarantees on that one)
i am waiting to see you screenshots as soon as they get approval, but it seems as if it is a browser issue not an os issue.
The only Operating System issue i have ever known if web-design is that if the font does not exist in that OS.
Try it in safari, IE 6, 7, 8, firefox, on a PC. If you want to make sure then try in opera, and chrome. If it works is chrome on a pc, it will work in chrome on a Mac. Same with safari or firefox. But for firefox, it should also work in camina on a Mac, which is a Mac browser made by mozilla.
Hope i helped and I will check back soon to see if your attachments are approved!
Regards,
Team 1504