font meltdown!

http://www.alienscalpel.com/

can others actually read the headers there? i am getting nothing but wingdings!!

i figured it was the site having some fun with us (alien writing, get it?), but lo and behond PERFECT ENGLISH if viewed in FF or Opera!! so, yeah, something definitely wrong in IE.

9.0, btw.

no probs on any other sites, afaik. definitely no wingdings!

 

Borked in IE10 for me too.

 

It displays fine for me on IE 9.
I guess the problem you're having is with the style sheet used, though I've no idea what would cause the problem.

Code:

h1{

font-size:32px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

letter-spacing:-1px;

}



h2{

font-size:28px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

letter-spacing:-1px;

}

h3{

font-size:26px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

letter-spacing:-1px;

}	



h4{

font-size:24px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

letter-spacing:-1px;



}

h5{

font-size:18px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

letter-spacing:-1px;

}

h6{

font-size:16px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

letter-spacing:-1px;



}

#blog-title {

font-size:48px;

font-family: "Arial Narrow", Webdings, Wingdings, symbol;

font-weight:normal;

color:#fff;

margin:0;

padding:0;

position:relative;

top:20px;

} 

 

Wingdings for headers in Firefox 17.

Maybe they want the page to render correctly only if using IE...

 

I just looked at the page source, I don't see any references to wingdings. You got this from page source??

 

The style sheet is specifying that the browser use the 'Arial Narrow' font as the first choice for the <h1>, <h2>, etc. tags in the section designated as the following:

Code:

/** START SHINE STYLES **/

If your machine does not have the Arial Narrow font, then the next font in line is 'Webdings', etc. It defies logic, however, as to why anyone would ever use Webdings or Wingdings as a required font. Those fonts are pretty much totally useless.

@ cipher: http://www.alienscalpel.com/wp-content/themes/shine/style.css , toward the bottom of the page...

 

Yes, thanks!

Did some checking, 'Arial Narrow' font doesn't appear in any list of standard Windows installed fonts I found. My linux boxes don't have it either. Appears to be a commercial font, no free downloads...

Brilliant web page creator... :confused

 

no, it's the other way around for me.

IE 9.0 - dings
FF 15.0.1 - no prob
Opera 12.00 beta- no prob

i mostly stick to IE so those others are even further in need of update. and yet, they work fine!

(rather than meaning they can handle arial narrow, i suspect it means they can't handle webdings or wingdings either, and are moving on to #4 on the list....)


btw, cipher may have "gotten" it, but i still don't -- where's that lengthy "H1" "H2" paste from, if not the page source?!

i get the overall answer that "arial narrow" is missing, so use next on list, but where did _nullptr oh-so-casually pluck that list from?!

 

Line 50 of the page source is pointing to it:

Code:

<link rel="stylesheet" type="text/css" media="screen" href="[URL="http://forums.majorgeeks.com/view-source:http://www.alienscalpel.com/wp-content/themes/shine/style.css"]http://www.alienscalpel.com/wp-content/themes/shine/style.css[/URL]" />

 

If you right-click the webpage and select 'view source' you are then presented with the markup language used to encode the page. Many pages contain the instructions for preferred fonts, etc. in that code. However, many sites (including the Alien Scalpel site in question) use relative links to a Cascading Style Sheet (CSS) for site-wide instructions. The link I listed above is where _nullptr found the code.

As far as why IE, Firefox, Opera, etc. display fonts in a willy-nilly fashion? Who knows - internet standards have never been 'standard'. You think it's confusing now, wait 'til HTML5 and CSS3 start really circulating...:confused

***Edit: oops - sorry, cipher - didn't see you lurking there.

 

Nice explanation!! :cool I didn't know how to say how it worked, figured it was something like a call to a server side javascript file. Thanks...

 

out of curiosity, i updated FF (17.0) and opera (12.11), and they both continue to display just fine.

IE, meanwhile, is showing itself as "up to date" with 9.0.xxxx -- what's all this about an IE10?! i didn't even know there WAS one!

is it still in beta? otherwise, why hasn't wupdate offered it to me?! it's not even under "optional" there.

is it w8-specific? i'm still on w7 SP1, i guess.

alas and alack.

 

I'm running FF 17 as well, seeing dingbats. Thisis not a browser issue, rather an installed fonts issue. As plodr pointed out in #8 above, Win 7 64 seems to be the OS missing the font. And my linux distros don't have it either.

So this "problem" isn't the fault of a setup error, or update issue. As to the IE versions, don't know, don't use it.

 

Good morning...

Installed system fonts are an important factor, but there are many different reasons for one browser to display a webpage differently from another. I just grabbed one of the many style sheets used by that Alien Scalpel site to find something like this:

Code:

/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
} 

There are many style sheets being used by that site (as well as many 'jquery' calls to javascripts) so there's no telling where a hack exists that makes IE interpret a line of code differently from another browser.

 

Good evening
Yes, it's certainly one heck of mess.

 

yes, but that is the same OS i have, and my FF 17 seems to have it!

:confused

 

As an aside:

That website shows 12 errors and 6 warnings at the W3C Markup Validation Service and 9 errors at the W3C CSS Validation Service (and that's just the first style sheet). Granted, many sites have syntax errors that don't necessarily cause display problems, but the primary function of those validation services is to illustrate cross-browser compliance.

I don't know, Cat - I just fired up that site in both FF 17.0.1 and IE 9.0.11 on a Win 7 SP1 box and got no difference in display. Something's amiss somewhere on your end - good luck with trying to figure it out.

 

64 bit win 7? So far it appears that the 64 bit Win 7 is missing the font, along with a few linux distros, but that 32 bit Win 7 has it. Plodr reported this in # 8

If you have the "arial narrow" font on a Win 7 64 bit machine , I'd ask if you installed it. Or possibly it came bundled with some other software. So far, the 3 Win 7/64 boxes I've looked at don't have it as a part of the base install.

 

Apparently the Arial Narrow font is being installed on Win 7 64-bit machines if any compatible version of Microsoft Office is installed.

 

I just unchecked text override button, and the site renders fine now.

I'm still of the opinion that the website is where the problem is...

 

yes, all exactly the same as my own case.

like i said, i think it's displaying ok in FF b/c we are also lacking the 'dings fonts, in addition to lacking arial narrow. as opposed to IE where we apparently have the former but not the latter.

which must be the case with cipher's FF as well -- 'dings but no narrow, right? that's why the "override" works for him, but you and i don't need it.

no?

so how does one do a similar override in IE? there is a help link "how to ignore preset fonts" under "tools/internet options/appearance/fonts" but it comes up empty for me!

 

You need to go into Accessibility first, [sarcasm]which I'm certain you're know thinking seems highly logical.[/sarcasm]

 

yes, i actually found that on my own -- "accessibility" wouldn't sound so odd to me if it weren't sitting next to a tab labelled...FONTS.

oh well, at least it worked. dings <--> english triggering back and forth before my very eyes!

alas, but it's now messed up every OTHER site! not in terms of font STYLES, but in terms of font SIZES. what is the default (starting pos) of that popup -- ALL unchecked?

i could have SWORN i had "ignore font sizes" checked there when i began, but after checking (and now UNchecking) "ignore font styles", i cannot go back to having the "sizes" one checked.

in the end i need them ALL unchecked for the rest of the interwebz to display correctly. and the one "ignore font styles" one checked when visiting the alien doc.