Element does not accept "height" or "min-height" property

Asked

Viewed 278 times

0

I have the following file with HTML, CSS and Javascript codes, my problem is the following: At the end of the file, I have a tag <ul class="req"> and within it I have a <li>, the problem is that the property does not work height I’m trying to use in this place, the attempt to use the property height is inside that block of codes, see that I tried to use the height and the min-height and yet it doesn’t work.

.req li a {
background-color: red;
margin-right: 20px;
height: 50px;
line-height: 50px;
position: relative;
text-decoration: none; }

Filing cabinet:

<!DOCTYPE html> 
<html> 
<head>
<title>Menu</title> 
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/menu_js.js"></script>
<link rel="stylesheet" type="text/css" href="css/menu_style.css" />
<script type="text/javascript" src="css/jquery-2.0.0.min.js" /></script>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />

<!--[if IE 7]>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->

<script>
jQuery(document).ready(function() {
    jQuery('ul.form li a').click(
        function(e) {
            e.preventDefault(); // prevent the default action
            e.stopPropagation; // stop the click from bubbling
            jQuery(this).closest('ul').find('.selected').removeClass('selected');
            jQuery(this).parent().addClass('selected');
        });
});

jQuery(document).ready(function() {
    jQuery('ul.req li a').click(
        function(e) {
            e.preventDefault(); // prevent the default action
            e.stopPropagation; // stop the click from bubbling
            jQuery(this).closest('ul').find('.selected').removeClass('selected');
            jQuery(this).parent().addClass('selected');
        });
});
</script>
<style>
body {
    margin:0px;
    padding:0;
    font-family: "myriad-pro", sans-serif;
    font-size: 15px;
}

.longBarHorizontal {
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: rgb(49, 50, 64);
}

.longBarVertical {
    position: absolute;
    width: 146px;
    height: 100%;
    background-color: rgb(49, 50, 64);
}

ul.form {
    position:relative;
    width:146px;
    padding: 0px;
    list-style: none;
    overflow:hidden;
    margin-top: 50px;
}

ul.req {
    background-color: blue;
    position: relative;
    width: 100%;
    height: 50px;
    padding: 0px;
    text-align: right;
    list-style: none;
    overflow:hidden;
}

.form li a {
    border-left: 4px solid rgb(49, 50, 64);
    width:160px;
    padding-left:15px;
    line-height: 40px;
    display:block;
    overflow:hidden;
    position:relative;
    text-decoration:none;
}

.req li a {
    background-color: red;
    margin-right: 20px;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-decoration: none;
}

.form li a.liClassLBV {
    color: lightgray;
}

.form li a.liClassLBH {
    color: lightgray;
}

.form li a.liClassLBV:hover, .form li a.liClassLBV:hover i {
    color: black;
    -webkit-transition:all 0.15s linear;
    -moz-transition:all 0.15s linear;
    -o-transition:all 0.15s linear;
    transition:all 0.15s linear;    
}

.req li a.liClassLBH:hover, .req li a.liClassLBH:hover i {
    color: black;
    -webkit-transition:all 0.15s linear;
    -moz-transition:all 0.15s linear;
    -o-transition:all 0.15s linear;
    transition:all 0.15s linear;    
}

.form li.selected a {
    color: white;
    border-color: gray;
    background-color: rgb(52, 63, 72);
}

.req li.selected a {
    color: white;
    border-color: gray;
    background-color: rgb(52, 63, 72);
}

.form i {
    color: white;
    margin-right:15px;
    -webkit-transition:all 0.15s linear;
    -moz-transition:all 0.15s linear;
    -o-transition:all 0.15s linear;
    transition:all 0.15s linear;    
}

.req i {
    color: white;
    margin-right:15px;
    -webkit-transition:all 0.15s linear;
    -moz-transition:all 0.15s linear;
    -o-transition:all 0.15s linear;
    transition:all 0.15s linear;    
}

.req li a {
    margin-top: 10px;
    color: lightgray;
}

h1 {
    color:#fff;
    margin:0 auto;
    margin-bottom:40px;
    font-size:30px;
    width:300px;
    text-align:center;
}

p a {
    color:#fff;
    text-decoration:none;
}
</style>


    <div class="longBarVertical">
        <ul class="form">
            <li><a class="liClassLBV" href="#"><i class="icon-user"></i>Geral</a></li>
            <li><a class="liClassLBV" href="#"><i class="icon-envelope-alt"></i>Pesquisa</a></li>
            <li><a class="liClassLBV" href="#"><i class="icon-cog"></i>Conteúdo</a></li>
            <li><a class="liClassLBV" href="#"><i class="icon-signout"></i>Aplicativos</a></li>
            <li><a class="liClassLBV" href="#"><i class="icon-signin"></i>Privacidade</a></li>
            <li><a class="liClassLBV" href="#"><i class="icon-signout"></i>Aplicativos</a></li>
            <li><a class="liClassLBV" href="#"><i class="icon-signin"></i>Privacidade</a></li>
        </ul>
    </div>
    <div class="longBarHorizontal">
        <ul class="req">
            <li><a class="liClassLBH" href="#"><i class="icon-envelope-alt"></i>Requisições</a></li>
        </ul>
    </div>
<body>  
</body>
</html>
html css

1 answer

1


Works by forcing the element to inline-block:

.req li a {
   display: inline-block;
}

  • It worked. Thank you SHC!

  • Jewel. Just accept the answer.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.