Forum Moderators: not2easy

Message Too Old, No Replies

Um. h1 hyperlinks magically larger in Opera than other browsers?

Why, Opera? Why?!

         

Don_Hoagie

2:30 pm on Feb 22, 2006 (gmt 0)

10+ Year Member



Riddle me this...

h1 {
display: block;
font-size: 12px;
font-weight: bold;
color: #333;
}

a.standard:link {
color: #00aeff;
font-weight: bold;
text-decoration:none;
}

<h1><a class="standard" href="#">Blah</a></h1>

Why would this link be the correct size in IE/FF, but appear to be about 18px in size in Opera?

MWpro

6:42 pm on Feb 22, 2006 (gmt 0)

10+ Year Member



It worked fine with me for Opera. Maybe something else in your code is throwing it off. As a site note, to avoid confusing class names and to keep it simple, you could do this:
h1 {
display: block;
font-size: 12px;
font-weight: bold;
color: #333;
}

h1 a {
color: #00aeff;
font-weight: bold;
text-decoration:none;
}

<h1><a href="#">Blah</a></h1>

Don_Hoagie

6:55 pm on Feb 22, 2006 (gmt 0)

10+ Year Member



yeah, it has to be something else... i guess i was hoping for some miracle advise like "ohh, you must've done _____".

The reason the a href has its own selector in this case rather than *hl a* is because it applies to other links besides h1's, and furthermore not all of the h1's utilize that link style.

Thanks for the reply

bedlam

5:26 am on Feb 23, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The reason the a href has its own selector in this case rather than *hl a* is because it applies to other links besides h1's, and furthermore not all of the h1's utilize that link style.

It may be nitpicky of me, but given the conditions you've outlined, I suspect the optimum css to be this:

h1 a,
a { ... }
h1.nonStandard a { ... }

If I've got you right and the odd items out are members of a group of h1s that behave differently, then they--being nonstandard--should get the class name.

But back to your problem...it's weird that it's different from one browser to another and that makes me doubt what I'm about to suggest, but here goes:

Usually in cases like what you're describing it's a problem of specificity--sometimes something is too specific, and sometimes not specific enough.

There are too many ways it could come about to give examples, but be sure to look even at things like the pseudoclasses on links...are they in the right order (l,v,h,a)? Pseudoclasses all have the same specificity, but apply to different 'conditions' of links, and so can wreak havoc...for example, try to put a font-size larger than the inherited one only on :visited to see some weird behaviour...

-b

Don_Hoagie

1:50 pm on Feb 23, 2006 (gmt 0)

10+ Year Member



Bedlam, thanks very much for the ideas... I'll try them out. Perhaps I did mis-code the LVHA structure... that would be a nice and simple resolution if that's the case.

Ah, I see where you guys are thinking this is incorrect CSS semantics... you're too insightful for your own good:

"standard" relates to a particular section, which just so happens to be well-described by that phrase... it does not denote "the standard link style of the site". In this site's case, "standard" is an outlier, and "nonstandard" as a class makes about as much sense as "nonSteve".