...Obviously, however, doing this leads to the layout totally breaking when
zooming, something I didn't quite plan for.
The display: block; solves the problem but creates a new one which I am not
able to solve just now - when using display: block in #access ul like you said,
how do I center the menu items? I've been trying to put auto-margins in every
div I can think of but it doesn't seem to turn out as I'd like. Any clue,
someone?
Olle
> From: olle_risb...@hotmail.com
> To: css-d@lists.css-discuss.org
> Date: Fri, 6 Apr 2012 16:48:59 +0200
> Subject: Re: [css-d] Hover effect doesn't cover the whole background
>
>
> Hi, thanks for your help and thorough explanation! :-)
>
> I managed to fix the problem in another way, by simply shrinking the bar a
> few pixels to get the hover to cover all of it. Thank you anyway, once again.
>
> Olle
>
> > Date: Fri, 6 Apr 2012 15:48:05 +0200
> > From: k-r...@t-online.de
> > To: css-d@lists.css-discuss.org
> > Subject: Re: [css-d] Hover effect doesn't cover the whole background
> >
> > Hi Olle,
> >
> > when I change the rule:
> > #access ul {
> > display: inline-block;
> > }
> >
> > to
> >
> > #access ul {
> > display: block;
> > }
> >
> > the gap disappers (tested only in Firefox). There might be side effects,
> > so the consequences of such a change have to be considered.
> >
> > When the ul is an inline-block, it surrounds the floated li elements
> > that it contains. With a zoom of 100% the li elements and the ul have a
> > height of 43px (according to Firebug), and the surrounding div has a
> > height of 50px, thus there is an extra gap of 7px below the ul just as
> > you mentioned.
> >
> > When the ul is a block, it doesn't surround the li elements any more,
> > but flattens to a height of 0px. And the extra gap of 7px is also gone.
> >
> > So the question is whether the "display: inline-block;" is actually
> > needed ror that ul for something else? Maybe not. If you still want the
> > ul to surround the li elements, maybe it is better to set the display of
> > the ul to "block" and to change the display of the li elements to
> > "inline-block".
> >
> > I hope this doesn't confuse any further but helps a little.
> >
> > Best regards
> >
> > Christian
> >
> > Am 06.04.2012 10:41, schrieb Olle Risberg:
> > >
> > > Hi!
> > >
> > > I'm using Wordpress to make a website and I'm stuck on this one. When
> > > hovering above an item in my navigation
> > > bar (Home, About etc), I get a nice hover effect, the background is lit
> > > up. However, it doesn't do this all the way down, there is a little
> > > space at the bottom of the bar which isn't included in the hover-effect.
> > > Does
> > > anyone know how to fix this?
> > >
> > >
> > >
> > > I've tried to use Firebug to find relevant CSS-stuff but I can't find
> > > what to change. I'm currently using a Twenty Eleven childtheme I
> > > made/am making. You can see the site (which isn't at all finished, by the
> > > way) at threeseasonsmusic.com/wordpress
> > >
> > > Apologies if my vocabulary isn't very professional. Thank you for your
> > > help!
> > >
> > > Olle
> > >
> > >
> > > ______________________________________________________________________
> > > css-discuss [css-d@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/
> > >
> > ______________________________________________________________________
> > css-discuss [css-d@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/
>
> ______________________________________________________________________
> css-discuss [css-d@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/
______________________________________________________________________
css-discuss [css-d@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/
