Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Headline titles are displayed different in IE than other browsers (http://forum.bytesforall.com/showthread.php?t=4958)

Jozefs Dec 21, 2009 09:21 AM

[SOLVED] Headline titles are displayed different in IE than other browsers
 
Hi, I have the following problem. I use

font-family: calibri, "gill sans mt", verdana, tahoma, arial, sans-serif;
color: #004A96;
line-height: 0.9em;
text-decoration: none;
text-transform: none;
font-weight: normal;

for my titles (color: #990033; for hover color). I also use the plugin wp-subtitle to display a productname above the title. This is styled like this:

.subtitle {
font-family: calibri, "gill sans mt", verdana, tahoma, arial, sans-serif;
color: #000000;
font-variant: small-caps;
font-size: 1.2em;
}

The problem is that it all shows well in Firefox, Safari etc. but not in IE7/8. IE shows the titles as Arial, in black and for hove in a kind of green. Also there's a big white gap between the kicker/subtitle and the title. I cannot find the cause. Any ideas? Thanks.

juggledad Dec 21, 2009 07:15 PM

What you are probably running into is using a font that IE doesn't support. Do a google search on websafe fonts.

This is one of the issues with fonts and browsers. Even if all the browsers support the font, if I don't have it installed on my computer, then it won't be displayed.

This is why you specify multiple fonts in the 'font-family:' rule

Jozefs Dec 22, 2009 01:10 AM

Thanks, but that is not the issue. Calibri is Microsoft's own font, installed on all Windows computers since at least 2003. The font is available on my machine and as I said it is displayed correctly in other browsers on the same machine but not in IE. Furthermore, if you look at the difference in eg Firefox and IE you'll see that in IE the titles are in small caps just as the subtitle is. Subtitle has font-variant: small-caps but the title doesn't have this. But somehow under IE this element is inherited from the subtitle. But it shouldn't be.

Jozefs Dec 22, 2009 03:33 AM

As always, posing a question makes you think harder about the problem... which is now solved... as I made a typo: not closing a div element with > / Firefox and Safari ignored this, IE did not.

PHP Code:

<?php the_subtitle('<div class="subtitle">','</div'); ?>

should have been

PHP Code:

<?php the_subtitle('<div class="subtitle">','</div>'); ?>

So it now works correctly in all browsers.


All times are GMT -6. The time now is 03:33 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.