On Tue, Sep 23, 2008 at 10:33:11PM +0200, Gunlaug Sørtun wrote:
> Dave Sherohman wrote:
>
> > http://kuno.sherohman.org/~esper/nomadnetinc.com/
>
> > The navigation menu is, however, proving problematic.
>
> > Is it possible to get that to line up properly in all major browsers/
> > versions/operating systems and, if so, how?
> You can try adding something like...
>
> div.nav a:hover {background-position : 0 50%;}
I changed the style from
div.nav a:hover {
color: #e4923f;
background-image: url(imgs/nav_over.gif);
}
to
div.nav a:hover {
color: #e4923f;
background-image: url(imgs/nav_over.gif);
background-position : 0 0;
}
and saw no apparent effect, even after a browser restart.
I suspect that the issue is with the vertical positioning and/or height
of the list items themselves rather than an image-related issue, as I tried
using
div.nav a:hover {
color: #e4923f;
background-color: red;
}
and still continue to see the same variation in vertical alignment. For
the sake of introducing as few irrelevant factors as possible while
troubleshooting, I've left this version in place.
The list itself is styled as:
div.nav ul {
margin: 0 20px;
list-style-type: none;
height: 30px;
}
div.nav li {
display: inline;
background-image: none;
background-position: 0 0;
font-size: 14px;
font-variant: small-caps;
color: #e4923f;
padding: 9px;
}
> Also, many factors change when such constructions are subjected to some
> form/degree of font-resizing - in all browsers, so it isn't only the
> background on hover that needs improved alignment in your page.
> FWIW: pixel-sized fonts don't impress any of my browsers.
Any better suggestions for getting the height of the menu row and the
items to match up instead of specifying the heights of everything in
pixels? I'm a programmer, not a graphic designer, so when I want things
to line up cleanly, my first instinct is to specify everything using
(what should be) an invariant unit: the pixel. You seem to be saying
that this isn't the best choice, but haven't said what the better option
would be.
It does make sense to me that the pixel-specified heights may be the
culprit, though, because I've never been able to figure out why a 14px
font + 9px top padding + 9px bottom padding = 30px total (the height of
the ul) instead of 32px...
> > Also, side question... Where can I find a good explanation of doing
> > 'clipped' corners (as on the right sidebar) in css?
>
> Don't understand what you're trying to achieve.
| <- page edge
__________|
/ |
| |
| |
| |
non-square corner -> \__________|
|
There are a ton of articles out there on doing rounded corners, each
apparently using a completely different technique, but a) none of those
which I've looked at directly address arbitrary custom corners and b) if
I need to adapt one of the rounded corner examples to produce a straight
diagnonal division rather than a curve, I would prefer to start from the
accepted 'best' technique if one exists.
--
News aggregation meets world domination. Can you see the fnews?
http://seethefnews.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
