CSS - Google Chrome And Safari Wackiness

I have a website (www.fullforcecreative.com) that displays properly on I.E. and Firefox. I just recently pulled it up in Google Chrome, and it appears no style sheets are being imported. I then thought "that is strange, but Safari is based on the same thing (kinda), so I'll load it in Safari." Same issue. No style sheets.

Has anyone seen anything like this before?

I link to one style sheet in the header.

Code:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css; charset=utf-8" media="screen" />

This style sheet linked to from that line:

Code:

@charset "UTF-8";
@import url(yaml/core/base.css);
@import url(css/navigation/nav_shinybuttons.css);
@import url(css/screen/basemod.css);
@import url(css/screen/content.css); 
@import url(yaml/print/print_003.css); 

All the other stylesheets open with the
Code:

@charset "UTF-8"; 
@media all {
insert css here
}

The site is using YAML (http://www.yaml.de/en/) as a framework for the CSS. The only issue I could find relativly close to it was this: http://www.davidroessli.com/logs/2007/03/safari_utf8_rendering_glitch_f/

I made the change listed there (because the CSS stylesheets are in UTF-8), but it made no difference.

Does anyone have any ideas? This is driving me up the wall. It does display properly in I.E. and firefox.

Thanks,
seth

If you go to the example site: devbum.com/coded/audven/

The top navigation seems to be pushed upwards in Windows Safari and Google Chrome and not centered like in FF, IE6, IE7, and Opera. I'm not sure why it's doing this though... does it also render differently on Mac Safari?

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

heres my currently working on site it look great on IE, Firefox and opera but i just see a blank page in Chrome and Safari!!

web site:
macmillanpc.host56.com/Dreamy_Elegance_template/


please help me! :/
check source, the css is in there (not linked)
these is really f... me off.

Sorry if its too vague, let me know if you need more details.