Sent by Lars Holst on 26 August 2003 12:12
Jacky wrote:
>I've created my first CSS-based website.
>I've tested in on Mozilla and IE6 and quite interested how it look in
>Safari.
>
>Also there is a problem in Opera which I can't resolve,
>I have some popup effect on the menu
>(the same one as Eric's popup example)but my Opera seems not working
properly on this.
>
>Section9 -- http://section9.togetherhost.com
Ni hao Jacky,
First, I have to say that I love the design! It is very stylish, has
beautiful colors and good readibility despite the dark background. Also, the
overall look fits the type of site (anime) very well. Nice touch with the
changing graphics btw. Are you sure this is your first CSS-based website? :)
Oh, it also has to be the first time I see this on a website: Best viewed
with Mozilla 1.4! Not a bad idea to put it there actually.
You're right in that there is a slight problem in Opera though: the span
a:hover text shows up too high, and gets covered by the menu. However, the
same thing happens in Mozilla if you increase the text size just a couple of
steps.
The fix to both problems should be easy:
First, set the "div#nav a:hover span" to have a top position in a relative
measure, preferably em:s. Start with 15em or so, and then fine tune.
Second, without having studied your css in detail it would seem you need to
feed Opera a different value for the top position.
I use a "standardized" set of hacks that usually works well:
/* for Opera 7.x (the standard declaration - hacks to feed IE and Moz with
different declarations follow) */
div#nav a:hover span {top: [x]em;}
/* for Moz (the *7 hack - hides from Opera but not IE) */
html* div#nav a:hover span {top: [y]em;}
/* for IE (the Tan hack - feeds all versions of IE, hides from all other
standards compliant browsers) */
*html div#nav a:hover span {top: [z]em;}
This approach is not perfect because it doesn't distuingish between
different versions of IE or Opera, although I think it is safe to assume
that most Opera users will always have the latest version. The advantage is
that it's really easy to remember, and I prefer using the same set of hacks
whenever I need them.
Third, you have a small validation error caused by a missing slash at the
end of your meta tag. Just change:
<meta http-equiv="Content-Language" content="zh-TW">
to
<meta http-equiv="Content-Language" content="zh-TW" />
hope_this_helps, lars <http://larsholst.info/>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
