IE hover trigger

@ds60

hmm…

using the font stack you do, for <body>, in the order you have them listed:

font:normal 100%/140% verdana,"dejavu sans","mgopen modata",sans-serif;

will “dejavu sans”,“mgopen modata” ever have the chance of being used?

you seem to have changed your mind about that for <h1>

font:bold 22px/24px futura, geneva, helvetica, arial, sans-serif;

but gone right back on <ul id=“mainMenu”>

font:normal 16px/18px arial,helvetica,sans-serif;

Don’t ask me, I just copied the font face declarations from the original.

ups! sorry.

but the “question” still remains :slight_smile:

one more thing: your example is almost perfect: height: 68px; for the <span> makes it to overflow the orange bar underneath by 1px, when zooming in webkit. that’s webkit fault, but still, i would consider 67px.

I didn’t even look at the family stacks, and you’re right, that’s quite bad too.

First one has two font declarations NOBODY is going to have installed – the second one should probably lose the arial declaration since verdana is a core font… Don’t know about Geneva, that’s a quack font, right? I usually try to restrict myself to three per stack including the fallback family… and that’s all fonts I wouldn’t be trying to use in the first place.

Since when has webkit had a zoom capability?!? I thought it completely lacked even text resizing last time I tried it. Not even something I think to test for!

But yeah, reducing that 1px would avoid those types of issues though I’d have to ask, is that also screwing up the height of the floated menu?

Though I’d probably NOT change it just because I don’t bend over backwards to support buggy browser zoom’s. If I did I’d have to throw out everything I’ve ever writtten because of firefux’s "let’s resize px text and to hell with px elements’ zoom that just proves it really is Nyetscape 4’s sweetly retarded cousin.

things change probably about fonts, but i still find this article to be something to consider when choosing your font stacks.

I would shoot myself if I had as many font declarations as that. I usually think Windows, Mac, default family for the rest.

But then there’s a reason I go “arial,helvetica,sans-serif” on 99.99% of my code. It’s proven, bullet-proof, and I can’t tell the difference between 90% of sans-serif fonts anyways apart from that the other M$ ones all look like crap to me. Tahoma topping the list of garbage, followed very closely by Verdana.

There’s a reason I don’t get all the nerd rage about Arial, it’s a plain simple attractive non-nonsense font that works well just about everywhere… or maybe that’s WHY it gets so much hate from the artsy typography whackjobs?

Of course I would discount that article almost immediately as a accessibility /FAIL/ since the nimrods are talking about using serif fonts on screen media. Much less their ‘arial stack’ being this train wreck from hell:

font-family: Frutiger, “Frutiger Linotype”, Univers, Calibri, “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, Myriad, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, “Helvetica Neue”, Helvetica, Arial, sans-serif;

Even funnier since anything win2k/newer Arial would never fire…

the whole research done there is very interesting. if you choose to use something out of there or not, it’s a personal choice.

i thought that was the whole purpose? Arial as a last resort.

it should be “helvetica,arial,sans-serif” perhaps?

this one might appeal to you?

font-family:“Lucida Grande”,“Lucida Sans Unicode”,Verdana,Geneva,Helvetica,Arial,sans-serif;

Arial and Helvetica would be redundant since you’d be hard pressed to find a mac that has geneva but not helvetica, and any computer running a windows OS of the past DECADE will have Verdana meaning arial is pointless too.

… as to the two lucida’s… Screw 'em. Ugly, rarely present, and no improvement over Arial.

Seven font declarations doing the job of THREE.

will “dejavu sans”,“mgopen modata” ever have the chance of being used?

They are the largest-sized fonts on my computer. If I don’t have Verdana (which is a large font), I get DejaVu Sans… if I don’t have DejaVu Sans, I get someone close enough in the MG font family. Sometimes I’ll have Lucida Grande in a bigstack. Most text is the big-family fonts.

the second one should probably lose the arial declaration since verdana is a core font…

No, the logo is not meant to be verdana. Verdana is a big font. Helvetica is a medium font. Don’t mix.

The logo has more rounded fonts listed. I prefer to start with futura. Anyone who has that starts with it. If they don’t, we work our way down til we get to the basic titty-mermaids and germanic pagans. shrug

I would shoot myself if I had as many font declarations as that. I usually think Windows, Mac, default family for the rest.

