Solved

Font looks rough/jagged in Internet Explorer

Posted on 2009-07-01
9
1,344 Views
Last Modified: 2012-05-07
Please take a look at the header section of this page: www.mwebdev.com/at.html. Look at the large text in the middle. Wait for the text to change (it's a slideshow). When the text changes, the font becomes very ugly and jagged in IE 6 and 7. It looks fine in FireFox.

Is this a CSS problem? I've bumped my head for hours trying to figure this out. Please help!

Thanks in advance.
0
Comment
Question by:isaacr25
  • 4
  • 4
9 Comments
 
LVL 8

Accepted Solution

by:
lharrispv earned 400 total points
ID: 24754060
try giving the font a background color.  If needed you can also set the opacity so it does not show up.  For some reason IE does not play nice with fade effects and transparent background.
0
 
LVL 30

Assisted Solution

by:Britt Thompson
Britt Thompson earned 100 total points
ID: 24754123
Internet Explorer renders fonts differently from Firefox... the text always appears more jagged but it may be extra jagged if you have this setting disabled in Internet Explorer

In IE >> Tools >> Internet Options >> Advanced tab >> find the "Multimedia" section >> check "Always use ClearType for HTML"
0
 

Author Comment

by:isaacr25
ID: 24754182
lharrispv,
If I add the following code, then my entire paragraph disappears. How do I make only the background color tranparent (and not the text)?
background-color: #cccccc;
filter: alpha(opacity=0);

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 8

Assisted Solution

by:lharrispv
lharrispv earned 400 total points
ID: 24754276
give the opacity a higher number like 80 or 90 and give it a go again.... or check this post out

http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html
0
 

Author Comment

by:isaacr25
ID: 24754322
I need the background color to not show at all. This really messes up the design.
0
 
LVL 8

Assisted Solution

by:lharrispv
lharrispv earned 400 total points
ID: 24754485
what if you make a gif, png or jpg that matches the bg you have on there and set that as the bg to the div?
0
 

Author Comment

by:isaacr25
ID: 24754563
The size of the div is dynamic. It changes as the slideshow changes content. I assume this would mess things up with a background image, correct?
0
 
LVL 8

Assisted Solution

by:lharrispv
lharrispv earned 400 total points
ID: 24754703
no make the image small like you would for the bg of say a body tag.. maybe 5 or px wide by however high the div is (that appears to be static).  Then set the background-repeat: repeat-x; (I think that is the horizantal one.. not enough coffee yet this AM)...
reember the width of the image would have to be as small as possible but wide enough that it could accomplish your pattern
0
 

Author Comment

by:isaacr25
ID: 24755491
If I use this background image approach, I would like to image to blend in to the existing background. So could I take a slice of the current header background and match it that way?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question