Safari Display Problem

[PoundAd]

I have a couple of display issues with my classified ads website using Safari web browser. The homepage displays absolutely fine in IE7 & Firefox, but in Safari there appears to be a problem with the search bar and my book mark bar.

Can someone please take a look and let me know if they have any possible solutions.

The web address is Classified Ads, Household, Property, Cars, Job Vacancies, Local & National

Thanks,
Peter

[Eric Barnes]

I just viewed it in Safari on a Mac and didn't see any differences.

[PoundAd]

I am using Safari in Windows perhaps that is causing the problem?

[Mike-N-Tosh +]

I believe your issues are because your code doesn't validate due to several inconsistencies in your XHTML elements. I didn't actually run it through a validator, however by glancing at the source code briefly, I saw many issues.

If you declare your document type (Which you should always do and you do) and your source code doesn't comply with the specification, then the browser will go into what is known as Quirks Mode. Essentially a "dumb" browser that will best guess what you mean in your source code.

A few examples in your code are:
<meta name="example"> should be <meta name="example" />
<meta name="example"/> should be <meta name="example" /> (space before the close " />"
<img src="image.gif" other stuff> should be <img src="image.gif" width="xxx" height="xxx" />
</span>your stuff</span> should be <span>your stuff</span>

My recommendation is that you run it through a validator and it will tag all of your errors and warnings. Go through those errors and warnings and you should be good to go.

Here's one of several places you can go on the net to validate your code:
W3 Schools validator

Hope that helps and good luck,
-Mike

[PoundAd]

Thanks Mike-N-Tosh your comments are very useful, I will have a good look through the code and clean it up, hopefully this will resolve the browser display issues!

[seymourjames +]

A great tool to use is to use with Firefox is the web developer toolbar add-on. It is free and I cannot recommend it highly enough.

https://addons.mozilla.org/en-US/firefox/addon/60

You can investigate and isolate many problems in your xhtml and css. You can modify a page locally , see if it solves the problem, save the changed file to disk and then upload it to your server. CHECK IT OUT. The alternative is Firebug.

Safari (your case) also has a download called web inspector which does similar things and has good reviews.

Web Development with... Safari / journal / hicksdesign

However, if you really want to make great code you need proper editors which validate.