SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with this few lines of CSS

    Hi,

    I'm struggling with the CSS below, the "nav li a" text state is not properly aligned with the "nav li hover". I was hoping someone here can help me proplerly arrange the code below.

    Code:
    #nav li a
    {
    	-moz-border-radius-topleft:6px;
    	-moz-border-radius-topright:6px;
    	-webkit-border-top-left-radius:6px;
    	-webkit-border-top-right-radius:6px;
    	-moz-border-radius-bottomleft:6px;
    	-moz-border-radius-bottomright:6px;
    	-webkit-border-bottom-left-radius:6px;
    	-webkit-border-bottom-right-radius:6px;
    
    	color:#FFF;
    	display:block;
    	float:left;
    
    	font-size:14px;
    	font-weight:700;
    	letter-spacing:1px;
    	line-height:100%;
            margin: 14px 20px 0 0;
    	margin-top:6px;
    	margin-left:20px;
    	padding:5px 15px;
    	text-decoration:none;
    	text-shadow:1px 1px 1px #233a20;
    	text-transform:uppercase;
    }
    
    #nav li a:hover
    {
    	-moz-border-radius-topleft:6px;
    	-moz-border-radius-topright:6px;
    	-webkit-border-top-left-radius:6px;
    	-webkit-border-top-right-radius:6px;
    	-moz-border-radius-bottomleft:6px;
    	-moz-border-radius-bottomright:6px;
    	-webkit-border-bottom-left-radius:6px;
    	-webkit-border-bottom-right-radius:6px;
    
    	border:1px solid #8ab713;
    	background-color:#a73246;
    	color:#FFF;
    	margin-top:6px;
    	padding:5px 15px;
    }
    
    #nav li.active a
    {
    	-moz-border-radius-topleft:6px;
    	-moz-border-radius-topright:6px;
    	-webkit-border-top-left-radius:6px;
    	-webkit-border-top-right-radius:6px;
    	-moz-border-radius-bottomleft:6px;
    	-moz-border-radius-bottomright:6px;
    	-webkit-border-bottom-left-radius:6px;
    	-webkit-border-bottom-right-radius:6px;
    
    	border:1px solid #8ab713;
    	background-color:#a73246;
    	color:#FFF;
    	margin-top:6px;
    	padding:5px 15px;
    }

  2. #2
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    A simple way to fix this is to reduce the padding on hover by the same value as the border i.e. 1px all round. So give #nav li a:hover and #nav li.active a padding:4px 14px;

    There's no need to declare margins again on hover and .active.

    #nav li a needn't have display:block; because floated elements are automatically set to block.

    As #nav li a:hover and #nav li.active a are identical they can be combined into one rule.

    Code CSS:
    #nav li a
    {
        -moz-border-radius-topleft:6px;
        -moz-border-radius-topright:6px;
        -webkit-border-top-left-radius:6px;
        -webkit-border-top-right-radius:6px;
        -moz-border-radius-bottomleft:6px;
        -moz-border-radius-bottomright:6px;
        -webkit-border-bottom-left-radius:6px;
        -webkit-border-bottom-right-radius:6px;
        color:#FFF;
        float:left;
        font-size:14px;
        font-weight:700;
        letter-spacing:1px;
        line-height:100%;
        margin: 6px 20px 0 20px;
        padding:5px 15px;
        text-decoration:none;
        text-shadow:1px 1px 1px #233a20;
        text-transform:uppercase;
    }
     
    #nav li a:hover, #nav li.active a
    {
        -moz-border-radius-topleft:6px;
        -moz-border-radius-topright:6px;
        -webkit-border-top-left-radius:6px;
        -webkit-border-top-right-radius:6px;
        -moz-border-radius-bottomleft:6px;
        -moz-border-radius-bottomright:6px;
        -webkit-border-bottom-left-radius:6px;
        -webkit-border-bottom-right-radius:6px;
        border:1px solid #8ab713;
        background-color:#a73246;
        color:#FFF;
        padding:4px 14px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2008
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, that solve it - I really appreciate the help.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Remember you only need to declare things that you want to change on hover, I would just set a border even it's not visible so that you don't have to adjust padding. All you're wanting to do is change colours on hover.
    Code css:
    #nav li a
    {
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	color: #fff;
    	float: left;
    	font-size: 14px;
    	font-weight: 700;
    	letter-spacing: 1px;
    	line-height: 100%;
    	margin: 6px 20px 0 20px;
    	padding: 5px 15px;
    	text-decoration: none;
    	text-shadow: 1px 1px 1px #233a20;
    	text-transform: uppercase;
    	border: 1px solid transparent; /* or whatever color the backgroud is */
    }
     
    #nav li a:hover, #nav li.active a
    {
    	border-color: #8ab713;
    	background-color: #a73246;
    }

  5. #5
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I would just set a border even it's not visible so that you don't have to adjust padding.
    You could, with the caveat that IE6 does not support a border value of transparent

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    yes, that's why I added "or whatever your background color is".

    A lot of people are dropping support for ie6 anyways these days.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •