asked on
font-family wrongly changes from georgia to verdana

Issue - experienced in IE8.

When I visit http://sincetwentyten.com/ - I experience the following:
The site and text will load as wished (with Georgia as main font-family) - then after like 1 sec MAX - the text somehow "shifts" / turns the font-family into verdana.

Have anyone experienced this before? Any solution for this? Been looking through all my stylesheets and all seems consistant with georgia as main font.
darren-w-
I think its because the stylesheet is taking some time to get applied, it loads 7 up, so its displaying the default style sheet first then applying another later on?
mrsam
ASKER
Pr default it's loading the correct one, but after like 1sec it loads another font-family - so could easily be that another stylesheet is loaded. But just to understand you correct - you're seeing 7 stylesheets being loaded?

The weird thing is, im not seeing any stylesheets with verdana as main font-family anywhere - so can't get my head around it :)
darren-w-
I've got the webdeveloper plugin running on firefox, and its showing verdana as an embedded style, then later it loads Georgia from another stylesheet.

Darren
mrsam
ASKER
Thats sooo weird, I simply cant spot it .. Are you able to see where its embedded?
darren-w-
Looks like its in 960.css
CSS - http://sincetwentyten.com/css/960.css

    * Collapse All
    * Expand All

http://sincetwentyten.com/css/960.css
Embedded Styles from http://sincetwentyten.com/css/960.css

