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

Posted on 2010-09-22
Last Modified: 2013-12-07
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;} {margin-top: -5px;}
h2.featured-book a {color: #213667; font-size: 1.1em; font-weight: normal; text-decoration: none; border: none;} a {color: #5b7086; font-size: .9em; font-weight: normal; text-decoration: none; border: none;}
h2.featured-book a:hover, a:hover {text-decoration: underline;} a span {display: block; margin-top: 5px; font-size: .85em;}

    anythingSlider v1.2
    By Chris Coyier:
    with major improvements by Doug Neiner:
    based on work by Remy Sharp:

.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 {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;} {background: url('images/module-divider.png')  right 66px no-repeat;} div#video {width: 300px; margin-left: auto; margin-right: auto; font-size: .95em;} 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, 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 {width: 100px; text-align: center;}
div.promotional-materials a img {border: 1px solid #bdbcb7;}
div.promotional-materials 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 {padding-bottom: 12px; font-size: 1.4em; color: #03479c; border-bottom: 1px dashed #5b7086;}
div#latest-news {padding: 2px 0; margin-bottom: 10px; color: #213667; border-bottom: 1px dashed #5b7086; border-top: 1px dashed #5b7086;}

div#latest-news a {text-decoration: none;}
div#latest-news a:hover {text-decoration: underline;}
div#latest-news {padding-bottom: 13px; margin: 0; border: none; }
div#latest-news a {text-decoration: none; color: #03479c;}
div#latest-news a:hover {text-decoration: underline;}
div#latest-news {width: 600px;}
div#latest-news div.entry {padding-top: 10px;}
div#latest-news img {padding: 6px; background-color: #f8f5e8; border: 1px solid #5b7086;}
div#latest-news 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

Question by:Alicia St Rose

Expert Comment

ID: 33740087
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="" target="_blank">Facebook</a></li>
                  <li id="twitter"><a rel="external" href="" target="_blank">Twitter</a></li>
                  <li id="youtube"><a rel="external" href="" target="_blank">You Tube</a></li>
            <div class="about  left footer-module">
                  <h3>About Us</h3>
                        <li><a href="">Services</a></li>
                        <li><a href="">Mission Statement</a></li>
            <div class="information left footer-module">
                        <li><a href="">News</a></li>
                        <li><a href="">Media</a></li>
            <div class="copy-right footer-module">
                  <h3>Publishing by the Seas, Inc</h3>
                        <li><a href=""></a></li>
                        <li>&copy; 2010 Publishing by the Seas</li>

Expert Comment

ID: 33740104
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.

Author Comment

by:Alicia St Rose
ID: 33740122
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.

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

by:Alicia St Rose
ID: 33740125
Is there some preference in Safari, that takes out bold styles?
LVL 42

Expert Comment

by:David S.
ID: 33740216
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.

Author Comment

by:Alicia St Rose
ID: 33741170
Put the comma in and that didn't help.
I'm using Safari 5.
LVL 42

Accepted Solution

David S. earned 250 total points
ID: 33741199
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.

Author Comment

by:Alicia St Rose
ID: 33765500
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.

Author Closing Comment

by:Alicia St Rose
ID: 33765505

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Several part series to implement Internet Explorer 11 Enterprise Mode
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question