Solved

Font looks rough/jagged in Internet Explorer

Posted on 2009-07-01
9
1,341 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:renazonse
renazonse 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Apply tab index in forms 6 33
Alignment is not working correctly. 8 32
javascript date picker in php while loop 5 27
how can i count words? 2 18
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

920 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now