WordPress.org

Forums

[resolved] NSFW - Adult content warning: Menu hover state... (3 posts)

  1. shawncbarry
    Member
    Posted 4 years ago #

    I'm having a little trouble identifying what CSS code is causing the hover state to change the shape of the navigation buttons - as in, when you hover over "Home" or "Members" or whatever, the buttons change to white (as planned), but the box extends downward (NOT planned). It's a minor thing, but it's making me nuts. I'm learning XHTML, HTML5 and CSS but I'm a graphic designer, not a developer - It's a very "nube" question, I know, but I'm struggling. Any help would be appreciated.

    WARNING: this is a hardcore adult site...

    http://www.fuck-tastic.com

  2. Mark / t31os
    Moderator
    Posted 4 years ago #

    Find this in your stylesheet..

    .sf-menu ul li a {
    	display:block;
    	width:104px;
    	padding:7px 5px 22px 7px;
    	color:#000000!important;
    	font-size:14px;
    	text-decoration:none;
    	text-shadow:0 0 0 #000;
    	text-align: center;
    	font-weight:regular;
    }

    Update that to read..

    .sf-menu ul li a {
    	display:block;
    	width:104px;
    	padding: 0;
    	line-height: 40px;
    	color: #000000!important;
    	font-size:14px;
    	text-decoration:none;
    	text-shadow:0 0 0 #000;
    	text-align: center;
    	font-weight:regular;
    }

    NOTES:
    - You shouldn't apply padding to elements with a fixed width.
    - Elements that have a float applied should have an explicit width(and of course no padding)

    The reasoning for the above two notes are that different browsers have different box models, or namingly IE does, where the width or height of an element is determined by those values, but in some cases, the padding is added to those values...

    In IE..

    width:200px;
    padding:10px;

    Would be treated as element with a total width of 220px (10px for each side)

    In most other browsers the padding is treated seperately, but this is why fixed width elements shouldn't have padding, because depending on browser, it will render differently.

  3. shawncbarry
    Member
    Posted 4 years ago #

    Thanks, Mark. That did the trick.

Topic Closed

This topic has been closed to new replies.

About this Topic