Font Smoothing + Relative Positioning = Problem

Hello,
I ran across a strange inconsistency while designing a relative position based layout.
My page has two divs, both relative positioned for height. They do not overlap. The page renders excellent in Firefox 3.5, and not bad in Chrome (though a little different from FF). Safari however pushes my second div down too far.
I found that by disabling font smoothing (or rather switching it to anything besides "windows standard") fixes this issue. However there isn't even any actual text on the site, at all. There's 4 images, a couple input fields and a submit button.
I can post some of the code, or example screenshots of what's happening. I've tried a couple css hacks to target safari (without targeting chrome) with no success. Anybody have any advice?
Thanks,
Tom

Please disreard...
I got it figured out. I just moved the paragraph tag outside
of the table
and changed the position from bottom:50% to top:50%
once the <p> was moved out of the table, it's normal
position would be at
the very top. So, I moved it 50% down from the top using
relative
positioning. Being inside the table caused it to not work in
Gecko? I
wonder why?
"-D-" <[email protected]> wrote in message
news:f7fr0d$jb8$[email protected]..
> I'm using relative positioning for an <p> tag that
is positioned normally
> at the bottom of a table cell "valign="bottom".
>
> I set the paragraph tag to <p
>
style="position:relative;bottom:50%;text-align:center;line-height:1.6em;">
>
> so, the text will position itself 50% from the bottom
positioning. This
> works fine in IE, but Mozilla and Netscape still
position the text at the
> bottom of the table cell.
>
> Here is the test page to see what is happening:
>
http://www.dwayneepps.com/contact.aspx
>
> fill out the form and click send to see the problem.
>
> Thanks for any help.
>

Similar Messages

Problems with relative positioning divs

Hi all,
I'm still new to this css layouts thing, but am stumped by this problem. I have numerous parent divs with multiple child divs within them on my page design, and for some reason these child divs are not taking up the correct spacing that I enter in the CSS. They are all relative positioned, mostly using floats and clears (and I don't think I've missed any of those). Help! Hoping that it's something simple I've missed.
To pinpoint one example of this recurring problem, the #sidenav_one div will float: left with a spacing of top 8px and left 8px, but then #sidenav_two refuses to float: left, clear: both with a spacing of top 8px (I've had to put in 16px to actually get 8px, in both Firefox, Safari and Opera). (relevant parts of code highlighted).
I am happy to change how I've structured the page, if people think there is a better or cleaner way to do it. Thanks in advance.
A
<!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>United Future Foundation</title>
<style type="text/css">