SPAN.skype_pnh_container SPAN.skype_pnh_mark{  display:none !important;}@media screen{SPAN.skype_pnh_print_container{  display:none !important;}SPAN.skype_pnh_container, SPAN.skype_pnh_container *{background-attachment: scroll !important;background-color: transparent !important;background-image: none !important;background-position: 0px 0px ! important;background-repeat: no-repeat !important;border: 0px none !important;border-color: #000000 !important;border-style: none !important;border-width: 0 !important;border-left: 0 none #000000 !important;border-top: 0 none #000000 !important;border-right: 0 none #000000 !important;border-bottom: 0 none #000000 !important;border-left-color: #000000 !important;border-left-style: none !important;border-left-width: 0 !important;border-top-color: #000000 !important;border-top-style: none !important;border-top-width: 0 !important;border-right-color: #000000 !important;border-right-style: none !important;border-right-width: 0 !important;border-bottom-color: #000000 !important;border-bottom-style: none !important;border-bottom-width: 0 !important;border-collapse: separate !important;bottom: auto !important;clear: none !important;clip: auto !important;cursor: pointer !important;direction: ltr !important;display: inline !important;float: none !important;font-style: normal !important;left: auto !important;letter-spacing: 0 !important;list-style-image: none !important;list-style-position: outside !important;list-style-type: disc !important;overflow: hidden !important;overflow-x: hidden !important;overflow-y: hidden !important;padding: 0px 0px 0px 0px !important;padding-left: 0px !important;padding-top: 0px !important;padding-right: 0px !important;padding-bottom: 0px !important;page-break-after: auto !important;page-break-before: auto !important;page-break-inside: auto !important;position: static !important;right: auto !important;table-layout: auto !important;text-align: left !important;text-decoration: none !important;text-indent: 0px !important;text-transform: none !important;top: auto !important;voice-family: inherit !important;white-space: nowrap !important;word-spacing: normal !important;z-index: 0 !important;  color: #49535A !important;  font-family: Tahoma, Arial, Helvetica, sans-serif !important;  font-size: 11px !important;  font-weight: bold !important;  height: 14px !important;  line-height: 14px !important;  margin-left: 0px !important;  margin-top: 0px !important;  margin-right: 0px !important;  margin-bottom: 0px !important;  vertical-align: baseline !important;  width: auto !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_fax SPAN.skype_pnh_right_span, SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_fax SPAN.skype_pnh_right_span{  background-position: -92px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_dropart_flag_span{  background-position: 0px 1px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_textarea_span{  background-position: -90px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_text_span{  visibility: hidden !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free SPAN.skype_pnh_dropart_flag_span{  background-position: 0px 1px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free SPAN.skype_pnh_textarea_span{  background-position: -160px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free SPAN.skype_pnh_text_span{  background-position: -160px 0px !important;  color: #FFFFFF !important;}SPAN.skype_pnh_container SPAN.skype_pnh_left_span{  background-position: 0px 0px !important;  width: 6px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_span{  background-position: -11px 0px !important;  width: 27px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_wo_arrow_span{  background-position: -130px 0px !important;  width: 18px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_flag_span{  background-position: 1px 1px !important;  width: 18px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_textarea_span{  background-position: -125px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_text_span{  padding-left: 5px !important;  background-position: -125px 0px !important;}SPAN.skype_pnh_container SPAN.skype_pnh_right_span{  background-position: -62px 0px !important;  width: 15px !important;}}@media print{SPAN.skype_pnh_print_container{}SPAN.skype_pnh_container{    display:none !important;}}@media screen{SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_common *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_inactive_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_common *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_active_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_fax *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_inactive_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_fax *{  background-image:url('chrome://skype_ff_extension/skin/numbers_common_active_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free SPAN.skype_pnh_text_span{  background-image: none !important;  color: transparent !important;  visibility: visible !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_inactive_free *{  background-image:url('chrome://skype_ff_extension/skin/numbers_free_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_highlighting_active_free *{  background-image:url('chrome://skype_ff_extension/skin/numbers_free_icon_set.gif') !important;}SPAN.skype_pnh_container SPAN.skype_pnh_dropart_flag_span{  background-image: url('chrome://skype_ff_extension/skin/flags.gif') !important;}}


http://sincetwentyten.com/wp-content/themes/sincetwentyten/style.css

/*
Theme Name: Since Twenty Ten
Theme URI: http://wordpress.org/
Description: The Since 2010 theme for WordPress is stylish, customizable, simple, and remarkably readable -- DON'T make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: Kristian B Lee
Version: 1.0
Tags: awesomeness
*/

@import url('css/reset.css');
@import url('css/960.css');
@import url('css/stt.css');

http://sincetwentyten.com/wp-content/themes/sincetwentyten/css/reset.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1 }ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

http://sincetwentyten.com/wp-content/themes/sincetwentyten/css/960.css

body {
	min-width:960px;
}

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_16 {
	margin-left:auto;
	margin-right:auto;
	width:960px;
}

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
	display:inline;
	float:left;
	position:relative;
	margin-left:10px;
	margin-right:10px;
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
	margin-left: 0;
}

.omega {
	margin-right: 0;
}

/* Grid >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .grid_1 {
	width:40px;
}

.container_16 .grid_2 {
	width:100px;
}

.container_16 .grid_3 {
	width:160px;
}

.container_16 .grid_4 {
	width:220px;
}

.container_16 .grid_5 {
	width:280px;
}

.container_16 .grid_6 {
	width:340px;
}

.container_16 .grid_7 {
	width:400px;
}

.container_16 .grid_8 {
	width:460px;
}

.container_16 .grid_9 {
	width:520px;
}

.container_16 .grid_10 {
	width:580px;
}

.container_16 .grid_11 {
	width:640px;
}

.container_16 .grid_12 {
	width:700px;
}

.container_16 .grid_13 {
	width:760px;
}

.container_16 .grid_14 {
	width:820px;
}

.container_16 .grid_15 {
	width:880px;
}

.container_16 .grid_16 {
	width:940px;
}



/* Prefix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .prefix_1 {
	padding-left:60px;
}

.container_16 .prefix_2 {
	padding-left:120px;
}

.container_16 .prefix_3 {
	padding-left:180px;
}

.container_16 .prefix_4 {
	padding-left:240px;
}

.container_16 .prefix_5 {
	padding-left:300px;
}

.container_16 .prefix_6 {
	padding-left:360px;
}

.container_16 .prefix_7 {
	padding-left:420px;
}

.container_16 .prefix_8 {
	padding-left:480px;
}

.container_16 .prefix_9 {
	padding-left:540px;
}

.container_16 .prefix_10 {
	padding-left:600px;
}

.container_16 .prefix_11 {
	padding-left:660px;
}

.container_16 .prefix_12 {
	padding-left:720px;
}

.container_16 .prefix_13 {
	padding-left:780px;
}

.container_16 .prefix_14 {
	padding-left:840px;
}

.container_16 .prefix_15 {
	padding-left:900px;
}



/* Suffix Extra Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .suffix_1 {
	padding-right:60px;
}

.container_16 .suffix_2 {
	padding-right:120px;
}

.container_16 .suffix_3 {
	padding-right:180px;
}

.container_16 .suffix_4 {
	padding-right:240px;
}

.container_16 .suffix_5 {
	padding-right:300px;
}

.container_16 .suffix_6 {
	padding-right:360px;
}

.container_16 .suffix_7 {
	padding-right:420px;
}

.container_16 .suffix_8 {
	padding-right:480px;
}

.container_16 .suffix_9 {
	padding-right:540px;
}

.container_16 .suffix_10 {
	padding-right:600px;
}

.container_16 .suffix_11 {
	padding-right:660px;
}

.container_16 .suffix_12 {
	padding-right:720px;
}

.container_16 .suffix_13 {
	padding-right:780px;
}

.container_16 .suffix_14 {
	padding-right:840px;
}

.container_16 .suffix_15 {
	padding-right:900px;
}



/* Push Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .push_0 {}

.container_16 .push_1 {
	left:60px;
}

.container_16 .push_2 {
	left:120px;
}

.container_16 .push_3 {
	left:180px;
}

.container_16 .push_4 {
	left:240px;
}

.container_16 .push_5 {
	left:300px;
}

.container_16 .push_6 {
	left:360px;
}

.container_16 .push_7 {
	left:420px;
}

.container_16 .push_8 {
	left:480px;
}

.container_16 .push_9 {
	left:540px;
}

.container_16 .push_10 {
	left:600px;
}

.container_16 .push_11 {
	left:660px;
}

.container_16 .push_12 {
	left:720px;
}

.container_16 .push_13 {
	left:780px;
}

.container_16 .push_14 {
	left:840px;
}

.container_16 .push_15 {
	left:900px;
}


/* Push Space IMAGE >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .push_0 {}

.container_16 .pushImage_1 {
	right:60px;
}

.container_16 .pushImage_2 {
	right:120px;
}

.container_16 .pushImage_3 {
	right:180px;
}

.container_16 .pushImage_4 {
	right:240px;
}

.container_16 .pushImage_5 {
	right:300px;
}

.container_16 .pushImage_6 {
	right:360px;
}

.container_16 .pushImage_7 {
	right:420px;
}

.container_16 .pushImage_8 {
	right:480px;
}

.container_16 .pushImage_9 {
	right:540px;
}

.container_16 .pushImage_10 {
	right:600px;
}

.container_16 .pushImage_11 {
	right:660px;
}

.container_16 .pushImage_12 {
	right:720px;
}

.container_16 .pushImage_13 {
	right:780px;
}

.container_16 .pushImage_14 {
	right:840px;
}

.container_16 .pushImage_15 {
	right:900px;
}



/* Pull Space >> 16 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .pull_1 {
	left:-60px;
}

.container_16 .pull_2 {
	left:-120px;
}

.container_16 .pull_3 {
	left:-180px;
}

.container_16 .pull_4 {
	left:-240px;
}

.container_16 .pull_5 {
	left:-300px;
}

.container_16 .pull_6 {
	left:-360px;
}

.container_16 .pull_7 {
	left:-420px;
}

.container_16 .pull_8 {
	left:-480px;
}

.container_16 .pull_9 {
	left:-540px;
}

.container_16 .pull_10 {
	left:-600px;
}

.container_16 .pull_11 {
	left:-660px;
}

.container_16 .pull_12 {
	left:-720px;
}

.container_16 .pull_13 {
	left:-780px;
}

.container_16 .pull_14 {
	left:-840px;
}

.container_16 .pull_15 {
	left:-900px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

http://sincetwentyten.com/wp-content/themes/sincetwentyten/css/stt.css

html {
    overflow-y: scroll;
}

body {
	color: #767676;
	font-family: Georgia, verdana, serif;
	font-size: 87.5%;
	line-height: 150%;
}

a {
	color: #eb1923;
	text-decoration: none;
	}
	a:hover { text-decoration: underline; }
	h1 a,
	a.project { color: #767676; }
	h1 a:hover,
	a.project:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 2em;
	font-style: italic;
	line-height: 1em;
	margin: 1em 0 0.5em 0;
}

h1.project {
	margin: 1em 0 0.25em 0;
}


#header,
#footer {
	border-bottom: 1px solid #cacaca;
	height: 133px;
	overflow: hidden;
	padding: 32px 0 0 0;
}

#header p,
#footer p {
	padding: 0 0 1.5em 0;
}

#header h1,
#footer h1 {
	margin-top: 0;
	margin-bottom: 0;
}

#header h1 a,
#footer h1 a { content: url('img/stt_logo.gif'), ¨ts }

#header nav h2,
#header h2,
#footer h2 {
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	text-transform: uppercase;
}

#header nav ul {
	list-style: none;
	}
	#header nav ul li {
		margin: 0;
	}
/*	
#contentContainer span {
padding: 1.05em 0 0 0;
display: block;
}
*/
#contentContainer span {
	font-style: italic;
	font-size: 11px;
	padding: 0.95em 0 0 0;
	text-align: right;
}

