Solved

Font looks rough/jagged in Internet Explorer

Posted on 2009-07-01
9
1,347 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 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
allow link tag to be submit like form 15 60
Loading Self-Hosted Fonts 12 43
close window in firefox 3 37
Doubt with angularJs with PHP 3 7
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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 style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

737 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