Element does not accept the property "height" nor "min-height"

Question

Element does not accept the property "height" nor "min-height"

Navigation

#1 by (1 votes)

0

I have the following file with HTML, CSS and JavaScript codes, my problem is the following: There at the end of the file, I have a <ul class="req"> tag and inside it I have a <li> , the problem is that the height property I'm trying to use in that location does not work, the attempt to use the height property is within that block of code, I have tried to use height and min-height and it still does not work.

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

File:

<!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

asked by anonymous 16.05.2017 / 17:05

1 answer

Insert video in HTML after 10 seconds using Javascript Gradient Xamarin Forms

score 1 · Accepted Answer

1

It works by forcing the element to inline-block:

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

16.05.2017 / 17:32