Browser compatability issues with my theme

i’m working on a site located here: http://cpanel4.frontline.net/~ggarchit/. the site looks great in Firefox and Chrome. But for some reason practically none of it translates over to Safari 4.0.4. In fact it looks worse than if i was looking at it on my blackberry. Also with Internet Explorer 8, the dark bar that stretches across the header doesn’t even appear.

i was told it might have to do with the errors in my style sheet, defined by the validator: http://jigsaw.w3.org/css-validator/validator?warning=2&uri=http%3A%2F%2Fcpanel4.frontline.net%2F~ggarchit%2F

I just have no idea how to fix these 8 errors. here’s the stylesheet code: http://pastebin.com/Jscy0Ni5

any idea how to fix these errors???

Make a backup of your style.css in your theme folder and then change everything before your first style declaration (that first declaration starts with html, body, div, span,…), currently looking like this:


/*
Theme Name: The Architect
Theme URI: http://themeforest.net/user/LayeredPixels
Description: Modern, clean and professional WordPress template. 
Author: Layered Pixels
Version: 1.0
*/

@charset "UTF-8"; /* http://www.w3.org/International/questions/qa-css-charset */

/*	-------------------------------------------------------------
 
	THE ARCHITECT - BY LAYERED PIXELS
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

	Description:Base cascading style sheet
	Nom:screen.css
	Version:1.0
	Date:
 
	This file is part of a site template for sale at ThemeForest.net.
	See: http://themeforest.net/user/LayeredPixels/portfolio
	Copyright © 2010 Layered Pixels <info@layeredpixels.com>
 
-------------------------------------------------------------	*/

/*	-------------------------------------------------------------
	IMPORT
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/


@import url("assets/css/slider.css");
@import url("assets/css/form.css");

/*	-------------------------------------------------------------
	STYLES FOR SCREEN / PROJECTION
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/

@media screen, projection {

/*	-------------------------------------------------------------
	RESET
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -	*/


with this:


@charset "UTF-8";
@import url("assets/css/slider.css");
@import url("assets/css/form.css");
@media screen, projection {

Make sure the line
@charset “UTF-8”;
is the first line in your style sheet.

See if that improves your site experience any.