I’d shoot myself if I was stuck developing on a Windows machine. I set the fonts I want first, and follow them down with the ones I’ll tolerate and finally the family.

But then there’s a reason I go “arial,helvetica,sans-serif” on 99.99% of my code. It’s proven, bullet-proof, and I can’t tell the difference between 90% of sans-serif fonts anyways apart from that the other M$ ones all look like crap to me. Tahoma topping the list of garbage, followed very closely by Verdana.

arial and helvetica are usually at the end of my stacks. They are bottom of the barrel last-resort fonts.

verdana kicks their @sses purely because an eye doesn’t look like an ell like it does in arial-helvetica. Is it world war eye eye or world war ell ell? Looking at the word I’ll is gross when it looks like three of the same letters. font fail. IIIIlllIIllllIlIllIlIllllll faIlllllllllllllll. It bothers me to no end that most fonts treat those like the same freaking letter.

Tahoma I don’t use because it’s tiny. Like Vista fonts. Tiny.

Why apply a hover state fix to something that didn’t have a hover state?

The hover trigger was NOT for the logo. It was for other elements on the page. This is a reduced page.

No steenkin div#header needed.

You didn’t put everything inside it, AND you made the whole thing the h1.
The h1 is NOT the title of the website, and you know it. The h1 is the Page Title. That is why I do not use h1 for company title (as it is in the original-original version which I am converting over… the back-end guy initially made it h1 on every page instead of only the welcome page so I gave up and always make it a p now).

You want the whole thing as a anchor, make the whole thing an anchor NOT JUST the image replacement!

I don’t want the whole thing an anchor. I turned the G-L span into an anchor so it could go ahead and do something (support sighted convention) while also holding an image.

Given that at the same font-size declaration the MOST difference is maybe 10% in size… I find that a little confusing as a requirement – it’s not like we’re talking the render difference between serif and non-serif.

whereas I have the same qualms about Linsux and the quackintosh, between the blurry crap apple renderer and the “what’s kerning?” attitude of freetype… I can understand why most of the world stays with Windows.

That’s one I’ve never really understood the concerns about – since we’re talking a lower-case L and a upper Case I. What on earth words are you going to have those next to each-other… I mean unless you are starting a sentence with Illness or Illuminati it’s not a concern, and even then you should be able to figure it out in context. lllness and llluminati - big deal, cry me a river.

then target JUST the elements that need it… NOT that I can think of many/any circumstances were you would. If it was for something else, maybe you should have included that something else in the example!

h1 does not mean page title EITHER… (though you are correct it’s not the title of the website!) It means the topmost heading under which ALL other headings on the page are a sub-section.

I’d have to see the contents of a full page, but if you end up wanting headings in a sidebar or the footer or elsewhere like when showing multiple articles on a page… In those cases the site title/logo/tagline become the best candidate to use as your h1. It’s also why I laugh when I see people do, well… to use the newspaper analogy just because the giant headline on the page is in giant text doesn’t make it the h1… Is:

MAYOR CAUGHT TAKING MILLION DOLLAR BRIBE

The parent heading for:

K-6 GETS NEW SCHOOL BUILDING

and

OFFICER INJURED AT LOCAL DINER

??? Of course not – or at least we would hope not. :rofl: (I mean I suppose it could if the mayor used the bribe to buy the kids a new school and then beat up a cop) They’re structurally all H2’s regardless of where on the front page they would be or what size they’re shown in.

Well that explains most of your problems then.

Given that at the same font-size declaration the MOST difference is maybe 10% in size… I find that a little confusing as a requirement – it’s not like we’re talking the render difference between serif and non-serif.

I’m practicing my typography snobbery on websites : ) I can sit in an easy chair and mention Jon Tan’s name while sipping sherry or something. Definitely I can see the difference between Verdana and, say, Futura… lookit those curves on that hawt “a”!

The typical Win user just gets Verdana (readable!) base text and likely Arial for links and the logo, and Georgia on headers. My machine and others like it would have DejaVu Sans for base text, MgOpen Cosmetica for links, and Bookman for headers. Someday when I’m rich I’ll test for Macs (or maybe I’ll get lucky and someone will drop off something running OSX at the second-hand shop). For users who can’t tell the difference and don’t care, I just want them to have readable text.

then target JUST the elements that need it… NOT that I can think of many/any circumstances were you would. If it was for something else, maybe you should have included that something else in the example!

