Spot whats wrong, then help me fix it

Boov

Boov

Boov

Associate
Joined
7 Jun 2007
Posts
87
look at the image below and see if you can spot whats wrong! its not that tricky but it certainly out of the ordinary.

hmm.gif


in my many years of web development, i have never had this problem before, and its messing with my head a bit. i cant come up with any logical explanation as to why something like this would happen.

any help appreciated!
 
The first title has the wrong colour. Is it due to using quotes on the font?
 
Dup said:
The first title has the wrong colour. Is it due to using quotes on the font?
Click to expand...

What i was thinking.

I did,

<title>Hmm</title>

<style>
h1 {color:#FFBE00;font-family:"Myriad Pro"}
h1.Hmm {color:#FFBE00;font-family:"Tahoma"}
</style>

<body>
<h1>Title 1</h1>
<h1 class="Hmm">Title 2</hi>
</body>
</html>

Which shows,

205s8w5.png



What you wanted?
 
Last edited:
added in the quotes, and still same problem :( im going to bed now but i really look forward to seeing what you peeps think it could be, its certainly a strange one!

cheers for help so far
 
I love these ones. I've got the attention span of about 10 seconds when people say work it out for yourself what i'm talking about.

WHy don't you say it's the wrong colour, and wrong font-size .. or something ?
 
I thought you didn't need to enclose single word name fonts in quotations but you did for multiple words. :confused:
blade007 said:
I love these ones. I've got the attention span of about 10 seconds when people say work it out for yourself what i'm talking about.

WHy don't you say it's the wrong colour, and wrong font-size .. or something ?
Click to expand...
No fun then! :p
 
Considering its only on your system it sounds like a weird bug.. but..

You may try removing the colour information from the hmm class.. why you would want to duplicate this information is beyond me anyway.. youve already specified h1 colour and you dont need to duplicate the code for a class that adds to h1
 
blade007 said:
I love these ones. I've got the attention span of about 10 seconds when people say work it out for yourself what i'm talking about.

WHy don't you say it's the wrong colour, and wrong font-size .. or something ?
Click to expand...

Exactly what I was thinking!

Play around with different colours / fonts / class names/ tags and work out whats causing it. That's what I'd do.
 
The code you posted is working fine for me. There's no way another load of CSS could be contaminating it? userChrome.css? A Firefox extension? Greasemonkey script? Stylish style?

Try sticking !important after your colour definitions to make sure, then if it works try and track down what it is.

Can't see how it could be anything to do with that markup, though.
 
Is it because your on linux? Have you got them fonts installed?

Only other thing I can think of is its some plugin doign it.
 
im not on linux, its just a windows VS --> http://fioressj.deviantart.com/art/Human-for-Windows-37743373 :)

the problem seems to be based around the font "Myriad Pro", iv tried a handful of fonts now, and they all appear as instructed.

i also noticed the same as Augmented, the R and B values seem to have switched when rendered with the myriad font. iv not had a good play yet but id bet the problem lies around the myriad font. Would i be correct in thinking that the myriad font is more known on the mac platform? and if so could that have anything to do with it? maybe i have a mac version of the font instead of a windows version?

another peculiar twist is that when i highlight the offending h1, the color changes to the correct color, even if i just highlight one character from the h1, it changes. But as soon as that h1 is scrolled out of display, or the page refreshed, its back to normal.
 
Given the highlight/refresh behaviour, it's obviously a rendering engine bug.

The only thing about Myriad Pro that stands out from the others you've used is that it's an OpenType font, not a TrueType or Type1. At least it is if it was installed with Photoshop, as is most likely.

Try another known OpenType font, like Minion Pro, and see what happens.

Incidentally, I've tried replicating this behaviour here, and not experienced this issue.
 
Boov said:
[...] another peculiar twist is that when i highlight the offending h1, the color changes to the correct color, even if i just highlight one character from the h1, it changes. But as soon as that h1 is scrolled out of display, or the page refreshed, its back to normal.
Click to expand...
So am I right in saying that it's blue until you highlight it [in which case the whole h1 turns to the specified orange], but when scrolled/refreshed the unclassed h1 reverts to blue?

If so, this would tie in with robmiller's suggestion of it being a chrome/extension/script artifact overriding your declaration. However, if you just change the font to something other than "Myriad Pro" and it no longer exhibits this behaviour, then I guess that rules this theory out.

EDIT: The strange colour 'inversion' might just be coincidence - specify another colour for both h1 elements, and see whether you get an inverted colour, or the same #00BEFF. If it's the same blue, that points to an override; if it inverts, it points to engine bug.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom