On Wed, Sep 24, 2008 at 06:50:38PM +0200, Gunlaug Sørtun wrote: > May be a bit difficult to comprehend, but 'background-position : 0 50%;' > will "automagically" place the image's vertical center exactly at the > link's vertical center, and that will show.
Interesting... I was sure that it set the upper left corner, so used 0,0 because that's where I want the image's upper left to start, rather than halfway down the left side. However, 0, 50% didn't cause any change either, which leads back to the conclusion that the background image is fine and it's the <li>/<a> that's not sitting in quite the right place. > To exemplify: I use 'background-position : 0 50%;' on nav-links on this > page... > <http://www.gunlaug.no/travel-07/travel-051.html> Thanks for the example. It looks like I may be able to work out answers to a couple of other questions (which I haven't asked about yet) by examining what you've done there. > Pixels are absolute values that breaks "relative and inherited". Once > you throw in pixels you "fix" dimensions, and browsers can no longer > recalculate - even if there's a need for it - as they are locked to > those pixel-values. > > In most cases we don't declare 'height' on elements at all, and simply > leave it to the browsers to figure out how high an element must be to > hold its content - whatever it is. Declaring an element's width is > usually more than enough. It seems that I'm going about this all wrong, then, or at least in a very unusual manner... The original design which I'm trying to clean up and mostly-duplicate can be seen at http://nomadnetinc.com/ Aside from the exclusive use of nested tables for formatting, I also want to get away from the use of images for the navigation buttons, so that it'll be a little quicker and easier to add new pages to the menu. In the original design, the menu is a 30-pixel-high table row with a 30px-high background image, filled with 30px-high images for the nav links. In order to maintain (most of) its appearance, the obvious solution was to stretch the background vertically to fit, but the results of searching for "css stretch background image" can be largely summed up with a quote from the first hit, "AFAIK there is no way to stretch or control the size of a background image using CSS." Trying to force a fixed height was the only other option I could come up with, given the color scheme and background images in question. I actually messed around quite a bit with trying to avoid fixed heights for everything, but I wasn't able to find a combination which would cause the 'hover' background to use the full height of the <ul>/<div> rather than clinging tightly around the text and/or sitting at the top or bottom of the available space. If I could get it so that div.nav was the only thing with a fixed height in px, I suspect that would probably be the best possible solution. > Font-size and line-height are treated a bit different. Most browsers > recompute pixel-sized fonts by default - scale the font-size, and IE/win > can be set to simply ignore font-sizes. > Not all browsers will recompute line-height though, so serious > text-overlapping and other "disasters" may occur in IE/win and Opera if > line-height is declared in pixels. Nasty... So then how do you get things to match up with a fixed-height background image if you can't reliably use fixed height elements? > > 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... > > Case please - and I would like to know the line-height at play. Numerous > ways to intentionally or unintentionally "mess up" an element's actual > dimensions. I do it intentionally all the time. I was referring to the page under discussion, http://kuno.sherohman.org/~esper/nomadnetinc.com/ , on which (in Firefox 3/Windows, at least) an <a> (padding: 9px; line-height: 28px;) in an <li> (font-size: 14px; padding: 9px) comes out to the same height as the owning <ul> (height: 30px). By my math, the <a> should be 28px high, the <li> should be 32, and the <ul> should be 30 instead of all coming out the same. (The relevant styles being div.nav a, div.nav li, and div.nav ul. div.nav itself is also set to a height of 30px.) > > 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. > > There isn't any "best". We tend to invent, or rather reinvent, methods > as we go, as we all try to create something a bit "different". OK, fair enough. Thanks for the references! -- 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/
