• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2826
  • Last Modified:

Strong or font-weight bold not showing up in Safari and Chrome

This is peculiar. I can't seem to get any of my <strong> tags nor my bold font-weights to show up in Safari or Chrome.

The headers in the footer should all be bold
And there should be some bold text appearing on this page as well.


Am I doing something retarded with my specificity?

/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
	margin: 0;
	padding: 0; 

/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;

/* Removes Styles from lists */
ol, ul {
	list-style: none; 

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, th, var {
	font-style: normal;
	font-weight: normal;

/* Removes list-style from lists */
table {
	border-collapse: collapse;
	border-spacing: 0;

/* Removes border from fieldset and img */
fieldset, img {
	border: 0;

/* Left-aligns text in caption and th */
caption, th {
	text-align: left;

/* Removes quotation marks form q */
q:before, q:after {
content: '';

/* Removes outline from links in firefox */
a {
	outline: none;


html {height: 100%; background:  url('images/body-bg.jpg') top center repeat;}
body {height: 100%; font: 1em 'Crimson Text' serif; color: #213667; line-height: 1.125em; text-align: justify; background: url('images/body-gradient.jpg') top center repeat-x; -webkit-text-size-adjust: none;}

a:link, a:visited { color: #5b7086; text-decoration: none;}
a:hover { text-decoration: underline;}

h1, h3, h4 { margin-bottom: 1em; font-weight: normal;}
h2 { margin-bottom: .5em; color: #213667; font-size: 1.7em; font-weight: normal; }
p {padding-bottom: 1em;}
strong {font-weight:900 !important;}

/* =GENERAL LAYOUT ----------------*/

div#allcontent {position: relative; margin: 0 auto; width: 1000px; min-height: 100%; background: url('images/main-content-repeat.png') top center repeat-y;}
div#content {padding-bottom: 90px; margin-bottom: 25px;}
div.wrapper-stick-footer {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -100px;}
div#header {width: 1000px; height: 130px;}
div#header h1 {padding: 10px 0 0 25px;}
div#header h1 a {display: block;  width: 591px; height: 112px; background: url(images/logo.png) no-repeat top center; text-indent: -9999px;}

div#main-content {width: 1000px; margin-top: 25px; overflow: hidden;}
div#main-content h2 {padding: 40px 0 20px 0; margin-bottom: 20px; border-bottom: 1px solid #5b7086;}
div#main-content div#top-bg {padding: 0 35px;}
div#top-bg {}
div#bottom-bg {}

/* =NAVIGATION ----------------*/

div#navigation { position: absolute; height: 30px; width: 981px; padding-top: 8px; margin-left: 10px; background-color: #213667;}
ul#menu-primary-menu {float: right; width: 100%; text-align: right;}
ul#menu-primary-menu li {display: inline; padding: 10px 33px 0 0;}
div#navigation ul#menu-primary-menu li:first-child {padding-left: 0;}
ul#menu-primary-menu li a {font-size: 1.4em; text-decoration: none; color: #6e859d; border: none;}
ul#menu-primary-menu li a:hover, ul#menu-primary-menu li.current-menu-item a { color: #ffffff; }

/* =HOME PAGE */

a.slider-image {float: left; width: 156px; border: none;}
div.slider-text {float: right; width: 545px; padding: 20px 10px 0 0; margin-top: -15px; background-color: transparent;}
div.slider-text p.more-link {margin-top: -5px; text-align: right;}
h2.author-slideshow {margin-top: -5px;}
h2.featured-book a {color: #213667; font-size: 1.1em; font-weight: normal; text-decoration: none; border: none;}
h2.author-slideshow a {color: #5b7086; font-size: .9em; font-weight: normal; text-decoration: none; border: none;}
h2.featured-book a:hover, h2.author-slideshow a:hover {text-decoration: underline;}
h2.author-slideshow a span {display: block; margin-top: 5px; font-size: .85em;}

    anythingSlider v1.2
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/

.anythingSlider                         { width: 970px; height: 311px; position: relative; margin: 25px 0 0 15px; background: ;}
.anythingSlider .wrapper                { width: 741px; overflow: auto; height: 311px; margin: 0 0; position: absolute; top: 20px; left: 105px }
div.textSlide{ width: 740px;}
                                       /* Width below is max for Opera */
.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: transparent; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; margin-top: 19px; height: 250px; width: 741px;}
.anythingSlider .arrow                  { display: block; height: 22px; width: 17px; background: url(images/slider-buttons.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 135px; cursor: pointer; }
.anythingSlider .forward                { background-position: top right; right: 20px;}
.anythingSlider .back                   { background-position: top left; left: 20px;}
.anythingSlider .forward:hover          { background-position: bottom right; }
.anythingSlider .back:hover             { background-position:bottom left; }

#thumbNav                               { position: absolute; top: 285px; right: 100px;}
#thumbNav a                             { display: inline-block; width: 12px; height: 12px; margin: 0 5px 0 0; background: url(images/thumbnav.png) repeat-x 0 0; text-indent: -9999px;  border: none; /*-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px;*/}
#thumbNav a:hover                       { background-position: 0 -12px;}
#thumbNav a.cur                         { background-position: 0 -12px;}

/*#start-stop                             { background: background-image: url(images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 0; top: 350px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { background-color: ; }
#start-stop:hover                       { background-image: none; }*/

.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }

/* =modules */

div#modules {position: relative; width: 981px; margin-left: 10px; overflow: hidden; background: url('images/heading-bg.jpg') top center repeat-x;}
div.module {position: relative; float: left; width: 307px; padding: 0 10px; overflow: hidden;}
div.module h2 {width: 300px; height: 31px; padding: 10px 0 0 10px; margin-bottom: 20px; background: url('images/heading-bg.png') 0 0 repeat-x; color: #ffffff; font-size: 1.6em; font-weight: normal;}
div.module a img {display: block; float: left; width: 92px; margin: 0 10px 5px 0; border: none;}
div.module div.module-text {float: right; width: 287px; margin-left: auto; margin-right: auto; font-size: .950em; text-align: left;}

div.module div.module-content {width: 290px; margin-left: auto; margin-right: auto;overflow: hidden;}
div.module h3 {color: #213667; font-size: 1.2em; font-weight: normal; margin-bottom: .1em;}
div.module h3.author {padding-bottom: 10px; border-bottom: 1px dashed #bdbcb7; color: #5b7086; margin-bottom: 1em; font-size: 1.1em;}

div.left-module {padding:; background: url('images/module-divider.png')  right 66px no-repeat;}
div.center-module {background: url('images/module-divider.png')  right 66px no-repeat;}
div.center-module div#video {width: 300px; margin-left: auto; margin-right: auto; font-size: .95em;}
div.center-module div#video p.more-link {margin-top: 15px;}
div.right-module h3 a, div.left-module h3 a {color: #213667;}
div.right-module div#excerpt { width: 290px; margin: 0 auto; font-size: .950em; text-align: left;}
div.right-module div#excerpt h3 {font-size: 1.4em; padding-bottom: 10px; margin-bottom: 10px; line-height: 1.050em; border-bottom: 1px dashed #bdbcb7;}
div.right-module p.more-link, div.center-module p.more-link, div.left-module p.more-link {text-align: right; margin-top: 5px;}


table {font-family: 'Crimson Text', ‘Palatino Linotype’, serif;;}
table br {display: none;}
thead {border-bottom: 1px solid #5b7086;}
th.column-1 {width: 180px;}
th.column-2 {text-indent: -9999px;}
th.column-3 {width: 190px; text-align: center;}

div#main-content th h2 {border: none; padding-bottom: 10px; margin-bottom: 10px; padding-top: 23px;}
td {padding: 0; border-bottom: 1px dashed #5b7086;}
td.column-1, td.column-3 {text-align: center; vertical-align: top; padding-top: 23px;}
td.column-1 img {padding: 8px; background-color: #f8f5e8; border: 1px solid #bdbcb7;}
div#main-content td.column-2 {padding-top: 20px;}
div#main-content  h2.catalogue-title { padding: 0; font-size: 1.7em; border: none;}

div#main-content td.column-2 h2.catalogue-title {margin-bottom: .2em;}
div#main-content td.column-2 h2.catalogue-title a { font-size: .9em; text-decoration: none; color: #213667;}
div#main-content td.column-2 h2.catalogue-title a:hover {text-decoration: underline;}
td.column-2 h3 {margin-bottom: .3em; color: #5b7086; font-size: 1.3em;}
td.column-2 p.specs {font-size: 1.1em;}
td.column-2 p.more-link {text-align: right;}
td.column-3 a img {border: 1px solid #bdbcb7;}
td.column-3 a img:hover {border: 1px solid #213667;}



ul#team h3, ul#partners h3 {margin: 10px 0 8px 0; font-size: 1.3em; color: #03479c;}
ul p span {color: #03479c;}
ul#partners li {padding-top: 5px; border-bottom: 1px dashed #5b7086;}
ul#partners li:last-child {border: none;}



ul#studio h3 {margin: 10px 0 10px 0; font-size: 1.3em; color: #03479c;}



ul#media-materials h3 {padding-bottom: 10px; margin: 15px 0; font-size: 1.3em; color: #03479c; border-bottom:  solid 1px #5b7086;}
ul#media-materials h4 {font-size: 1.2em;}
div.promotional-materials p.media-kit {width: 100px; text-align: center;}
div.promotional-materials p.media-kit a img {border: 1px solid #bdbcb7;}
div.promotional-materials p.media-kit a img:hover {border: 1px solid #213667;}
h4.testimonial-header {color: #03479c; font-size: 1.2em;}
ul.testimonials {padding-top: 10px;}
ul.testimonials li p {margin-bottom: 0; padding-bottom: .5em;}
/*ul.testimonials {border-bottom: 1px dashed #5b7086;}*/
ul.testimonials li {padding-bottom: 10px;}


/* =NEWS PAGE */

div#latest-news {float: left; width: 562px;}
div#sidebar {float: right; width: 300px; text-align: left;}
div#sidebar ul {padding-bottom: 20px;}
ul h3.sidetitl, div#latest-news h3.post-title {padding-bottom: 12px; font-size: 1.4em; color: #03479c; border-bottom: 1px dashed #5b7086;}
div#latest-news p.date {padding: 2px 0; margin-bottom: 10px; color: #213667; border-bottom: 1px dashed #5b7086; border-top: 1px dashed #5b7086;}

div#latest-news p.date a {text-decoration: none;}
div#latest-news p.date a:hover {text-decoration: underline;}
div#latest-news h3.post-title {padding-bottom: 13px; margin: 0; border: none; }
div#latest-news h3.post-title a {text-decoration: none; color: #03479c;}
div#latest-news h3.post-title a:hover {text-decoration: underline;}
div#latest-news div.post {width: 600px;}
div#latest-news div.post div.entry {padding-top: 10px;}
div#latest-news div.post img {padding: 6px; background-color: #f8f5e8; border: 1px solid #5b7086;}
div#latest-news div.post p.wp-caption-text {text-align: left;} 



div#column-left-contact {float: left; width: 530px; padding-right: 20px; border-right: 1px dashed #5b7086;}
div#column-right-contact {float: right; width: 350px; padding-left: 10px;}

div#column-right-contact ul#submissions li {margin-bottom: 25px;}
div#column-right-contact ul#submissions h3 {font-size: 1.4em; color: #03479c; margin-bottom: 8px;}
div#column-left-contact h2#thankyou {border: none; margin-top: 20px;}

div#column-left-contact h3 {margin-bottom: .5em; font-size: 1.4em; color: #03479c;}
div#column-left-contact p, div#column-right-contact ul#submissions a {font-size: 1.1em;}
div#column-left-contact p.error {font-size: 1.2em; color: #df4c0a; margin-top: 20px;}


div#column-left-book {float: left; width: 208px; margin-top: 40px;}
div#column-right-book {float: right; width: 660px;}

div#column-left-book img {padding: 8px; background-color: #f8f5e8; border: 1px solid #bdbcb7;}
div#column-left-book a img {padding: 0;}
div#column-left-book a img:hover {padding: 0; border: 1px solid #213667;}
div#column-left-book ul li, div#column-left-book h3 {text-align: center;}
div#column-left-book h3 {margin: 20px 0; font-size: 1.4em; color: #03479c;}
div#column-right-book h3 {font-size: 1.4em; color: #5b7086; line-height: 1em;}

div#column-right-book ul {margin-bottom: 25px;}
div#column-right-book ul li {font-size: 1.050em;}

p#return {text-align: right;}

/* =FOOTER */

div#footer {position: relative; width: 981px; padding: 25px 0; margin: -90px auto 0; overflow: auto; color: #5b7086; border-top: 1px solid #213667; clear: both;}
div.push {height: 90px; clear: both;}
div.left {float: left; width: 206px; padding-left: 20px;}
div.copy-right {float: right: width: 320px; padding-right: 20px; text-align: right;}

div#footer a {color: #5b7086; text-decoration: none; border: none;}
div#footer a:hover {text-decoration: underline;}

div#footer div.footer-module h3 {margin-bottom: 7px; font-weight: bold;}
div.footer-module li {margin-bottom: 3px;}

div.connect ul {height: 23px;}
div.connect li {display: inline; float: left; padding-right: 6px;}
div.connect li a {display: block; height: 23px; text-indent: -9999px;}
div.connect li#facebook a {background: url('images/facebook.png') 0 0 no-repeat; width: 76px; height: 17px; margin-top: 3px;} 
div.connect li#twitter a {background: url('images/twitter.png') 0 0 no-repeat; width: 16px;}
div.connect li#youtube a {background: url('images/youtube.png') 0 0 no-repeat; width: 56px;}

div.connect li#facebook a:hover {background-position: 0 -17px;}
div.connect li#twitter a:hover, div.connect li#youtube a:hover {background-position: 0 -23px;}

/* =FORMS */

/* =search form */

div#searchform { position: absolute; top: 10px; right: 50px;}
p input[type=text].search {position: absolute; top: 5px; right: 2px; height: 25px; padding-left: 3px; border: 1px solid #8e9dac; background-color: #ffffff; color: #21356a; }
p input[type=submit].go {position: absolute; top: 5px; right: -30px; height: 27px; width: 27px; background: url(images/go-button.png) no-repeat 0 0; border: none;}
input[type=submit].go:hover { background-position: 0 -27px;}

/* =contact form */

form#contactform label {display: block; color: #03479c; padding: 8px 0 6px; font-size: 1.1em;}
form#contactform input[type=text], form#contactform textarea {padding: 0 3px; border: 1px solid #5b7086; background-color: #ffffff; color: #213667; font-family: arial, sans-serif; font-size: .9em;}
form#contactform textarea {height: 100px; width: 445px;}
form#contactform input[type=text] {height: 23px; width: 260px;}
form#contactform button {float: right; height: 24px; padding-right: 40px; margin: 5px 65px 0 0; background: url('images/send-button.png') 50px 2px no-repeat; border: none; font: 1.2em 'Crimson Text', arial, serif; color: #03479c;}
form#contactform button:hover {background-position: 50px -22px;}

Open in new window

Alicia St Rose
Alicia St Rose
1 Solution
Not sure what the issue is in Safari.  I have OS X and this is what I get.

The HTML for the footer doesn't have strong or bold styles applied:

<div id="footer">
      <div class="connect left footer-module">
                  <li id="facebook"><a rel="external" href="http://www.facebook.com/pages/Santa-Barbara-CA/Publishing-by-the-Seas/155995997758882?ref=ts" target="_blank">Facebook</a></li>
                  <li id="twitter"><a rel="external" href="http://twitter.com/publishbythesea" target="_blank">Twitter</a></li>
                  <li id="youtube"><a rel="external" href="http://www.youtube.com/PublishingByTheSeas" target="_blank">You Tube</a></li>
            <div class="about  left footer-module">
                  <h3>About Us</h3>
                        <li><a href="http://publishingbytheseas.com/pbs-studio">Services</a></li>
                        <li><a href="http://publishingbytheseas.com/about">Mission Statement</a></li>
            <div class="information left footer-module">
                        <li><a href="http://publishingbytheseas.com/news">News</a></li>
                        <li><a href="http://publishingbytheseas.com/media">Media</a></li>
            <div class="copy-right footer-module">
                  <h3>Publishing by the Seas, Inc</h3>
                        <li><a href="mailto:info@publishingbytheseas.com">info@publishingbytheseas.com</a></li>
                        <li>&copy; 2010 Publishing by the Seas</li>
Both I believe are W3C compliant, and there have been many problems with displaying CSS properly on Safari and Chrome. Try to run your CSS through a validator. Here are a couple that might help:

You may also need to validate your markup:

Let me know if this helps any.
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Things are really getting weird. You screen shot shows the headers: Connect, About Us, Information and Pub... BOLD.
That's NOT what I see on Safari or Chrome.
I have the font-weight set in my style sheet and I have a strong tag around "Connect" as a test.

Below is what I see on Safari. Notice lack of any boldness.

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Is there some preference in Safari, that takes out bold styles?
David S.Commented:
It shows up fine here in Google Chrome and Safari 4+.  The bold is missing in Safari 3.2 though.

Perhaps the problem is caused by the missing comma before "serif" in the "font" declaration of the "body" rule.
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Put the comma in and that didn't help.
I'm using Safari 5.
David S.Commented:
Now it's not showing up as bold in Firefox. Perhaps the problem is that only the regular variant of 'Crimson Text' is being loaded. Perhaps you need to load the bold and italic variants separately.
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Sorry I've been lagging on this question.
I'm using Google Font API for the text. The font I'm using Crimson Text has only one variant. I tried others with bold variants and they worked. Chrome and Safari may just be a bit more persnickety about Google Font API.
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now