Yeah as Paul also said, it wasn’t a good idea to use it as a blanket fix for an intermittant IE6/7 problem. It was more that I had it, and then discovered it was creating a problem (I wasn’t testing hover on the logo, just that my mouse accidentally flew over it and then I saw it). I do appreciate the comments and notes that came up, which is why I posted this. Even though most of the actual content and markup isn’t in the ie6 case.

h1 does not mean page title EITHER… (though you are correct it’s not the title of the website!) It means the topmost heading under which ALL other headings on the page are a sub-section.

Yes yes… This is an insurance page, not a newspaper. In my case, the page is pretty much about one thing, and the subheaders aren’t about different things (!! though I do have trouble figuring out what to do when there IS a sidebar on a site with related-but-different topics since yeah, they fall under the site but don’t technically belong under the page’s h1 at all).

Oh, I redid the image too so that 1) it’s the full height of the replacement should a different font or firefux’s dimwit text resize try to peek out, and to 2) remove the horrible ‘dithering for no reason’ whatever program you saved it from was adding… Well, and to take it from 8k to 3k.

I was trying to figure out what you meant by dithering, since I never dither… ah, you removed the background texture that makes the logo match the background image (not loaded in the example). However I might well go ahead and make the image itself taller, but on all my testing machines the logo would wrap to a newline instead of showing (because I have the softhyphen in the name so only “scooter” would remain behind the logo and the rest was cut off below the overflow-hidden header). On the actual development page, the em fonts are on the mobile-version (which loads no logo) and the desktop stylesheet does change them to pixel fonts.

I wanted to just make a whole different logo, but I was forced to copy the old one and work with that, because someone had registered it and that lasts for 5 years or something. Nasty ugly logo, using the font someone else chose 10 years ago (impact, ug).

If I had Win in mind, I’d not place Helvetica as the first option because it looks horrible on Win. I’d not even place Arial, because it’d be the first in the stack on “most” Win machines anyway.

@deathshadow60 please refrain from calling the people on here “nimrods”. Thank you very much.

you got it wrong :slight_smile: i was pointing out to some font stack inconsistencies:

helvetica being a bad choice for win, it should also mean a bad choice for headings :slight_smile: i don’t see much difference between a arial h1 and a helvetica h1 on win. is there any on a mac?

Are you referring to me? What specifically did I get wrong? I pointed out that I’d not use Helvetica as the first font in a stack because I find Arial is rendered better on Windows than Helvetica and the fact that most Win users don’t have Helvetica installed anyway.

yes, kohoutek.

you quoted me first :lol:

but i was not discussing the font choice, but rather the order in the two font stacks, which is inconsistent.

and

  • since arial is certain on win and mac, and helvetica is unlikely on *nix
  • since for h1 the differences aren’t notable

my comment was pointing out that putting helvetica before or after arial in that particular example is useless and inconsistent.

So instead of saying I’m “wrong”, perhaps you should have said I’m “off topic”. Somewhat of a difference.

Anyway, I’d leave both out, Arial and Helvetica. Instead, my first font would be “Helvetica Neue” as the rendering is a lot better and most Macs have it. The rest gets whatever their default sans-serif font is set to. And since I’m wandering off topic again, I’ll get out of this thread.

He was talking about Jason’s code example on page one having a differing order - for whatever reason.

Although obviously a good font face choice can be a partially-subjective matter depending upon how your brain and eyes interpret the pixels on the screen in the first place.

Then obviously you have the monitor and system settings to throw into the ring. What may work for me may not work for you, etc.

[ot]

  1. That was directed at the writers of the article, not the people on here.

  2. If people are such total thin skinned wussies around here they can’t handle the word nimrod, then screw it, I’m gone. I have zero tolerance for the thin skinned limp wristed “oh noes you might upset somebody” nonsense… You’d almost think we were talking education where you can’t upset the children. Maybe if we upset a few people some of this garbage might actually get FIXED.

But no… status quo for the win.[/ot]

@kohoutek

i’m sorry, i didn’t mean to upset you. i apologize if i did.

i never said you were wrong, i said you got it wrong: about my comment you’ve quoted.

i was not essentially questioning choosing a font face over another but an inconsistent order in the font stacks, since the end result would be almost the same.

I wasn’t upset, simply confused and shouldn’t have quoted you (as that lead to your confusion) and instead make it clear that I was making an off-topic remark. :slight_smile: All good.