Ah, using this method it works! Thank you!
Olle
> Date: Fri, 6 Apr 2012 22:06:22 +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,
>
> instead of setting "float: left;" for the li elements, give them
> "display: inline-block;" instead. That way still can have a margin and
> padding, but they behave kind of like text or an image.
>
> This again enables you to set "text-align: center;" for the surrounding
> ul element, and the contained li elements will be centered then.
>
> Hope it works...
>
> Christian
>
> Am 06.04.2012 19:43, schrieb Olle Risberg:
> > ...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/
> >
> ______________________________________________________________________
> 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/
