a client emailed me saying his artist who is using Safari on an Intel Mac said the site i worked on looks messed up. any idea? i don't use a mac. http://www.kidzter.net/arcade/ http://img341.imageshack.us/img341/3830/arcadeyh1.jpg
Doesn't look too good in Opera either... and yeah, it's screwed up in safari. Let me guess, you wrote for FF and hacked for IE, didn't you? Word of warning, I'm going to be BRUTALLY frank. If you have issues with honesty, stop reading now. Let's dig in. Three carriage returns before your doctype... IE6 not in quirks, IE 5.x in quirks. Two doctypes and content before your body tag.... Hmm, maybe that's your problem? (***MOST LIKELY***). This is something that a VALIDATOR would have picked up. You may want to try writing VALID code and VALIDATING. You fail to close the table or the open table record that is before your second doctype. <body><center> <div class='container'> <div align='center' style='padding-top: 0px;'> Code (markup): Do I even need to say it? </center> <center> Code (markup): Ok, it gets worse. <tr> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> <td width='25%' colspan='1'> </td> </tr> Code (markup): I don't even want to know. <div class='menuhead1'> <div class='menuheadtext'>Strategy Games</div> </div> Code (markup): When you have headers, you might want to try header tags - you may also want to look into not using unneccessary classes and extra wrappers that are unneeded. <table width="774" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="106" align="left" valign="middle"><a href="readingkids.html"><img src="images/Mort.gif" width="106" height="78" border="0"></a></td> <td width="5" align="left" valign="middle"> </td> <td width="78" align="left" valign="top"><a href="videokidz.html"><img src="images/video.gif" width="105" height="78" border="0"></a></td> <td width="5" align="left" valign="top"> </td> <td width="106" align="left" valign="top"><a href="musickidz.html"><img src="images/floyd.gif" width="106" height="78" border="0"></a></td> <td width="5" align="left" valign="top"> </td> <td width="108" align="left" valign="top"><a href="greenkidz.html"><img src="images/green.gif" width="108" height="78" border="0"></a></td> <td width="5" align="left" valign="top"> </td> <td width="106" align="left" valign="top"><a href="playkidz.html"><img src="images/Play.gif" width="106" height="78" border="0"></a></td> <td width="5" align="left" valign="top"> </td> <td width="106" align="left" valign="top"><a href="gearkidz.html"><img src="images/Gizmo.gif" width="106" height="78" border="0"></a></td> <td width="5" align="left" valign="top"> </td> <td align="left" valign="top"><a href="stylekidz.html"><img src="images/Flora.gif" width="107" height="78" border="0"></a></td> </tr> No offense, but I can't believe people still vomit up code like this... Especially when the contents of these effectively fill your width. The align valign shouldn't be needed (and if it is, assign it once via CSS instead of each bloody time) - no alt text or image replacement so it's not image-reduced friendly... and then there's <td><img src="images/new-spacer.gif" width="4" height="16"></td> Good lord - this is like the fourth site I've seen in the past two days spacer .gif's - I thought that nonsense went out the window with IE 5.x. See, we have this stuff called CSS now, which offers things like padding and margins... So my advice, chuck it and start over with VALID SEMANTIC markup that works cross browser out of the box, instead of using error correction like a crutch to support buggy broken decade out of date code. ... and test during design for ALL browsers, rather than writing the whole thing and hoping it works elsewhere. Opera is free, and now you can run Safari on Windows so the 'I don't have a Mac' line doesn't float like it used to.
Zodiac, a word of advice is always use an online syntax checker like the one on http://validator.w3.org it will help you. Deathswhadow, you may be able to run safari now on windows but i don't guarantee you will have the same results. Firefox 2 on Mac has issues with javascript. Do I make sense?
Yes actually - I've noticed that Safari seems to render fonts a hair wider on windows than OSX... which is why my Dellmac (Selmac's sweetly retarded cousin.... ok, bad Tok'ra joke) isn't likely to be retired anytime soon.
@ zodiac: With table layouts, the presentation is closely intermingled with the structural language (html). Browsers are incredibly good at figuring out what you meant even when you mess up the markup. Each vendor does have a different set of algorithms for error handling[1], and you got caught out by the KHTML engine getting confused. There are 95 errors, many of them critical. Before any debugging can be done with any expectation of rational results, those errors need to be fixed. Even fixed, and even if fixing the errors fixes the layout in Safari/Konqueror, debugging and maintenance will be a cast iron bitch. I would highly recommend you have the page(s) refactored as well structured, semantic and well formed html plus css. No non-trivial table layout can be well structured or semantic, though it can be well formed (valid markup). cheers, gary [1] The über geeks who actually code the UAs are making a significant effort to standardize error handling among the various vendors. The Mozilla Foundation (Gecko based browsers), Opera and Apple are the prime movers, with MSFT embarrassed into at least paying lip service to the idea.
He's right. I looked at both on my Intel-based MacBook Pro using Safari. There are words super-imposed over other words.