Solved

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

Posted on 2010-09-22
9
2,466 Views
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.

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
Comment
Question by:Alicia St Rose
9 Comments
 
LVL 5

Expert Comment

by:sscotti
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">
            <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
 
LVL 7

Expert Comment

by:Element1910
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:
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
 
LVL 7

Author Comment

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

Author Comment

by:Alicia St Rose
ID: 33740125
Is there some preference in Safari, that takes out bold styles?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
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.
0
 
LVL 7

Author Comment

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

Accepted Solution

by:
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.
0
 
LVL 7

Author Comment

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

Author Closing Comment

by:Alicia St Rose
ID: 33765505
Thanks!!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

759 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now