[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now


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

Posted on 2010-09-22
Medium Priority
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;}
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

Question by:Alicia St Rose
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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="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>

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.


Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.


Author Comment

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

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 43

Accepted Solution

David S. earned 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

656 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