#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Posts
    8
    Rep Power
    0

    Safari and Chrome not seeing CSS


    Hello All,

    I've been researching this issue for the last couple hours and can't seem to find a solution...

    Problem: I have a site i am working on that is not rendering correctly in Chrome or Safari but seems fine in both FireFox and IE.
    It's strange because i haven't came across this before and tend to code my sites pretty much the same way...

    Can anyone see what might be causing this?

    I can't post the link cause i'm a new user, but here's the html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"  >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Andrew's Auto Glass: More Auto Services in Seattle or Everett</title>
    <link href="assets/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="assets/scripts.js"></script>
    </head>
    <body onload="MM_preloadImages('auto-glass/windshield_quote_down.jpg','auto-glass/auto_glass_down.jpg','auto-glass/services_down.jpg','auto-glass/contact_down.jpg','auto-glass/windshield-seattle-2.jpg')">	
    	<div id="wrapper">
       	  <div id="header">
           	<div id="auto-glass-seattle"><a href="http://www.andrewsautoglass.com/index.php"><img src="auto-glass/auto-glass-seattle.jpg" border="0" /><strong>Auto Glass Repair Seattle</strong></a></div>
    
    			<div id="nav">
                	<div id="free-quote"><a href="http://www.andrewsautoglass.com/auto-glass-quote.php" title="Free Auto Glass Quote" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','auto-glass/windshield_quote_down.jpg',1)"><img src="auto-glass/windshield_quote_up.jpg" alt="auto glass quote" name="Image4" width="135" height="60" border="0" id="Image4" />Instant Auto Glass Quotes</a></div>
                    <div id="auto-glass"><a href="http://www.andrewsautoglass.com/auto-glass.html" title="Seattle Auto Glass" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','auto-glass/auto_glass_down.jpg',1)"><img src="auto-glass/auto_glass_up.jpg" alt="auto glass repair in seattle, wa" name="Image5" width="140" height="60" border="0" id="Image5" />Auto Glass Service in Seattle, WA</a></div>
                    <div id="services"><a href="http://www.andrewsautoglass.com/services.html" title="Seattle Auto Services" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','auto-glass/services_down.jpg',1)"><img src="auto-glass/services_up.jpg" alt="Other Services from Andrew's Auto Glass" name="Image6" width="145" height="60" border="0" id="Image6" />Auto Services from Andrew's Auto Glass</a></div>
                    <div id="contact"><a href="http://www.andrewsautoglass.com/contact.php" title="Contact Andrew's Auto Glass" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','auto-glass/contact_down.jpg',1)"><img src="auto-glass/contact_up.jpg" alt="Contact Andrew's Auto Glass of Seattle, WA" name="Image7" width="115" height="60" border="0" id="Image7" />Contact Andrew's Auto Glass</a></div>
                </div>
            </div>
    
            	<div id="seattle-auto-glass">
                	<div id="windshields-seattle"><a href="http://www.andrewsautoglass.com/seattle-windshields.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('windshields','','auto-glass/windshield-seattle-2.jpg',1)" title="$199 Windshields in Seattle"><img src="auto-glass/windshield-seattle.jpg" alt="Cheap Windshields in Seattle" name="windshields" width="130" height="128" border="0" id="windshields" />Seattle Area Replacement Windshields</a></div>
                    <div class="clear"></div>
          </div>
    			 	<div id="content">
    <div id="sub_content">
    	<h1>More Services from Andrew's Auto Glass</h1>
        <p class="content">At Andrew's, we do more than just auto glass. In fact, we've been providing a range of auto repair services in the Seattle area for over 15 years including:</p>
    
        <ul>
        	<li class="content">Power Window Repair</li>
        	<li class="content">Sunroof Repair &amp; Installation</li>
        </ul>
        <ul>
        	<li class="content">Manual Window Repair</li>
    
        	<li class="content">And More!</li>
        </ul>
        <div class="clear"></div>
        <p class="content">With service centers conveniently located throughout the Seattle-Tacoma area, Andrew's Auto Glass makes getting your vehicle serviced easy. And since each of our locations is a full-service shop, you can get any service performed at any of our locations in Seattle or Everett.</p>
        <h2>Want Mobile Service?</h2>
        <p class="content">We can provide mobile service for many of our customers in and around our service locations. For a list of locations in your area, please visit our <a href="http://www.andrewsautoglass.com/locations.html">locations page</a>.</p>
    
    </div>
    <div id="sub_nav">
    <p class="sub_nav_heading">Featured <span class="light_grey">Links</span></p>
                                <ul>
                                	<li class="sub_nav"><a href="http://www.andrewsautoglass.com/seattle-windshields.html">$199 Windshields</a></li>
                                    <li class="sub_nav"><a href="http://www.andrewsautoglass.com/windshield-repair.html">Windshield Repair</a></li>
                                    <li class="sub_nav"><a href="http://www.andrewsautoglass.com/replacement-auto-glass.html">Glass Replacements</a></li>
                                    <li class="sub_nav"><a href="http://www.andrewsautoglass.com/seattle-window-tinting.html">Window Tinting</a></li>
    
                                    <li class="sub_nav"><a href="http://www.andrewsautoglass.com/power-windows.html">Power Windows</a></li>
                                    <li class="sub_nav"><a href="http://www.andrewsautoglass.com/locations.html">Locations</a></li>
                                </ul>
                      		</div>
                        <div id="instant_quote">
                   	  <a href="http://www.andrewsautoglass.com/auto-glass-quote.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','auto-glass/quote-down.png',1)"><img src="auto-glass/quote-up.png" alt="instant auto glass quote" name="Image8" width="180" height="72" border="0" id="Image8" />Auto glass quote</a></div>
                      <div class="clear"></div>    
          </div>
    
          <div id="locations">
            	<h2 class="location-header">Seattle Area Auto Glass Repair Locations:</h2>
                	<ul>
                        <li class="locations"><a href="http://www.andrewsautoglass.com/seattle.html">Seattle</a></li>
                        <li class="locations"><a href="http://www.andrewsautoglass.com/everett.html">Everett</a></li>
                    </ul>
                    <span class="red-heading" style="float:right;">Call 800-318-3533</span>
    
                    <div class="clear"></div>                    
        	</div>
    		  <div id="footer_bar"><img src="auto-glass/windshields-seattle.jpg" alt="Auto Glass Suppliers and Materials" /></div>
    		<div id="footer">
            	<p><span class="footer_left"><a href="http://www.andrewsautoglass.com/sitemap.html">sitemap</a> | <a href="http://www.andrewsautoglass.com/contact.php">contact</a></span><span class="footer_right"><a href="http://www.mainstreetwebservices.com">optimization</a> by mainstreet</span></p>
              <p class="footer_center">Andrew's Auto Glass, INC.<br />&copy; 2010 All Rights Reserved</p>
    
                <div class="clear"></div>
          </div>
    </div>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-15846274-1");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </html>

    And here's the CSS:
    Code:
    body {background:white;}
    * { margin:0; padding:0;font-family:Tahoma, Geneva, sans-serif;}
    #wrapper {width:840px; margin:0 auto;}
    #header {width:100%; height:90px;}
    #windshields-seattle {width:130px; height:128px; float:left; margin-left:40px; margin-top:40px; overflow:hidden;}
    #auto-glass-seattle {width:285px; height:75px; overflow:hidden; float:left;}
    #nav {float:right; width:535px; height:60px; margin-top:15px;}
    #free-quote {width:135px; height:60px; overflow:hidden; float:left;}
    #auto-glass {width:140px; height:60px; overflow:hidden; float:left;}
    #services {width:145px; height:60px; overflow:hidden; float:left;}
    #contact{width:115px; height:60px; overflow:hidden; float:left;}
    #seattle-auto-glass {width:840px; height:186px; background:url(../auto-glass/header.jpg) no-repeat;}
    #content {width:820px; padding:25px 10px;}
    #select {width:100px; margin:15px auto;}
    #rounded_box {width:200px; float:left; padding-right:10px;}
    #rounded_box_top {width:180px; padding:5px 10px; height:30px; background:url(../auto-glass/top_box.png) no-repeat;}
    #rounded_box_mid {width:180px; padding:5px 10px; height:145px; background:url(../auto-glass/mid_box.png) top left repeat-y;}
    #rounded_box_mid2 {width:180px; padding:5px 10px; background:url(../auto-glass/mid_box.png) top left repeat-y;}
    #rounded_box_mid2 ul {list-style:none; float:left; margin-left:5px;}
    #rounded_box_mid2 ul li {background:url(../auto-glass/list_item.gif) left no-repeat; padding-left:15px;}
    #rounded_box_bot {width:200px; height:8px; background:url(../auto-glass/bot_box.png) no-repeat;}
    #sub_content {width:600px; padding-right:30px; float:left;}
    #sub_content ul {float:left; list-style:none; margin-left:20px;}
    #sub_content ul li {background:url(../auto-glass/list_item.gif) top left no-repeat; padding-left:15px;}
    #sub_content ul li a:link, a:visited {color:#333; text-decoration:none; font-style:normal;}
    #sub_content ul li a:hover {color:#cc3333; text-decoration:none; font-style:italic;}
    #sub_content ol {float:left; margin-left:20px;}
    #instant_quote {width:180px; height:72px; overflow:hidden; clear:right; padding:0px 4px; float:right; margin-top:25px;}
    #seattle_locations {width:285px; float:left; margin-top:20px;}
    #everett_locations {width:285px; float:right; margin-top:20px;}
    #sub_nav {width:188px; height:203px; background:url(../auto-glass/right_bg.gif) repeat; float:right;}
    #sub_nav ul {float:left; list-style:none; margin-left:15px;}
    #sub_nav ul li {line-height:26px; background:url(../auto-glass/list_item.gif) left no-repeat; padding-left:15px;}
    #bot_rt_margin {clear:right; float:right; width:188px; padding:15px 0px; text-align:justify;}
    #locations {width:820px; margin:0 auto; padding:15px 10px;}
    #locations ul, #locations ul li {list-style:none; display:inline; margin-left:20px; float:left;}
    #auto-glass-positions {width:650px; height:350px; overflow:hidden;}
    #window-tinting-options {width:650px; height:350px; overflow:hidden;}
    #footer_bar {width:840px; height:64px; }
    #footer {width:820px; padding:5px 10px;}
    #website {display:none;}
    h1, h2, h3, h4, h5, h6 {font-weight:normal; color:#cc3333;}
    h1 {font-size:22px;}
    h2 {font-size:20px;}
    h3 {font-size:18px;}
    h4 {font-size:17px;}
    .clear {clear:both;}
    .red-heading {color:#cc3333; font-weight: bold; font-size:18px;}
    .table_heading {color:#0066ff; font-weight: bold; font-size:13px;}
    .sub_nav_heading {color:#1a1a1a; font-size:16px; padding:5px 10px;}
    .sub_nav {font-size:14px; font-family:"Century Gothic"; color:#333;}
    .sub_nav a:link {color:#0066ff; text-decoration:none;}
    .sub_nav a:visited {color:#00C; text-decoration:none;}
    .sub_nav a:hover {color:#0066ff; text-decoration:underline;}
    .img_left {float:left; margin:5px 10px;}
    .img_right {float:right; margin:5px 10px;}
    .light_grey {color:#868686;}
    .justify {text-align:justify;}
    .content { font-size:11px; color:#333; margin:7px 0px;}
    .content a:link {color:#cc3333; font-style:italic; text-decoration:none;}
    .content a:visited {color:#900; font-style:italic;}
    .content a:hover {color:#cc3333; font-style:italic; text-decoration:underline;}
    .sitemap_content { font-size:11px; color:#333; margin:7px 0px;}
    .sitemap_content a:link {color:#0066ff; text-decoration:none;}
    .sitemap_content a:visited {color:#0066ff; text-decoration:none;}
    .sitemap_content a:hover {color:#cc3333; text-decoration:underline;}
    .form_content { font-size:11px; color:#333; text-align:right;}
    .home_content { font-size:11px; color:#333; margin:0px; padding:0px;}
    .home_content a:link { color:#cc3333; font-style:italic; text-decoration:none;}
    .home_content a:visited { color:#900; font-style:italic; text-decoration:none;}
    .home_content a:hover { color:#cc3333; font-style:italic; text-decoration:underline;}
    .read_more {float:right; font-size:11px; color:#333; margin-top:5px;}
    .read_more a:link { color:#cc3333; font-style:italic;}
    .read_more a:visited { color:#900; font-style:italic;}
    .read_more a:hover { color:#cc3333; font-style:italic;}
    .quote {width:150px; margin:10px auto;}
    .button { font-size:10px; color:#333; margin:7px 0px; padding:2px 3px}
    .location-header {font-size:11px; text-align:center; color:#cc3333; float:left;}
    .locations {font-size:11px; text-align:center; color:#666;}
    .locations a:link {color:#666; text-decoration:none;}
    .locations a:visited {color:#666; text-decoration:none;}
    .locations a:hover {color:#666; text-decoration:underline;}
    .footer_center { clear:both; text-align:center; color:#999; font-size:11px;}
    .footer_left {float:left; color:#999; font-size:11px;}
    .footer_left a:link {color:#999; text-decoration:none;}
    .footer_left a:visited {color:#999; text-decoration:none;}
    .footer_left a:hover {color:#999; text-decoration:underline;}
    .footer_right {float:right; color:#999; font-size:11px;}
    .footer_right a:link {color:#999; text-decoration:none;}
    .footer_right a:visited {color:#999; text-decoration:none;}
    .footer_right a:hover {color:#999; text-decoration:underline;}
    .red {color:#cc3333;}
    It seems to look fine in Firefox 3.6.3 and also in IE8 (in normal and compatibility modes). However, in Safari 4.0.5 and in Chrome 5, it's jacked

    Thanks in advance for any advice!
    J
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    938
    Rep Power
    281
    page appears the same for me in FF3.5.9 and Safari4.0.5.

    I don't have chrome installed so can't test that from here.

    one thing I would suggest, tho, is not using the * selector in css..just use html{} instead.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Posts
    8
    Rep Power
    0
    cool Thanks for the feedback...I'll keep looking into it Don :-)
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Posts
    8
    Rep Power
    0
    I'm not sure but i'm wondering if it's a problem with my css sheet. I was able to validate it using the "direct input" option, but it would fail whenever i tried it from the URI method... anyone know why this might be happening?
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Posts
    8
    Rep Power
    0
    looks like everythings working.

    Thanks for the help guys!

IMN logo majestic logo threadwatch logo seochat tools logo