"sans-serif" font assignment in CSS not happy in Safari

http://www.dandreaco.com/safari.jpg
http://www.dandreaco.com/firefox.jpg
The Safari is the bad one; the Firefox is the way the page SHOULD look. I have been having this problem now for about 8 weeks, but I cannot pinpoint where it came from as the update to Safari and the installation of the new MS Office 2008 ran consecutively. Regardless, now any style sheet that just has "sans-serif" with NOTHING else as a font assignment shows up this way. It looks like it may just be a character encoding issue, because Safari does not have Western IS0-8859-1. I assumed Western ISO Latin-1 was the same, but I don't think that's true because I have seen many negative posts relating to Western ISO Latin-1 on developer sites all over the net. I chose Roman and it doesn't fix it, btw. Any clues???? This is going to force me to bag Safari till they fix this problem.

There was a "problem" font. I don't even know how I got it, but it's kind of like a "font virus." Because everything is set up for "Helvetica" this particular font, "Helvetica in a Hamper" uses all the correct font naming, family, etc., coding and in so doing, weasels its way into becoming your only Helvetica font. "M" and "N" are in reverse order, as are lower case "m" and "n" and "a" and "b" with "o" and "p", i.e., opcdefghijklnmabqrstuvwxyz.

Similar Messages

How can I get the TOC to display ALWAYS in a Sans-Serif Font in Linux/Firefox.

I've created my help project in RH9. When it displays in Linux/Firefox, the fonts in the topics are fine, but the TOC displays in Times New Roman. Is there a setting in RH9 that I need to use to keep this from happening?

Hi,
Did you change the setting in the skin? What font have you set for the TOC? Perhaps you set a font that is not available on linux so make sure that you use a web safe font. For more information on web safe fonts, see http://www.w3schools.com/cssref/css_websafe_fonts.asp
You can also tinker with your output files. In whthost.js, you can amend the CSS that RoboHelp uses for the TOC. you can add a rule for a sans-serif font the browser can fall back on. See http://www.wvanweelden.eu/webhelp_output_files/whthostjs for more information on the whthost.js file.
Greet,
Willam

Setting sans-serif font in TextFormat?

Is there a way to set a generic sans-serif device font when setting the font property of the TextFormat?
Or does the font property have to be a specific font name?
For example, it would be nice to set the font property similar to how you set the font family within a stylesheet: i.e.
"Arial, Helvetica, sans-serif"
Instead it appears that you can only set an actual name of a font (i.e. "Arial") and if the user's computer does not have that particular font, then the font face is set to Times New Roman.
Please let me know if there is a way to set a generic font family rather than setting a specific single font family.
thanks in advance!

What about using Microsoft Sans Serif? It is included in Mac OS X 10.5.
http://docs.info.apple.com/article.html?artnum=307069

MS Sans Serif font missing

I receive a regular club bulletin which is in MS Sans Serif.
When I open it with Pages I get a warning that MS Sans Serif is missing, and I replace it with Microsoft Sans Serif.
But, neither before or after replacing it, is the pagination as the author intended. It is not the same as when opened in LibreOffice for example.
Is there any way I can download MS Sans Serif and have Pages use it?
Or any other way round this problem for Pages? or do I have to use LibreOffice
Thanks

fruhulda wrote:
It might or might not get the pagination wrong. It depends on which features used when creating the document.
My strong view is that the Sender has the obligation to make sure everyone who he/she wants to read the bulletin, should use a format or supply with alternatives, to make sure it can be read. The reader shouldn't be the one to adjust to the senders restricted view on which format or font to use. You have to ask for a pdf version at least. You can open in Preview, PC user have to get Adobe reader but they usually already have it on their computers.
I can't see it a a defeat on your part. Maybe I can see it on the senders part thoguh.
You are right of course, in this day and age PDFs and Adobe Reader should be the norm.
But this is a voluntary organisation where a lot of work is done unpaid by a few people. Neither the sender nor the members are particularly computer literate. I don't feel it is appropriate to tell them about their obligations!
I call it a defeat because my Macs can't handle such a document without third party software or requesting the sender to do something which all the Windows members don't need. This is the kind of problem which helps put people off Macs.
However, you said that there is a possibility that Pages would get the pagination right if it had the correct font, so can I ask again if it is possible to download MS Sans Serif? There are other Microsoft fonts in OSX, so why not this one? I have googled for it without success.
It isn't a big deal to use LibreOffice, but my tidy mind would like Pages to handle it if possible.
Thanks for helping

