• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2729
  • 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.

http://publishingbytheseas.com/media

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;
}
/*------------------------*/

/* =UNIVERSAL STYLING */

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; }*/



/*
  Prevents
*/
.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;}
/*------------------------*/

/* =TITLES PAGE */

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;}

/*------------------------*/

/* =ABOUT US PAGE */

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;}

/*------------------------*/

/* =PBS STUDIO PAGE */

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

/*------------------------*/

/* =MEDIA PAGE */

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;} 

/*------------------------*/

/* =CONTACT PAGE */

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;}
/*------------------------*/

/* =BOOK DETAILS PAGE */

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

0
Alicia St Rose
Asked:
Alicia St Rose
1 Solution
 
sscottiCommented:
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">
            <h3><strong>Connect</strong></h3>
            <ul>
                  <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>
            </ul>
            </div>
            <div class="about  left footer-module">
                  <h3>About Us</h3>
                  <ul>
                        <li><a href="http://publishingbytheseas.com/pbs-studio">Services</a></li>
                        <li><a href="http://publishingbytheseas.com/about">Mission Statement</a></li>
                  </ul>
            </div>
            <div class="information left footer-module">
                  <h3>Information</h3>
                  <ul>
                        <li><a href="http://publishingbytheseas.com/news">News</a></li>
                        <li><a href="http://publishingbytheseas.com/media">Media</a></li>
                  </ul>
            </div>
            <div class="copy-right footer-module">
                  <h3>Publishing by the Seas, Inc</h3>
                  <ul>
                        <li><a href="mailto:info@publishingbytheseas.com">info@publishingbytheseas.com</a></li>
                        <li>&copy; 2010 Publishing by the Seas</li>
                  </ul>
            </div>
      </div>
Screen-shot-2010-09-22-at-8.25.4.png
0
 
Element1910Commented:
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:
http://jigsaw.w3.org/css-validator/
http://www.w3schools.com/site/site_validate.asp

You may also need to validate your markup:
http://validator.w3.org/

Let me know if this helps any.
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Whoa,
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.

screenshot.jpg
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Is there some preference in Safari, that takes out bold styles?
0
 
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.
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Put the comma in and that didn't help.
I'm using Safari 5.
0
 
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.
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Hi.
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.
Bummer.
Thanks,
Kravimir!
0
 
Alicia St RoseOwner & Principle Developer/DesignerAuthor Commented:
Thanks!!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

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