</style>
<script type="text/JavaScript" src="curvycorners.js"></script>
<script type="text/JavaScript">
window.onload = function() {
    var settings = {
      tl: { radius: 5 },
      tr: { radius: 5 },
      bl: { radius: 5 },
      br: { radius: 5 },
      antiAlias: true
    var divObj = document.getElementById(".rounded");
    curvyCorners(settings, divObj);
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/news_down.jpg','images/about_down.jpg','images/what_up.j pg','images/who_down.jpg','images/support_down.jpg','images/contact_down.jpg')">
<div class="rounded" id="container">
<div class="rounded" id="banner">
<div id="banner_left"><img src="banner_uff.jpg" width="450" height="70" /></div>
<div id="banner_right"><img src="ufflogo.jpg" width="208" height="200" /></div>
<div id="banner_name"><img src="banner_name.gif" width="509" height="133" /></div>
</div>
<div id="spot">you are here</div>
<div class="rounded" id="content">
<div id="text">
<h2> Breaking the Cycle - United Future Foundation</h2>
<p>United Future Foundation is an Australian non-government organisation operating in Uganda. UFF is “breaking the cycle” through education. We believe that education is the primary means of creating lasting change, increasing literacy and improving employment. UFF is building a combined primary school and vocational training centre for over 300 students in the Kasanje region of Uganda. </p>
<p>United Future Foundation is focussed on facilitating access to education and skills training for disadvantaged youth in poverty stricken and remote areas of Uganda. We strongly believe that education is the first and foremost method to break the cycle of illiteracy, ill health and lack of opportunities. </p>
</div>
<div class="rounded" id="sidenav_one">
    <h1>News</h1>
</div>
<div class="rounded" id="sidenav_two">
<h1>Press Releases</h1>
</div>
<div class="rounded" id="sidenav_three">
    <h1>Media</h1>
</div>
<div id="home_home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/news_down.jpg',1)"><img src="images/news_up.jpg" name="home" width="250" height="188" border="0" id="home" /></a></div>
<div id="home_about"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about_down.jpg',1)"><img src="images/about_up.jpg" name="about" width="250" height="188" border="0" id="about" /></a></div>
<div id="home_events"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/what_up.jpg',1)"><img src="images/what_down.jpg" name="events" width="250" height="188" border="0" id="events" /></a> </div>
</div>
</div>
</body>
</html>

This is much simpler than you would think. You're making it hard work for yourself because you believe css is much more comlex than it really is or need be.
You rarely need to use relative positioning at all. You are using too many <divs> and redundant css attributes to reach your goals.
Think of the web as a simple structure of boxes and ino those boxes you place html tags or 'when' needed other <divs> ('when' is the choice word here. In time you will know when and when not to)
Copy the css and page code below and paste into a new Dreamweaver document. See how much leaner and cleaner the css and html code is.
<!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>
<style type="text/css">
body {
font-family: "Myriad Pro", "Helvetica Neue", sans-serif;
p {
font-family: "Myriad Pro", "Helvetica Neue", sans-serif;
font-size: 14px;
color: #000;
.rounded {
-moz-border-radius:5px;
-webkit-border-radius:5px;
#spot {
text-align: right;
#container {
margin: 0 auto; /* horizontally centers container which has a width */
margin-top: 15px;
width: 972px;
background-color: #999;
padding-bottom: 25px;
overflow: hidden; /* a method to clear floated containers within a parent container */
#banner {
width: 872px;
height:210px;
background-color: #FFF;
margin: 0 auto; /* horizontally centers container which has a width */
margin-top: 15px;
color: #999;
#banner_left {
width:509px;
float: left;
margin-left: 5px;
margin-top: 5px;
#banner_right {
width:208px;
height:200px;
float: right;
margin-right: 5px;
margin-top: 5px;
#banner_name {
position:relative;
width:550px;
height:140px;
clear: both;
margin-left: 5px;
#content {
margin: 0 auto; /* horizontally centers container which has a width */
width:872px;
background-color: #FFF;
margin-top: 20px;
overflow: hidden; /* a method to clear floated containers within a parent container */
#sidenav {
margin-left:8px;
margin-top:8px;
width:136px;
float: left;
h1 {
font-size: 16px;
color: #000;
text-align: center;
background-color: #999;
padding: 10px 0 10px 0; /* short hand for top/right/bottom/left */
margin: 0 0 6px 0; /* short hand for top/right/bottom/left */
#text {
margin: 8px 0 0 18px; /* short hand for top/right/bottom/left */
width:700px;
background-color: #FFF;
float: left;
#home_home {
width:750px;
height:188px;
clear: both;
margin: 10px 0 0 31px; /* short hand for top/right/bottom/left */
#home_home img {
float: left;
</style>
</head>
<body>
<div class="rounded" id="container">
<div id="spot">you are here</div>
<div class="rounded" id="banner">
<div id="banner_left"><img src="banner_uff.jpg" width="450" height="70" /><img src="banner_name.gif" width="509" height="133" /></div>
<div id="banner_right"><img src="ufflogo.jpg" width="208" height="200" /></div>
</div>
<div class="rounded" id="content">
<div class="rounded" id="sidenav">
    <h1>News</h1>
    <h1>Press Releases</h1>
    <h1>Media</h1>
</div>
<div id="text">
<h2> Breaking the Cycle - United Future Foundation</h2>
<p>United Future Foundation is an Australian non-government organisation operating in Uganda. UFF is “breaking the cycle” through education. We believe that education is the primary means of creating lasting change, increasing literacy and improving employment. UFF is building a combined primary school and vocational training centre for over 300 students in the Kasanje region of Uganda. </p>
<p>United Future Foundation is focussed on facilitating access to education and skills training for disadvantaged youth in poverty stricken and remote areas of Uganda. We strongly believe that education is the first and foremost method to break the cycle of illiteracy, ill health and lack of opportunities. </p>
</div>
</div>
<div id="home_home"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/news_down.jpg',1)"><img src="images/news_up.jpg" name="home" width="250" height="188" border="0" id="home" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about_down.jpg',1)"><img src="images/about_up.jpg" name="about" width="250" height="188" border="0" id="about" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/what_up.jpg',1)"><img src="images/what_down.jpg" name="events" width="250" height="188" border="0" id="events" /></a>
</div>
</div>
</body>
</html>

Spry Menu Bar Positioning Problem in IE

I have a Dreamweaver-created Spry Menu Bar drop down menu which works perfectly in every browser on my Mac and on my PC . . . EXCEPT Internet Explorer (who woulda thunk it?!!)
In all browsers except for IE, the 3 submenu items under "Door Systems" and "Gallery" appear exactly as they should in a vertical row, positioned just below the brown line below the navigation links and all the same width. But in IE they appear higher up and with different widths. IE is ignoring the rules for width and position.
<ul id="MenuBar2" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="closet_doors_gallery.html">DOOR SYSTEMS</a>
      <ul>
        <li><a href="sliding_doors_nyc_nj.html">DOOR PROFILES</a></li>
        <li><a href="bifold_doors_nyc_nj.html">PANELS COLORS</a></li>
        <li><a href="room_dividers_nyc_nj.html">DOOR SYSTEM TYPES</a></li>
      </ul>
    </li>
</ul>
<ul id="MenuBar3" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">GALLERY </a>
      <ul>
        <li><a href="#">SLIDING DOORS</a></li>
        <li><a href="#">BI-FOLD DOORS</a></li>
        <li><a href="#">ROOM DIVIDERS</a></li>
      </ul>
    </li>
</ul>
Here is the page where you can see the problem if you view it with IE, and see that it's fine in Safari, and Firefox,    Chrome and Opera, Mac or PC:
http://2113web.com/indeco/index.html
I have a feeling it's a simple fix of the css, but I can't figure it out - I would really appreciate anyone's help with it - thank you!
Below is the 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%;
    font-weight:bold;
    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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
    white-space: nowrap;
/* 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: auto;
    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;
    top: 63px; /*THIS POSITIONS THE SUBMENU BELOW THE TOP MENU*/
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    float: none;
    background-color:#f5f5e8;
    height:25px; /*THIS POSITIONS THE SUBMENUS HEIGHT*/
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
    position: absolute;
    margin-top: -5%;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 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:none;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: transparent;
    padding: 0.5em 0.75em;
    color: #59330d;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: transparent;
    color: #afa06f;
/* 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
    background-color: transparent;
    color: #afa06f;
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(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
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(SpryMenuBarDownHover.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 ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.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;
Perry

Hi and thank you very much. It was a little confusing as to whether you meant to add the rules you suggested or to replace them, or a combination of both, but I puzzled it out. I created a new MenuBarHorizontal.css file in a blank page and then made the changes you suggested and it works! Yay! I had to do a bit of tweaking to get it to look just the way I wanted, but it now works correctly in ie 7 and 8 and still works fine in everything else.
Interestingly enough, I had to change the margin-top: 63px; rule in "ul.MenuBarHorizontal ul.MenuBarSubmenuVisible" to 40px to get it positioned properly vertically, and I had to get rid of the "border-bottom: solid 1px #EEE;" in "ul.MenuBarHorizontal ul li", which caused the submenu items to have quite a lot of vertical space between them - I'm not sure why!
I also had to get rid of all the syling rules in the "SUBMENU INDICATION: styles if there is a submenu under a given menu item" section, as well as the one you added: "ul.MenuBarHorizontal a.MenuBarItemSubmenu {
    padding: 0.5em 2em 0.5em 0.75em;"
With that done, it works great in both ie7 and ie8, so thank you for the help. Below is the new css that works, in total.
Not being as familiar with the subtleties of CSS as you and many others obviously are, I'm REALLY curious as to exactly what is different that causes this to work now, and would be happy to hear your expanation, if you feel like taking the time to explain. If not, no problem - it works and that is the most important thing! So, thank you again -
Perry
@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: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: left;
    cursor: pointer;
    width: auto;
    float: left;
/* 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: auto;
    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;
    margin-top: 40px;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
    display: block;
    float: none !important;
    width: auto;
    white-space: nowrap;
/* 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: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #f5f5e8;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
      background-color: #f5f5e8;
    color: #afa06f;
/* 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
      background-color: #f5f5e8;
    color: #afa06f;
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
/* 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
/* 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
/* 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
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);
    background: transparent;
/* 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;

Font smoothing issue between built-in display and external

Ok, this one is a bit tricky to explain, but here we go. I have a Macbook 2.2 C2D and a 24" FHD2400 Gateway LCD which I connect using the mini-DVI port. My problem is that any applications I start with the external display plugged in have slightly "thinner" text (on both displays), like the font smoothing is different. But, applications that were already running look smoother and thicker on both displays. Further, even after disconnecting the external display, the thinner text persists until I restart the application.
As a real example, I was running Safari with just the main LCD. I plugged in the external, and it looked fine. I restarted Safari (now with the external plugged in) and the text appears thinner. Unplugging the external, the text still appears thinner on the main LCD until I restart it again.
Here is a photo, where the left side is the thinner text, and the right is the normal, thicker text:
Any insight/advice on this would be much appreciated.
* Note: I run the main LCD in native resolution (1280x800) and the 24" in native (1920x1200)
Message was edited by: Chris Scharf (added screen resolution information)

Under System Preferences, Appearance, try setting "Font smoothing style: to "Medium - best for Flat Panel" and see if that helps.

Font in GTK2 apps are not using font smoothing in cinnamon. GTK3 does.

Hi,
My GTK2 apps like GIMP, chromium fonts are not really using font smoothing but GTK3 apps look fine.
Any help is appreciated.

Chazza wrote:Does the following application help at all? Link: http://qt-apps.org/content/show.php/Qt5 … ent=168066
Yes, unfortunately this did not fix the problem. I did put the environmental variable in .profile and relogged, the result was unfortunately the same. I've managed to fix fonts in Clementine using qtconfig-qt4 after some fiddling, but applications like Docky and Chromium still have the monospace font.
cedeel wrote:Eh, Chromium isn't a Qt application.
Ah, my bad. Do you know of a way to fix that problem anyway?

Font smoothing in Forms 10g

Hello,
Compared to the application running under 6i, the same application running under 10g shows fonts with jagged edges. From what I have found on the forum, this seems to be because of the JAVA fonts mapping in the applet.
Is there any way to introduce some smoothing or something similar to ANTIALIASING in JAVA.
I have tried clientDPI in basejini.htm but this does not help.
Thanks.

Hello,
Thanks but I already checked the papers related to Forms 10g (new functionalities etc...). I am just trying to see whether there are any parameters to use in formsweb.cfg, registry.dat that might help with the font smoothing.
Thanks

Font Smoothing GONE--Help!!!

I'm running 10.6.2, and I pretty much have ZERO font smoothing whenever I ctrl-mouse zoom on any menu, any text, any program. This is on my MacBook Pro (2 years old) that had perfect font smoothing in Leopard.
I've turned off the CRT checkbox in System Preferences—doesn't help
I've used Terminal to run defaults -currentHost write -globalDomain AppleFontSmoothing -int 1 and also tried 2 and 3 and even reverting to defaults—doesn't help
I've used Font Book to validate fonts and remove duplicates (especially after Office 2004 install)—doesn't help
I've also rebooted after all these operations—still almost zilch smoothing on zoom
Even Finder looks AWFUL
Help! My MBP looks like crap now!

That sounds good. A lot of tests to run! Hate to do the new user test, but will if I have to.
I am really leaning toward the Option-Command-"\" having (unintentionally) turned OFF Screen Zoom (under mouse or trackpad) Image Smoothing.
How could it take me so long to learn that there is Font Smoothing, and there is Image Smoothing. TWO DIFFERENT THINGS.
The Chain of Blame here is so convoluted it hurts my brain.
1. Evernote was trying to reinstall web clipping and/or its Safari plug-in ever since I converted to Snow Leopard. (Massive evidence of this in Console error messages, and they are hilarious: "Can't get Elephant!" and "Can't install icon!" over and over and over again. Just give it up, Evernote!)
2. So one day Evernote's interference with Safari messes up my executing the Option-Command-"\" command to log into my bank (it's normally a 1Password keyboard shortcut that works great in Safari).
3. Option-Command-"\" reverts back to its "normal" designation (turn on/off Screen Zoom (under mouse or trackpad) Image Smoothing).
4. I hit Option-Command-"\" repeatedly, trying to get the 1Password HUD to pop up in Safari. It doesn't.
5. By hitting Option-Command-"\" so many times, I unintentionally turn off Screen Zoom Image Smoothing. Only I don't realize it.
If this theory IS correct, then it's a simple fix!
The lesson learned would be:
System Preferences, Personal, Appearance, Font Smoothing
is a DIFFERENT preference from
System Preferences, Mouse/Trackpad, (Two Fingers), Screen Zoom, Options, Smooth Images
Of course, I'll report back just as soon as my SuperDuper backup finishes and I can try this test.
And if this IS the problem, well, I blame it on the elephant.

Font Smoothing makes everything blurry

I just tried Safari 3.1 beta for Windows Vista for the first time and found ALL levels of font smoothing to make my fonts blurry making it unusable. I use a 17" laptop lcd monitor and the "CRT" setting is the least blurry. Any way to turn this off completely?

They didn't fix the font problem?
HAHAHA. I posted about this, and submitted bug reports and they still didn't fix it?
Uh... why does version 3.01 not have this problem?
Wow. It boggles the mind. I'm not going to install 3.1 if the fonts look fine in 3.01.
I'm very unhappy with this development. What a joke.

Font smoothing issues

Hi all. I noticed some others were complaining about font smoothing not seeming to work in Carbon applications (e.g. Camino, Firefox, MS Word and even iTunes). It seems the subpixel font-aliasing system preference (e.g. light) is ignored and, instead, the ugly CRT font smoothing is used.
I am puzzled this has not received a lot of attention, since it immediately bothered me when I received my Macbook Pro today.
Is everyone experiencing this font smoothing problem? I used the Migration Assistant to copy all files from my previous (Tiger-installed) Powerbook. Does anyone not having used the Migration Assistant also suffer from the font smoothing issue?
For more info, see http://discussions.apple.com/thread.jspa?messageID=1829478&#1829478
Macbook Pro Mac OS X (10.4.6)

TinkerTool didn't make any difference for me. I played around with it and found that there was no improvements using it or disabling font smoothing.
I have watched DVD's on this LCD being played with my MacBook. I have seen 2MB+ full screen digital pictures. Both the DVD and digital pics look absolutely amazing on it.
It's only the fonts that appear blurry or in some areas they appear to have a shadown to the right. This happens with any text that appears in every app.
Keep in mind too, Windows Vista looks perfect on this display, but my prized MacBook looks really sub-par.
I'm not quite following you on changing the display preferences to change to pixel size to that of the MacBook...

Font Smoothing CE 6.0 Thin Clients

We need to handle Font Smoothing on HP Thin Clients. This is supported on newer Thin Clients with RDP7 and Font Smoothing settings.
Older Win CE 6.0 do not appear to support Font Smoothing.
Is there a way to set up Font Smoothothing or can these thin clients be updated with RDP option to support Font Smoothing?
Thanks Lex

I too had the same problem just last night. It happened when I was changing the font and font size. It seemed that everytime I switched the font and font size, the text got more and more pixelated and less smooth (identical to the screenshot you just posted).
I backed up my Torch, did a security wipe and then restored the backup file back onto the device. That didn't work, as the text still looked horrible.
So what I did next was do a device switch from my Torch back onto my Bold 9000, security wiped the Torch then did a device switch from the Bold 9000 back onto the Torch and the text was back to normal! It was a long process but it seemed to do the trick. So if you have another BlackBerry sitting around it might be worth trying, just remember to back up your Torch before hand.
My Torch is also running v6.0.0.246, Platform 6.4.0.105 through Rogers. Hope this helps you out.
Good Luck!
Ed

Font Smoothing, FileMaker Pro 8 and my new MBP 17

I have a Filemaker database I designed with white text on dark blue background and other dark colors. When OS X first introduced font smoothing the white was no longer solid but kind of disappeared into the background. The white color was uneven. Playing with Tinker Tool (I think) brought it back.
On my previous laptop 17" the white text was always solid and clear and I never messed with Tinker Tool. Maybe it was an OS X update but I didn't have the problem ever on that machine.
Today I got a new MBP 17". There it is again, kind of fuzzy and hard to read. White on black is fine of course. But once again my white text is hard to read. Can anyone explain this or help me get back to the clarity I had? The title line is 18 pt. so it is not a matter of shutting off font smoothing which only allows up to 12. And actually, that changes the black on white without affecting the white on blue. Thank you someone..

Actually, you can see something of what I'm talking about in iTunes. If you move the highlight line down over song names the masking or lightening of text inside the blue highlight color is different than before. Is there a setting I am missing? I have it set for "Best for LCD" which is what I had previously.
Perhaps the video card is doing things differently? Anyone noticing this?

Is there a way to disable tab font smoothing (maybe with userchrome.css)?

hello everyone I've just switched from chrome to ff and I'm very satisfied. Just one problem, is there a way to disable tab font smoothing (maybe with userchrome.css)? I've changed the colour of tab font (with userchrome.css) to white to improve readability but with white text is too bold. thanks !!

hey thanks for the quick reply. here's a screenshot
http://www.mediafire.com/view/?c2a2l69ci5zbq#bt6qrwr6ku8m5n6
i think we just have to add some antialiasing in the userchrome.css? but i don't know the code.
here's my modified userchrome.css
/* Inactive Tab */
tab:not([selected="true"]) {
color:white !important;}
/* Tab while loading */
tab[busy] {
color: blue !important;}
tab .tab-text {
font-size: 12px !important;
/* tab font */
tab .tab-text {
font-family:Verdana !important;
i read somewhere else the problem is more evident with white text on dark background
thanks

Help with font smoothing / rendering

Hi,
I recently upgraded from Leopard (10.5.8) to Snow Leopard (10.6), updated it to 10.6.4 yesterday. Font smoothing or rendering turned bad ever since the SL upgrade. I did these two things so far:
1. Resolved all the duplicate fonts in Font Book (there were many).
2. defaults -currentHost write -globalDomain AppleFontSmoothing -int 2
Rebooted the machine. I still feel the fonts are looking ugly. Here are the screenshots:
http://img249.imageshack.us/img249/2998/screenshot20100617at115.png
http://img686.imageshack.us/img686/2294/screenshot20100617at120.png
Please help. I can't afford to do clean installation of SL now at this point

Hi,
I have exactly the same problem. Validated all my fonts cleaned out font cache but unfortunately nothing helped.
What else can it be?
Could you tell me what exactly you did?

Do I understand AP Divs & relative positioning?

Hello.
So to cut a long story short....
I am newbie & plunged into creating my first website using all AP elements, only to find out that this is not a good way because of the nature of the AP's.
After much help from this forum (PZ in particular) I decided to do my research a little bit more.
I still have to create another website that I guess should really be built in flash (as suggested by someone). But as I dont know Flash this is not an option. (please see attached design concept).
The only elements I really need at this point would be for the "get a quote" & "about", "contact" bubbles to have rollover states that change colour when the mouse goes over them.
I have been trying to find the best way of doing this without AP elements.
1) Create a Div container with the main image for the background, then insert a table and try to insert the rollover images that way. But after research, I am finding that I should be steering away from tables and moving towards CSS. Which then led me to Idea no 2.
2) Create a Div container with the main image for the background, then insert Div's and adjust the margins (relative positioning?) to move to the Divs in correct places I need the rollovers. But again I read that this method should only be done for tweaking a web page and not structuring a webpage as may cause problems.
3) Create a Div container with the main image for the background, then insert Div's in a grid like system (see attached image of my guides where I would place Div's), But this seems a over complicated way to do it and you end up with divs that have no use & lots of unwanted code.
OR am I right in thinking this works?
4) Apply a relative positioned Div, set background image, then place AP div's inside RP Div that I would use for my rollovers? If I did this would this then avoid the problem of the AP divs moving in different browsers?
Or have I got this all completely wrong and have to go back to the drawing board again?
Your thoughts would be appreciated :-)
Many thanks in advance
Louisa

Build your HTML content logically from top of page to bottom of page. Use default CSS positioning (which is no positioning at all) for the majority of your page layout.
Use AP Divs only when absolutely necessary because doing so removes them from normal content flow.
To control APDivs in relation to other content on the page, you many need to wrap them inside a relatively positioned container.
Example of APDivs inside a Relatively positioned container:
http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml
As far as your design concept goes, you could do this a number of ways. With CSS sprites or an Image Map, for example.
http://alt-web.com/DEMOS/CSS-Sprites.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Bold fonts on certain websites - font smoothing woes

Hi,
I purchased a 13" MacBook Pro last week and I'm having a bit of an issue regarding font smoothing/font rendering on certain websites. I'll do my best to try and explain...
When loading certain websites (mainly vBulletin-based forums, but this happens on quite a few other sites too) the text looks bold and ugly, the same sites look fine on my friends 15" MacBook Pro and 24" iMac - as an example, his looks like the sample on the left and mine looks like the sample on the right:
http://i47.tinypic.com/e7b8ro.jpg (not my screenshot, but my issue is exactly the same)
I've done some searching and other people have fixed this problem using the following command:
defaults -currentHost write -globalDomain AppleFontSmoothing -int 3
This basically changes the hidden font smoothing settings which were removed in 10.6, in 10.5 you had the following options to choose from:
Automatic - Best for Main Display
Standard - Best for CRT (1)
Light (2)
Medium - Best for Flat Panel (3)
Strong (4)
If I set the command above to 1, 2 or 3 my fonts don't change at all and still look bold and horrible. If I set the command to "4" (Strong), do the usual log out and back in, then I get the correct looking fonts on the websites I had issues with BUT my system fonts and other websites now have a very soft, almost out of focus font, probably due to this being the Strong smoothing setting. Likewise if I set the command to "0" (turning font smoothing off) I get the correct looking fonts on the problematic websites but again system fonts look odd, not nice and smooth (due to font smoothing being turned off)
Does anyone have a suggestion as to what I can try next please? Could this be down to the resolution/DPI of the 13" MBP's screen?
Thanks,
Verta

Hey! I had exactly the same issue as you! Do you have an addon called WebSecurityKeeper installed into your Firefox, without your permission? Check your Addons list pls. I had this addon and when I uninstalled it, my fonts in Firefox returned to normal.
Its possibly a malicious addon. But I am not sure. I have no idea how it got installed my computer.

Font Smoothing + Relative Positioning = Problem

Similar Messages

Maybe you are looking for