[RESOLVED] Font set in CSS file, looks ok in DW but not when live or in preview

@kilo_4queJul 02.2007

Hi guys, I have made a drop down menu consisting of CSS and JS. When I set the font for the main headings, they seem ok in Dreamweaver however as soon as I press F12 for preview or even upload onto a server the font no longer shows up.

The headings are supposed to be in Font: Verdana and od 12pt size but seems like Time New roman 10pt when previewed. Why is this?

Could someone please help

cheers

to post a comment

CSS

11 Comments(s) _↴

@kilo_4queauthorJul 02.2007 — #Hi guys i have two print screens for you.

The first is of how it looks in dreamweaver i.e. the way it should look and the second image is of how it looks when i preview it

Dreamweaver

http://s19.photobucket.com/albums/b193/kilo_4que/?action=view&current=dw.jpg

Preview

http://s19.photobucket.com/albums/b193/kilo_4que/?action=view&current=prev.jpg

@WebJoelJul 02.2007 — #I can't tell from looking at the images if one, -or both, -are severely wrong. It is impossible to diagnose with seeing some code, or link to actual site.

-Got Code? (-I am going to add this to my sig!) ?

@kilo_4queauthorJul 02.2007 — #LOL :o

heres some code matey.

[B]HTML[/B]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>Chrome CSS Drop Down Menu</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************

* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

</script>

</head>

<body>

<table width="770" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="176"><img src="logo.gif" width="176" height="85" /></td>

<td width="520" valign="bottom" background="bg.gif">

<div class="chromestyle" id="chromemenu">

<ul>

<li><a href="http://www.dynamicdrive.com">Home</a></li>

<li><a href="#" rel="dropmenu1">Resources</a></li>

<li><a href="#" rel="dropmenu2">News</a></li>

<li><a href="#" rel="dropmenu3">Search</a></li>

</ul>

</div>



<div id="dropmenu1" class="dropmenudiv">

<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>

<a href="http://www.cssdrive.com">CSS Drive</a>

<a href="http://www.javascriptkit.com">JavaScript Kit</a>

<a href="http://www.codingforums.com">Coding Forums</a>

<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>

</div>



<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">

<a href="http://www.cnn.com/">CNN</a>

<a href="http://www.msnbc.com">MSNBC</a>

<a href="http://news.bbc.co.uk">BBC News</a>

</div>



<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">

<a href="http://www.google.com/">Google</a>

<a href="http://www.yahoo.com">Yahoo</a>

<a href="http://www.msn.com">MSN</a>

</div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

</td>

<td width="74"><img src="acca.gif" width="74" height="85" /></td>

</tr>

</table>

</body>

</html>

[COLOR="Red"][B]CSS[/B]

.chromestyle{

width: 520px;

font-weight:normal;

font: Verdana;

font-size: 12px;

}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.chromestyle ul{

border:none;

width: 100%;

background:none; /*THEME CHANGE HERE*/

padding: 4px 0;

margin: 0;

text-align: center; /*set value to "left", "center", or "right"*/

}

.chromestyle ul li{

display: inline;

}

.chromestyle ul li a{

color: #FFFFFF;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right:none;

}

.chromestyle ul li a:hover{

background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/

}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/

content: " v";

/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/

}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{

position:absolute;

top: 0;

border:none; /*THEME CHANGE HERE*/

border-bottom-width: 0;

font: 11px Verdana;

line-height:18px;

z-index:100;

background-color: #15699f;

width: 200px;

visibility: hidden;

filter: progid?XImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/

}

.dropmenudiv a{

width: auto;

display: block;

text-indent: 3px;

border-bottom:none; /*THEME CHANGE HERE*/

padding: 2px 0;

text-decoration: none;

font-weight: normal;

color: white;

}

* html .dropmenudiv a{ /*IE only hack*/

width: 100%;

}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/

background-color: #3a90c8;

}[/COLOR]

@CentauriJul 02.2007 — #The style should be applied to the <a> elenments themselves:

[CODE].chromestyle{
 width: 520px;
 
 }
 
 
 .chromestyle ul li a{
 color: #FFFFFF;
 padding: 4px 7px;
 margin: 0;
 text-decoration: none;
 border-right:none;
 font-weight:normal;
 font: Verdana;
 font-size: 12px;
 }[/CODE]

@kilo_4queauthorJul 02.2007 — #Hi Centauri, I have tried that also mate. Same problem, looks perfect in Dreamweaver but different in preview

@ray326Jul 02.2007 — #[B]font-family: Verdana, sans-serif;[/B] maybe? Or [B]div.chromestyle[/B]?

@kilo_4queauthorJul 02.2007 — #it cant be anything to do with the font family for the main reason that I have used the exact same line for the inside links and they are working perfect even in preview.

Regarding the div. I dont know why that would make a difference since everything else has been done using the method i have used and is working perfectly. It is just this one little thing lol

Its beginning to really annoy me now

@kilo_4queauthorJul 03.2007 — #Hey guys, thank you all for your input.

I have finally cracked it. I dont know why this worked as opposed to the previous method but here goes.

I changed the follow

[COLOR="red"].chromestyle ul li a

{

color: #FFFFFF;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right:none;

font-weight:normal;

[B]font: Verdana;

font-size: 12px;[/B]

}[/COLOR]

to

[COLOR="Red"].chromestyle ul li a

{

color: #FFFFFF;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right:none;

font-weight:normal;

[B]font: 12px Verdana;[/B]

}[/COLOR]

@WebJoelJul 03.2007 — #Hey guys, thank you all for your input.

I have finally cracked it. I dont know why this worked as opposed to the previous method but here goes.

I changed the follow

[COLOR="red"].chromestyle ul li a

{

color: #FFFFFF;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right:none;

font-weight:normal;

[B]font: Verdana;

font-size: 12px;[/B]

}[/COLOR]

to

[COLOR="Red"].chromestyle ul li a

{

color: #FFFFFF;

padding: 4px 7px;

margin: 0;

text-decoration: none;

border-right:none;

font-weight:normal;

[B]font: 12px Verdana;[/B]

}[/COLOR][/QUOTE]

Because:

font: Verdana;[/QUOTE] is incorrect CSS syntax. For a single declaration "verdana" (the "family")name of the font desired), you need the explicit Selector "[B]font-[I]family[/I];[/B]". It is when you 'shorthand' the declarations of size, weight/style, color, family, etc, that you can omit "-family" and just write it as:

font: 12px normal black verdana, serif.

So, in your code, you can combine this:

[B]font-weight:normal;[/B]

font: 12px Verdana;

into this:

[B]font: 12px normal Verdana[/B]

(Although I would recommend adding a few more family choices, e.g.: arial, helvetica, serif, etc)

@kilo_4queauthorJul 03.2007 — #Aah that explains it all WebJoel. Like i said, I wasnt much of a CSS wizz but am learning as I go on. This thread was really worthwhile for me, as it is just another thing learnt.

Thanks for the reply

@ray326Jul 03.2007 — #... and 10 posts later. :rolleyes:

Also in #CSS _↴

tr:hover and IE Responsive conflict Javascript / @media?Annoying differences between Firefox and Internet Explorer

Success!

Help @kilo_4que spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Font set in CSS file, looks ok in DW but not when live or in preview

11 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

[RESOLVED] Font set in CSS file, looks ok in DW but not when live or in preview

11 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #CSS _↴