On 3/25/10 6:42 AM, Rory Bernstein wrote:
> Hello,
>
> http://dev.bossyfrog.com/
>
> I have a blue, horizontal nav bar on my site, the URL is above. You
> will see that there are white borders that separate the items on the
> nav bar. They are coded as an unordered list. The rule for the border
> is included in this style info below:
>
I suggest you use floats for the LI and A elements so that the LI is the
same height as the enclosed IMG (which may be better as
'display:block;'. At the moment, the LI is specified as inline. Images
are normally inline elements that sit on the text baseline, so the
images are protruding above the LI, which currently only extends to the
height of the text. ('line-height'.) That's why the borders are so small.
Making the images block-level, and enclosing them with floated <a> and
<li> elements should give you what you want.
You'll need to add 'list-style-type: none;' to the UL as well - not
needed with your current design as the 'inline" <li> does the job of
suppressing list markers.
Nice design. (But for me I'd like to be able to stop the animation...)
Cordially,
David
--
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