MS sans serif font in Power Point

Does anyone know if there is a font for Mac that is same or equivalent to MS sans serif in windows. I compose in Mac but often present in Windows and would like to avoid fixing fonts that don't appear in Windows.

What about using Microsoft Sans Serif? It is included in Mac OS X 10.5.
http://docs.info.apple.com/article.html?artnum=307069

I'm using Mac OS 10.6.8 with Firefox 7.0.1. In the past hour or so my fonts on nearly all webpages have turn to a bold san serif font and I can't figure out how to change them back to a thinner font. Can anyone help?

This just happened without reason. Not sure what other information I can provide.

Hi! It sounds like you might have accidentally changed the default font. You should take a look at the Knowledge Base article [[Changing fonts and colors#os=mac&browser=fx7]]. It should give you all the steps you need to change it back. Another possible scenario is that you accidentally increased the font size. This might give the appearance that all the text is in bold. You can find the details in [[How do I use Zoom?]] Since this can be done through a keyboard shortcut, it might be worth a look. I know I've accidentally changed the font size myself a few times.
Hopefully this helps!

My default san serif font is a western font- how do I change back to something readable?

I just updated to Firefox 6 and now the default font that is displaying on many websites (including what I'm typing right now) is the font "zebrawood". how do i change back to how it was before? this is very irritating.

You can do a check for corrupted fonts and other font issues:
* http://www.thexlab.com/faqs/multipleappsquit.html - Font Book 2.0 Help: Checking for damaged fonts
You can see the defaults in a screenshot in this KB article:
* https://support.mozilla.com/kb/Some+text+shows+up+bold+after+upgrade

Not happy with Safari upgrade

Just had a 10.8 upgrade which included a new Safari.
The Safari doesn’t work like the last version.
1. When I launch Safari it opens with Top Sites rather then with Yahoo, even though it's listed as my home page.
2. When I go to Bookmarks, it opens in a tabs, which is annoying.
Are there any changes I can make to correct them?
Thanks

To set Yahoo as your default page:
Open Safari's Preferences. In the General tab, there is a drop-down menu with the title "New tabs open with". Simply click and select "homepage" (make sure of course that Yahoo's URL is listed in the box below)
I'm looking for a fix for the second issue, will come back if I find one.
Hope this helps!
~Ian

Horizontal menu bar shows serif type font in Live View and Preview but sans serif is in css file

Help I am using the Spry horizontal menu bar and while it is working fine, it is showing a serif font in Live View and in all Browsers even though I have selected a sans serif font. What gives? I have attached the SpryMenuBarHorizontal.css

Add this to your embedded styles:
body {
background-color: #999;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
using, of course, the font list you want.
All those styles that rely on the 'default' font will now default to the Trebuchet font list (or to your chosen list).
Beth

Font mapping: 'Sans Serif' and 'Serif'

Hi,
I've got a trouble with my 'Sans' and 'Sans Serif' fonts (aliases?): they are mapped to one and the same undesirable Serif font. I've done some research, but still haven't got past vague suspicions.
Something in /etc/fonts/conf.d, no? BTW, this directory is empty, in my case.
I did this, experimentally:
$ sudo ln -s /etc/fonts/conf.avail/49-sansserif.conf 49-sansserif.conf
$ fc-cache -fv
Nothing changed. What's the correct approach to the problem?
Last edited by Llama (2011-07-21 15:37:12)

brebs wrote:What app are you using, that wants a "Sans Serif" alias? I think it should be "Sans" and "Serif"
KDE calls it "Sans Serif", Xfce just "Sans".
Thank you very much, brebs! At least, I can document the problem now:
$ fc-match "Sans"
Ubuntu-M.ttf: "Ubuntu" "Medium"
$ fc-match "Serif"
Ubuntu-M.ttf: "Ubuntu" "Medium"
Last edited by Llama (2011-07-21 15:46:47)

Spry Menu Bar css not compatible with IE7? or compatibility View on IE8?

Well i've made my website
. Swimmerbuddy.com
Problem:I used the spry menu bar on a div tag. I've got it working fine on several browser and so on.. but hmm. i noticed that IE7 and only on compatibility view of IE8 it does not work...
It seems like the drop down menus get cover by the main content underneath it..
I started of with dwt i made my self.This is the DWT and the css that controll the dwt and the spry menu bar.
PLZ HELP ME.. THANKS
THIS IS THE DWT THAT THE PAGE RUNS ON
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link href="../CSS/main.css" rel="stylesheet" type="text/css" />


<style type="text/css">
a:link {
color: #000;
text-decoration: none;
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:visited {
color: #000;
text-decoration: none;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
    <div id="networkicons"><a href="http://www.facebook.com/?ref=logo#!/profile.php?id=100001554936595" target="_blank"><img src="../_images/facebook.png" alt="facebook.com" width="45" height="45" border="0" title="facebook.com"/></a><a href="http://www.myspace.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/myspace.png" alt="myspace.com" width="44" height="45" border="0" title="myspace.com"/></a><a href="http://twitter.com/swimmerbuddy" TARGET="_blank"> <img src="../_images/twitter.png" alt="twitter.com" width="43" height="45" border="0" title="twitter.com"/></a><a href="http://www.youtube.com/swimmerbuddy1" TARGET="_blank"> <img src="../_images/youtube.png" alt="youtube.com" width="44" height="45" border="0" title="youtube.com"/></a></div>
    <div id="buyNow1">
      <p><a href="../order_now.html"><img src="../buynowbutton.png" alt="bt1" width="130" height="25" border="0" longdesc="Order Your Swimmer Buddy Today!!" /></a></p>
    </div>
</div>
<div id="mainNav">
    <ul id="mainNavcontent" class="MenuBarHorizontal">
      <li><a href="../index.htm">Home</a>        </li>
      <li><a href="../swimmer.html">Swimmer Buddy</a></li>
      <li><a href="../order_now.html">Order Now</a>        </li>
      <li><a href="#" class="MenuBarItemSubmenu">Gallery</a>
        <ul>
          <li><a href="../photo_gallery.html">Photos</a></li>
          <li><a href="../video_gallery.html">Videos</a></li>
        </ul>
      </li>
      <li><a href="#" class="MenuBarItemSubmenu">Zinger Products</a>
        <ul>
          <li><a href="http://www.winkyscoop.com/">Winky Scoop</a></li>
          <li><a href="http://www.1800succeed.com/">Hypmovation</a></li>
          <li><a href="http://www.1800succeed.org/">1800SUCCEED</a></li>
          <li><a href="http://www.zingerproducts.com">Zinger Store</a></li>
        </ul>
      </li>
      <li><a href="../about.html">About Us</a></li>
      <li><a href="../contact.html">Contact Us</a></li>
    </ul>
</div>

<div id="pageInfo">
    <div id="info_page">
      <p class="regionID">Region ID</p>
      <hr class="breaklinePageInfo" />
      <p class="breadcrum">> <a href="../index.htm">Breadcrum </a></p>
    </div>
    <div id="mainContent">
      <div id="content">
        <p>Main Content Goes her</p>
      </div>
    </div>
</div>


   <div id="buyNow2"><a href="../order_now.html"><img src="../buynowbutton.png" width="130" height="25" /></a></div>
   
<div id="footer">
<div id="footertext">
        <p class="footertextclass">Copyright © 2010 SwimmerBuddy.com. All rights reserved. SwimmerBuddy.com is part of <a href="http://www.zingerproducts.com" class="footertextclass">Zinger Products</a>. Designated Trademarks and brands are the property of their respective owners. This page was last modified Setember 28,2010. Swimmer Buddy - Pattent Pending 2010</p>
      </div>
    <div id="footerlinks">
        <p classs="footerlinkspacing"> <span class="footerlinkspacing"><a href="../Disclaimer.html">Disclaimer</a><a href="../terms.html"> Term of Service </a><a href="../contact.html">Contact Us</a></span>
</div>
      </div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("mainNavcontent", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
THIS IS THE MAIN.CSS
@charset "utf-8";
#networkicons {
height: 50px;
width: 200px;
margin-top: 160px;
margin-left: 15px;
position: absolute;
#wrapper {
width: 933px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
position: relative;
#mainNav {
text-align: center;
position: relative;
margin-right: auto;
margin-left: auto;
width: 934px;
padding-bottom: 15px;
clear: both;
overflow: visible;
#navwrapper {
width: 935px;
margin-right: auto;
margin-left: auto;
#mainContent {
width: 910px;
padding-left: 10px;
padding-right: 10px;
position: relative;
padding-bottom: 20px;
padding-top: 20px;
#content {
width: 910px;
position: relative;
#wrapper #footer #footerlinks p .footerlinkspacing a {
margin-right: 20px;
#footer {
width: 930px;
background-color: #fff;
position: relative;
margin-top: 5px;
text-align: center;
color: #000;
padding-bottom: 10px;
margin-bottom: 15px;
#header {
width: 930px;
height: 209px;
background-image: url(../_images/header.jpg);
background-repeat: no-repeat;
#buyNow1 {
height: 25px;
width: 140px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
background-repeat: no-repeat;
color: #666;
padding: 5px;
position: absolute;
top: 160px;
right: 150px;
.buyNow1 {
color: #666;
#wrapper #pageInfo #info_page .breadcrum {
color: #003;
#wrapper #pageInfo #info_page .breadcrum a {
color: #003;
html, body {
margin: 0px;
padding: 0px;
#buyNow2 {
height: 25px;
width: 130px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-align: center;
padding: 5px;
position: relative;
#wrapper #buyNow2 a img {
position: absolute;
top: -30px;
right: 50px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#pageInfo {
width: 930px;
background-image: url(../_images/pageinfobackground.jpg);
background-repeat: repeat-x;
background-color:#FFF;
text-align: left;
padding-bottom: 15px;
margin-top: 18px;
position: relative;
overflow: visible;
visibility: visible;
#wrapper #mainNav #mainNavcontent {
position: absolute;
left: 0px;
width: 930px;
.regionID {
font-size: 2em;
font-weight: bold;
color: #FFC;
margin-top: 1em;
margin-bottom: 0em;
text-align: left;
margin-left: 5px;
.breaklinePageInfo {
margin-top: 0.5em;
color: #FAFEAB;
.breadcrum {
color: #003;
font-size: 1.1em;
font-weight: bold;
text-decoration: underline;
margin-top: -0.2em;
margin-left: 15px;
#breadcrum {
font-weight: bold;
color: #003;
#footertext {
width: 910px;
font-size: 0.6em;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
#footerlinks {
width: 930px;
font-size: 0.7em;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
position: relative;
margin-top: 10px;
margin-bottom: 5px;
.footertextclass {
color: #000;
.footerlinkspacing {
margin-top: -0.5em;
color: black;
height: 10px;
font-style: normal;
line-height: normal;
font-variant: normal;
letter-spacing: normal;
p {
margin: 0px;
padding: 0px;
body {
text-align: center;
margin-top: 5px;
background-color: #073e78;
background-image: url(../_images/background.jpg);
background-repeat: repeat-x;
background-attachment: scroll;
font-size: 100%;
THIS IS THE dropdown menu.css
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0px;
padding: 0;
list-style-type: none;
font-size: 100%;
position: static;
text-align: center;
cursor: pointer;
width: 132.8px;
float: left;
overflow: visible;
visibility: visible;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 132.8px;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: #333;
color: #FFF;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #FFF;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
background-image: url(../_images/bar-top.png);
background-repeat: no-repeat;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
color: #003;
background-image: url(../_images/bar-Bottom.png);
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
color: #003;
background-image: url(../_images/bar-Bottom.png);
background-position: bottom;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../_images/bar-topsub.png);
background-repeat: no-repeat;
background-position: right top;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(../_images/bar-topsubhover.png);
background-repeat: no-repeat;
background-position: right bottom;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Thanks a lot for that tip. It does improve it by a whole lot.. i c what my mistake was.. however, something is still off
.. The Drop down menu is not behaving well...
As you may c by the picture, the drop down menu now moves to the right. and is not because of the object to its left, i've modified that. Zinger Products Drop Down Menu also does the same.

CSS not showing up in Browser

I am having trouble with my CSS code. I had to break it down
to the most simples form. I have created my page using internal CSS
which was working when I tested my page in my browser(s). When I
exported my CSS code to an external page. This is were it breaks
when it goes to a external page. Here is sample of my code very
basic:
Note: Just wondering if I need to set-up something my my OS,
My OS is MS 64x XP pro, hope someone could help me.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<link href="/css/styles.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div>
<div>Content for New Div Tag GSSoes Here</div>
</div>
</body>
</html>
CSS Code:
@charset "utf-8";
body {
background-image: url(../images/bgcontent2.jpg);
background-repeat: repeat-x;
background-color: #601800;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CC9900;
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
a:link {
text-decoration: none;
a:visited {
text-decoration: none;
color: #FF0000;
a:hover {
text-decoration: underline;
color: #0066FF;
a:active {
text-decoration: none;
color: #FF0000;
h1 {
font-size: 16px;
color: #0066FF;
h2 {
font-size: 18px;
color: #0099FF;

Seem to got it to work. Change CSS folder to asset export my
css internal code to a new external sheet and everything seems to
work. Strange.

CSS not displaying properly in DW8

I am new to working with CSS and trying to use more of it and
less tables as I move forward, at least until we are ready to do a
site redesign. On the page below the CSS is working to create the
two colomns in the browser but in DW8 after the first section "1.
Access:" , all the other sections are jumping all over the place.
My DW8 settings seem to be consistent with the advice given in
other responses to similar questions in the forum.
Page:
http://www.aclink.org/intergenerational/needs/admin/test.asp
Here is the CSS file: Not positive this works but thought I
would give it a shot before I posted all the CSS into the forum. I
realize some of this CSS file is pretty messy, it has gotten a way
from us somewhat but I am hoping to clean it all up with the site
redesign later this year.
http://www.aclink.org/WebAdmin/Library/home_menu.css

Osgood wrote:
> I'd classify that information as tabular data so I would
use a table to
> lay it out?
>
or if you really must do it with css use a definition list
(code and css
below)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style>
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
#wrapper {
width: 40em;
margin: 0 auto;
h3 {
margin: 0;
padding: 8px 0;
font-size: 15px;
dl {
margin: 0;
padding: 0;
width: 40em;
dt {
float: left;
width: 20em;
clear: both;
padding: 3px 0 0 0;
dd {
margin: 0 0 5px 12em;
text-align: center;
</style>
</head>
<body>
<div id="wrapper">
<h3>1. Access</h3>
<dl>
<dt><strong>Response</strong></dt>
<dd><strong>Average
Ranking</strong></dd>
<dt>Information and Assistance</dt>
<dd>1</dd>
<dt>Transportation</dt>
<dd>2</dd>
<dt>Outreach</dt>
<dd>3</dd>
<dt>Care Management</dt>
<dd>4</dd>
</dl>
<h3>2. Home Support</h3>
<dl>
<dt><strong>Response</strong></dt>
<dd><strong>Average
Ranking</strong></dd>
<dt>Telephone Reassurance</dt>
<dd>1</dd>
<dt>Home Health Aide</dt>
<dd>2</dd>
<dt>Respite Care</dt>
<dd>3</dd>
<dt>Visiting Nurse</dt>
<dd>5</dd>
<dt>Affordable Housing</dt>
<dd>4</dd>
<dt>Homemaker</dt>
<dd>1</dd>
<dt>Hospice Care</dt>
<dd>2</dd>
<dt>Fix-it Program</dt>
<dd>3</dd>
</dl>
</div>
</body>
</html>

CSS not working in ColdFusion 8

We just upgraded from ColdFusion MX7 to ColdFusion 8 and all of our CSS that worked in MX7 suddenly do not work in 8. Does anyone have any ideas as to what might be happening?
Thanks!

Yep - the browsers view source shows all the CSS code as it should. Here is what we're doing:
CSS call in the head:
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
CSS reference in the code:
<table width="95%" border="0" cellpadding="2" bordercolor="navy" align="center" class="table_content">
CSS code in styles.css:
@media screen {
body {font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: black;}
.field_label {font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #990000;}
.header:link    {font-family: Verdana,Arial,Helvetica,sans-serif; color: #FFFFFF; text-decoration:none}
.header:visited {font-family: Verdana,Arial,Helvetica,sans-serif; color: #FFFFFF; text-decoration:none}
.header:hover   {font-family: Verdana,Arial,Helvetica,sans-serif; color: #0000FF; text-decoration:none}
.header:active {}
.headerblack:link    {font-size: 12px; font-family: ArialNarrow,Helvetica,sans-serif; color: #000000; text-decoration:none}
.headerblack:visited {font-size: 12px; font-family: ArialNarrow,Helvetica,sans-serif; color: #000000; text-decoration:none}
.headerblack:hover   {font-size: 12px; font-family: ArialNarrow,Helvetica,sans-serif; color: #0000FF; text-decoration:none}
.headerblack:active {}
li      {font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: black;}
.navigation {font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
     font-weight: bold;
     text-align: center;}
p       {font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: black;}
.style2 {font-family: Arial, Helvetica, sans-serif;
   font-size: xx-small;
   color: black;}
.table_content {font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: black;}
.textbox   {font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     color: black;}
@media print {
body {font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: black;}
li      {font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: black;}
.navigation {display: none;}
.noprint {display: none;}
p       {font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: black;}
.style2 {font-family: Arial, Helvetica, sans-serif;
   font-size: xx-small;
   color: black;}
.table_content {font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     color: black;}
.textbox   {font-family: Arial, Helvetica, sans-serif;
     font-size: 13px;
     color: black;}
It all seems pretty basic to me and it worked fine in MX7?

KM Document iView - index.html and main.css not properly displayed

Hello,
as a test we have put two files in the /documents repository in KM :
a) index.html
<head>
<link rel="stylesheet" type="text/css" href="./main.css"/>
</head>
<table width="92%" bgcolor="#FFFFFF">
<tr align="left" valign="top">
    <td> </td>
    <td colspan="5"><table width="100%" border="0" cellpadding="5" cellspacing="0">
        <tr valign="middle">
          <td width="85" bgcolor="#C7D9E9"> <p><b>Top Links</b></p></td>
          <td width="125" class="document-list"><a href="impax.html">IMPAX Client
            </a> </td>
          <td width="125" class="document-list"><a href="talkstation.html">TalkStation</a></td>
          <td width="125" class="document-list"><a href="ris.html">RIS</a></td>
          <td width="125" class="document-list"><a href="connectivity.html">Connectivity
            Manager</a></td>
          <td width="125" class="document-list"><a href="impax.html">IMPAX Server</a></td>
        </tr>
      </table></td>
</tr>
</table>
b) main.css
A:visited
    color: #264560
A:active
    color: #12212E
A:hover
    color: #14623D
A
    color: #336699
table
    margin-top: 0px;
    margin-bottom: 0px;
p
    color:#000000;
     font-family: Arial, Helvetica, sans-serif;
     margin-bottom: 0px;
    margin-top: 5px;
     font-size: 12px;
.document-list
    background-color:#C7D9E9;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-color: #000000
    margin-bottom:3px;
When going to Content Administration -> KM Content -> Documents and clicking the index.html file, the css file is taken into account, when i.e hovering over the IMPAX hyperlink, the path is http://<host>:<port>/irj/go/km/docs/documents/impax.html and the impax.html page is displayed when clicked.
However, when creating a KM Document iView (with or without content filter) pointing to /documents/index.html and displaying the iView, the style sheet is ignored, and the same hyperlink as above now refers to http://<host>:<port>/irj/servlet/prt/portal/prtroot/impax.html, which is incorrect.
-> How can this behaviour be explained?
-> When creating an URL iView pointing to /irj/go/km/docs/Agfa_Knowledgebase/index.html , everything works as expected.
Thanks for the help -

Hi,
You should correct the path to your css file in your index.html:
href="/irj/go/km/docs/documents/main.css"
Regards,
Praveen Gudapati

"sans-serif" font assignment in CSS not happy in Safari

Similar Messages

Maybe you are looking for