CSS for Chrome?

@arrowspace00Feb 07.2011

Greetings. I’m having trouble getting a site to show up consistent in Firefox and Chrome. My code validates, but the main navigation appears substantially different in Chrome that I would like it to. I found a recommendation to pull in a style sheet specific to Chrome, via javascript. Here is the code I’m using which doesn’t seem to be working:

<code>
~~[COLOR=”DarkRed”]~~<script type=”text/javascript”>
if (navigator.userAgent.toLowerCase().match(‘chrome’)
document.write(‘<link rel=”stylesheet” type=”text/css” href=”css/stylechr.css” />’)
</script>[/COLOR]
</code>

The doc-type declaration I’m using is XHTML 1.0 transitional.

Thanks in advance for any assistance.

to post a comment

JavaScript

6 Comments(s) _↴

@aj_nscFeb 07.2011 — #It's not working because you're missing a closing parenthesis after the if statement:

<i>
 </i>if (navigator.userAgent.toLowerCase().match('chrome'))
 document.write('&lt;link rel="stylesheet" type="text/css" href="css/stylechr.css" /&gt;')

That being said, if you need to load a Chrome-specific style sheet, 999 times out of 1000 you're doing something wrong. Do you have a link to the page or code you could post?

@arrowspace00authorFeb 07.2011 — #Thanks for your help. That worked perfectly. Here is my HTML, and the CSS follows:

[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=iso-8859-1" />
 <meta name="description" content="Irene Annunziata, Esq.  |  Welcome to FamilyLegalMatters.com -
 <link  rel="stylesheet" href="css/default.css" type="text/css" />
 <!--[if IE]>
 <link rel="stylesheet" type="text/css" href="css/ie8.css" />
 <![endif]-->
 <script type="text/javascript">
 if (navigator.userAgent.toLowerCase().match('chrome'))
 document.write('<link rel="stylesheet" type="text/css" href="css/stylechr.css" />')
 </script>
 <title>Irene Annunziata, P.A. - The Law Office of Irene Annunziata, P.A. - South Florida Family Law &amp; Divorce Attorney</title>
 </head>
 
 <body>
 <div id="mainContainer">
 
   <img src="img/antiquaAntiqua.png" width="360" height="122" alt="Irene_Annunziata_logo" style="position:absolute; left:230px; top: 50px" />
   <img src="img/bannerRibbon.png" width="219" height="285" alt="Call Irene Annunziata Now" style="position:absolute; left:666px; top: -95px" /> 
 
   <div id="header">
   <div id="justiceWoman">
   <img src="img/justiceWoman.png" width="79" height="165" alt="Justice by Irene Annunziata, P.A." />
   </div>
   </div>
 
   <div id="nav">
   <ul id="navList">
   <li class="navItems"><a href="">&nbsp;Home&nbsp;</a></li>
   <li class="navItems"><a href="divorce.htm">&nbsp;Divorce&nbsp;</a></li>
   <li class="navItems"><a href="child_custody.htm">&nbsp;Child Custody&nbsp;</a></li>
   <li class="navItems"><a href="child_support.htm">&nbsp;Child Support&nbsp;</a></li>
   <li class="navItems"><a href="division_property.htm">&nbsp;Division of Property&nbsp;</a></li>
   <li class="navItems"><a href="alimony.htm">&nbsp;Alimony&nbsp;</a></li>
   <li class="navItems"><a href="prenuptial_agreements.htm">&nbsp;Prenuptial Agreements&nbsp;</a></li>
   <li class="navItems"><a href="about.htm">&nbsp;About&nbsp;</a></li>
   <li class="navItems"><a href="contact.htm">&nbsp;Contact&nbsp;</a></li>
   </ul>
   </div>
   <div id="main">
   <img src="img/seekJustice.jpg" width="280" height="239" alt="Irene_Annunziata" style="float:right;padding-right:20px;padding-top:5px" />
   <div>
   <h3>Welcome</h3><br />
   <h2>Irene Annunziata, Esq. is committed to providing you the best legal representation. Our firm represents clients in the Broward, 
   Miami-Dade and Palm Beach County areas. Schedule your free consultation with Irene today!</h2>
   <br/>
   <p>I understand that divorce and other family legal problems are stressful and can take an emotional toll on you and your family. 
   With more than 17 years of experience helping families like yours, I can inform you about your legal rights and options so that you can 
   arrive at a solution that works for you and your family. When you contact my office, your questions will be answered directly by me, not 
   a paralegal, clerk or legal secretary. When you hire me to represent your interests, I will personally handle your case, and it will not 
   be shuffled off to a staff assistant. What is most important and distinctive about my practice is the individual attention I provide to 
   each and every one of my clients because I know that even after a divorce, family matters.</p>
   <p id="signature">- Irene Annunziata, Esq. </p>
   </div>
   </div>
  </div>
 
  <div id="footer">
   <h6 id="h7">copyright 2011 © FamilyLegalMatters.com  |  	Irene Annunziata, Esq. is located in Fort Lauderdale, Florida and serves Broward, Miami-Dade, and Palm Beach counties. The decision to hire a 
   lawyer should not be based on advertising. Irene Annunziata can provide you with information pertaining to her qualifications. This website is designed for general information, not legal advice. 
   Accessing this site does not constitute the formation of the attorney/client relationship and should not be construed as formal legal advice. Please consult an attorney if you are in need of legal 
   advice and representation.</h6>
   <br /><br />
  </div>
 </body>
 </html>[/CODE]

And the CSS:

[CODE]html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 95%;vertical-align: baseline;background: transparent;}
 body {line-height: 1.5;background-color: #01083c;font-family:Verdana, Arial, Helvetica, sans-serif}
 ol, ul {list-style: none;}
 h1 {font-size: 120%}
 h2 {text-indent:2em;width:580px;margin-top: 8px}
 h3 {text-indent:2em; font-size:110%;color:#01083c;text-decoration:none}
 #h7 {font-size:80%;color:#fff}
 
 #mainContainer {width:960px;height:auto;background-color: #fefee5;margin-left: auto; margin-right: auto;position:relative}
 
 #header {margin-left: auto; margin-right: auto; width:960px;padding-top: 30px;margin-top:0px;padding-bottom: 30px;border-bottom:#01083c 1px solid}
 #justiceWoman {display:inline;margin-left:80px}
 
 #navList {padding-top:1px;padding-bottom:3px;border-bottom:#01083c 1px solid;max-width:960px;font-weight:bold;background-color:#fefee5;height:15px}
 #navList li {display:inline;float:left;padding-left:20px}
 #navList li a {font-size:110%;text-decoration:none;display:block;text-align:center;text-decoration:none;background-color:#fefee5;color:#01083c}
 #navList li a:link {text-decoration:none;background-color:#fefee5;color:#01083c}
 #navList li a:visited {text-decoration:none;background-color:#fefee5;color:#01083c}
 #navList li a:hover {text-decoration:none;background-color:#01083c;color:#fefee5}
 #navList li a:active {text-decoration:none;background-color:#01083c;color:#fefee5}
 
 #main {padding:25px}
 #main p {text-align:justify;text-indent:2em;width:570px}
 #signature {margin-left: 390px; font-style:italic; font-size:105%}
 
 #divorceCopy {width:570px}
 ol#divorceBullets {list-style-type:disc;margin-left:50px;width:500px;text-align:justify}
 ol#custodyBullets {list-style-type: lower-alpha;margin-left:50px;width:500px;text-align:justify}
 ol#custodySubBullets {list-style-type:disc;margin-left:50px;width:500px;text-align:justify}
 
 #footer {line-height:1.4;padding-top:5px;text-align:justify;width:960px;height:auto;color: #fefee5;margin-left: auto; margin-right: auto;position:relative}
 
 #constructionContainer {width:960px;height:400px;background-color: #fefee5;margin-left: auto; margin-right: auto;position:relative}
 #construction {display:block; font-size:150%;margin-left:auto;margin-right:auto; padding-top:50px;text-align:center}
 h5 {padding-left: 25px; padding-right:25px; line-height:1.2;padding-top:50px;color:#01083c}
 
 label {font-size:140%}
 input {font-size:120%;width:250px;margin-bottom:5px;color: #01083c;background: #DFDFFF;vertical-align:top}
 textarea {font-size:130%;width:250px;margin-bottom:5px;color: #01083c;background: #DFDFFF;vertical-align:top;font-family:Verdana, Arial, Helvetica, sans-serif}
 input.button {	width: 100px;	margin-left:110px}
 #thankyou{min-height:170px}
 
 div.row {clear:both}
 div.row span.label {float:left;width:100px;text-align:right;}
 div.row span.formw {float:right;width:200px;text-align:left} [/CODE]

@KorFeb 08.2011 — #At a first quick glance

<i>
 </i>line-height:1.4

1.4 [I]what[/I]? Size and distance values need a measurement unit by all means. Usually pixels

<i>
 </i>label {font-size:140&amp;#37;}

Either you use [B]em[/B] as a relative measurement unit in case of fonts, or you use absolute m.u. like[B] px[/B]. But not 140%. 140% of what?

@Jeff_MottFeb 08.2011 — #At a first quick glance

<i>
 </i>line-height:1.4

1.4 [I]what[/I]? Size and distance values need a measurement unit by all means. Usually pixels
[/quote]

[font=courier]line-height[/font] is an exception. It doesn't need a unit. A plain number is treated as a multiplier, so 1.4 is equivalent to 140%.

http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height

<i>
 </i>label {font-size:140%}

Either you use [B]em[/B] as a relative measurement unit in case of fonts, or you use absolute m.u. like[B] px[/B]. But not 140%. 140% of what?[/QUOTE]

[font=courier]font-size: 140%[/font] means 140% of the current font size. It's equivalent to 1.4em.

@arrowspace00authorFeb 08.2011 — #Thanks for your help. I was under the same impression... 1.4 equates to 140% of the browser's default setting, unless otherwise specified...

@KorFeb 08.2011 — #Thanks for your help. I was under the same impression... 1.4 equates to 140% of the browser's default setting, unless otherwise specified...[/QUOTE]
This is the reason for you to avoid relative units.

Also in #JavaScript _↴

problem with onKeyPress/onKeyDown Return statement of function display problem adding captions to javascript gallery

Success!

Help @arrowspace00 spread the word by sharing this article on Twitter...

Tweet This

CSS for Chrome?

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

CSS for Chrome?

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