Support » Themes and Templates » NSFW – Adult content warning: Menu hover state…

  • Resolved shawncbarry

    (@shawncbarry)


    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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.

    Thanks, Mark. That did the trick.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘NSFW – Adult content warning: Menu hover state…’ is closed to new replies.