?
Solved

Font looks rough/jagged in Internet Explorer

Posted on 2009-07-01
9
Medium Priority
?
1,360 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 8

Accepted Solution

by:
lharrispv earned 1600 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 400 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 8

Assisted Solution

by:lharrispv
lharrispv earned 1600 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 1600 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 1600 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

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

770 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