how to stop this irritating css behaviour


Tags: jquery,html,css,css-float,html-lists

Problem :

Here is a jsfiddle link: http://jsfiddle.net/qrzwD/

i just dont like my second li to move upward after the animation completes.

can someone help me to stop this.

here is my html:

 <nav>
    <ul>
        <li> <a class="content-box-blue" href="#"> </a> </li>
        <li> <a class="content-box-gray" href="#"> </a> </li>
    </ul>
</nav>

here is my css:

* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
margin: 0;
padding: 0;
}
ul, li, nav {
margin: 0;
padding: 0;
}
nav {
float: right;
width: 400px;
margin-top: 35px;
margin-right: 10px;
}
nav ul {
list-style-type: none;
float: right;
}
nav li {
float: right;
clear: right;
margin-bottom: 20px;
}
.content-box-blue {
background-color: #00bfff;
border: 1px solid #afcde3;
height: 50px;
width: 0px;
border-top-left-radius: 8% 50%;
border-bottom-left-radius: 8% 50%;
text-align:center;
line-height:50px;
 }
 .content-box-gray {
background-color: #FF69B4;
border: 1px solid #bdbdbd;
height: 50px;
width: 0px;
border-top-left-radius: 12% 50%;
border-bottom-left-radius: 12% 50%;
text-align:center;
line-height:50px;
 }

here is my jquery code:

$(function(){
    $(".content-box-blue").animate({width:'350px'},1200,function(){$('<span>Charcoal Paintings</span>').fadeIn(1000).appendTo($(this));});

    $(".content-box-gray").animate({width:'250px'},1200,function(){$('<span>Sketches</span>').fadeIn(2000).appendTo($(this));});

});


Solution :

Set the height on LI instead of A:

li {height:50px;}

http://jsfiddle.net/qrzwD/3/

The newly appended A is making the LI change the overall height


    CSS Howto..

    How can I change the css of this when I click on anything but this?

    CSS / Javascript: hidden div does not take full width after being shown

    How do I calculate percentage based on pixels for CSS conversion?

    Dropdown list showing vertically in Internet explorer

    How to modify twitter bootstrap “.icon-bar” colors

    How to implement padding-free sprites in css?

    How to style nested panel controls in ASP.NET

    CSS: How to set a fallback for bold font families?

    CSS hover transition - how to remove delay?

    h1:hover is responding on the whole width, unable to link h1 and don't know how to target things individually

    How to Implement YUI Compresser in a website [closed]

    How to set image height 90 % of whole page height (not viewport)

    How to change tr color on mouse over when there is already implemented?

    How to style object when the user clicks it

    How to debug CSS in Android native browser?

    How to add css 3dtransform property with jquery to a dom element?

    How to make this shape with css? [closed]

    How do you change the font-size of a custom css style?

    How to paste a style sheet into a new document window in a Rally app

    CSS - how to dry up?

    How to overflow in CSS/HTML? [closed]

    How to Set Up a Responsive Background-Image with CSS

    How to scale a div without scaling content

    Showing responsive menu link that is not shown in regular navigation menu

    How can I absolutely position a block of multi-line text relative to the bottom of the last line?

    How to fade, animate and change text, word in title / sentence

    How to show the first N elements of a block and hide the others in css?

    How to layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    How to make a dropdown float with CSS

    how to display euro symbol in css after and before pseudoelements