#contentContainer span.project_meta {
	font-style: italic;
	font-size: 11px;
	padding: 5.5em 0 0 0;
	text-align: right;
}

#contentContainer span.project {
	padding: 5.5em 0 0 0;
}
#contentContainer img.project_index {
	/* border-bottom: 1px solid #cacaca; */
	float: right;
	height: 340px;
	margin: 0 9px -6px 0;
	overflow: hidden;
	padding: 0;
	width: 520px;
}

.alignListing {
	display:inline;
	float:left;
	position:relative;
	left: 180px;
	margin-left:10px;
	margin-right:10px;
	width:520px;
}

.alignListing p {
	display: inline;
}

.imagePadding {
	margin: 0px;
	padding: 15px 0 0 0;
}

#contentContainer img.project {
	border-bottom: 1px solid #cacaca;
	height: 301px;
	margin: 0 0 -6px 0;
	overflow: hidden;
	padding: 0 0 2em 0;
	width: 460px;
}

#contentContainer div.content-body {
	border-bottom: 1px solid #cacaca;
	padding: 0 0 2em 0;
}

#contentContainer p {
	padding: 0.70em 0 1em 0;
}
/*
#contentContainer_project p {
	margin: 0 0 20px 0;
	padding: 0px;
}
*/
div.page-content-body {
	padding: 0 0 2em 0;
}

.comments-link {
font-size: 12px;
}

#footer {
	border-top: 1px solid #cacaca;
/*	margin-top: 32px;
*/
}

#footer span {
	font-style: normal;
	font-size: 100%;
	text-align: left;
/*	margin-top: 32px;
*/
}

div#footerlinks {
	padding-bottom: 32px;
	padding-top: 8px;
	}
	div#footerlinks ul li {
		float: left;
		padding: 0 8px 0 8px;
		}
		div#footerlinks ul li:first-child {
			padding-left: 0px;
			padding-right: 8px;
			}
		div#footerlinks ul li:last-child {
			padding-left: 8px;
			padding-right: 0px;
			}
			div#footerlinks ul li a {
				color: #767676;
				text-transform: uppercase;
				}
				div#footerlinks ul li a:hover {
					color: #eb1923;
				}




/*
nav li.current_page_item {
	list-style-type: circle;
}
*/

nav li.current_page_item:before,
nav li.current-menu-item:before {
	color: #eb1923;
	content: "» ";
	margin-left: -11px;
}
/*
nav li.current_page_item a {

}
*/


h3#comments-title {
	font-size: 1.5em;
	margin: 1em 0;
	
}


li.comment {
	border-bottom: 5px solid red;
}

div.comment-meta {
	font-style: italic;
	font-size: 75%;
	
}

div.comment-author cite.fn {
	font-weight: bold;
}

div#respond h3#reply-title {
	font-weight: bold;
	margin: 1.5em 0 0 0;
}

div#respond p.comment-notes {
	font-style: italic;
	font-size: 75%;
}


p.comment-form-author {
	margin: 1em 0 0 0;
}
p.comment-form-author label { }
p.comment-form-author input {
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	border-bottom: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
	display: block;
	color: #bababa;
	font-family: Georgia, verdana, serif;
	font-size: 1em;
	font-weight: bold;
	padding: 6px;
	width: 504px;
}

p.comment-form-email {
	margin: 1em 0 0 0;
}
p.comment-form-email label { }
p.comment-form-email input {
	border-top: 1px solid #dddddd;
	border-left: 1px solid #dddddd;
	border-bottom: 1px solid #eeeeee;
	border-right: 1px solid #eeeeee;
	display: block;
	color: #bababa;
	font-family: Georgia, verdana, serif;
	font-size: 1em;
	font-weight: bold;
	padding: 6px;
	width: 504px;
}

p.comment-form-url {
	margin: 1em 0 0 0;
}
p.comment-form-url label { }
p.comment-form-url input {
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-bottom: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
display: block;
color: #bababa;
font-family: Georgia, verdana, serif;
font-size: 1em;
font-weight: bold;
padding: 6px;
width: 504px;
}


p.comment-form-comment {
	margin: 1em 0 0 0;	
}
p.comment-form-comment label { }
p.comment-form-comment textarea {
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-bottom: 1px solid #eeeeee;
border-right: 1px solid #eeeeee;
display: block;
color: #767676;
font-family: Georgia, verdana, serif;
font-size: 1em;
line-height: 1.5em;
padding: 6px;
width: 504px;
}

div#nav-above {
	border-bottom: 1px solid #cacaca;
	padding: 8px 0 8px 0;
}
div#nav-below {
	border-top: 1px solid #cacaca;
	padding: 8px 0 8px 0;
}
div#nav-above div.nav-previous,
div#nav-below div.nav-previous {
	float: left;
}
div#nav-above div.nav-next,
div#nav-below div.nav-next {
	float: right;
}


/* DISQUS */
input.dsq-trackback-url { /* width of trackback url input */
	color: #767676;
	font-family: Georgia, verdana, serif !important;
	font-size: 1em !important;
	line-height: 1.5em;
	padding: 6px;
	width: 510px;
}

a.dsq-brlink { /* hiding the disqus website link */
	display: none;
}
Open in new window
ASKER CERTIFIED SOLUTION
imantas
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
imantas
Forgot to mention that I did this only to stt.css.
mrsam
ASKER
I ended up removing Verdana from the stylesheet. Never figured out why it was overwriting :) Thanks a lot for all the help !