qg_java_17137
qg_java_17137

Reputation: 3589

Mismatched property value ( | | auto | [initial | inherit | unset | revert])

I get error in my project, but I cannot find why get the error:

Mismatched property value ( | | auto | [initial | inherit | unset | revert]) less... (⌘F1)

This inspection detects illegal property's values.
Mismatched property value ([[ | ] && [border-box | content-box]?] | available | -moz-available | min-content | -moz-min-content | max-content | -moz-max-content | fit-content | -moz-fit-content | auto | [initial | inherit | unset | revert]) less... (⌘F1)

This inspection detects illegal property's values.

enter image description here

Where is the mistake ? I think my code is no problem.

My dode is below:

<%@ page language="java"  pageEncoding="UTF-8"%>

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath}/css/buttonstyle.css" type="text/css" rel="stylesheet">
<LINK href="${pageContext.request.contextPath}/css/MainPage.css" type="text/css" rel="stylesheet">
<script type='text/javascript' src='${pageContext.request.contextPath}/script/pub.js'></script>
<script type="text/javascript" src='${pageContext.request.contextPath}/script/validate.js'></script>
<SCRIPT type="text/javascript">
function ini(){
   document.all.name.focus();
}
function check(){
    var theForm = document.forms[0];
    if(Trim(theForm.name.value)==""){
            alert("type in the username");
            theForm.name.focus();
            return false;
        }
    theForm.submit();
    return true; 
}
function checkNumberImage(){
    var imageNumber = document.getElementById("imageNumber");
    imageNumber.src = "${pageContext.request.contextPath}/image.jsp?timestamp="+new Date().getTime();
}
function checkFunction(){
    return check();
}
</SCRIPT>
<STYLE type=text/css>
BODY { margin: 0px; }
FORM {
    MARGIN: 0px; BACKGROUND-COLOR: #ffffff
} 
</STYLE>
<title>elec title</title>
</head>
<body onload="ini()">
<form action="${pageContext.request.contextPath}/menu/home.jsp" method="post" target="_top">
<table border="0" width="100%" id="table1" height="532" cellspacing="0" cellpadding="0" >
    <tr>
        <td> </td>
    </tr>
    <tr>
        <td height="467">
        <table border="0" width="1024" id="table2" height="415" cellspacing="0" cellpadding="0" >
        <br><br><br><br><br>
            <tr>
                <td width=12%></td>
                <td align=center background="${pageContext.request.contextPath}/images/index.jpg">
                <table border="0" width="98%" id="table3" height="412" cellspacing="0" cellpadding="0">
                    <tr height=122>
                        <td colspan=2></td>
                    </tr>
                    <tr>
                        <td height="313" width="73%"></td>
                        <td height="99" width="27%">
                            <table border="0" width="70%" id="table4">
                                <tr>
                                    <td width="100"><img border="0" src="${pageContext.request.contextPath}/images/yonghu.jpg" width="75" height="20"></td>
                                    <td><input type="text" name="name" style="width: 125 px" size="20" value=""  maxlength="25"></td>

                                </tr>
                                <tr>
                                    <td width="100"><img border="0" src="${pageContext.request.contextPath}/images/mima.jpg" width="75" height="20"></td>
                                    <td><input type="password" name="password" style="width: 125 px" size="20" value=""  maxlength="25"></td>

                                </tr>

                                <tr>
                                    <td width="100"></td>
                                    <td width="100"><input type="button" class=btn_mouseout onmouseover="this.className='btn_mouseover'" onmouseout="this.className='btn_mouseout'" value="login" name="huifubtn" onclick="checkFunction()"></td>

                                </tr>
                            </table>
                        </td>
                    </tr>

                    </table>
                </td>
                <td width=13%></td>
            </tr>
            <tr>
              <td align="center" colspan=3>&nbsp;</td>
            </tr>
        </table>
        </td>
    </tr>
</table>
</form>
</body>
</html>

Upvotes: 3

Views: 16375

Answers (3)

slava_spetsyian
slava_spetsyian

Reputation: 11

I had the same issue in some Vue.js components with eslint enabled

position: 'absolute';

works fine after removing apostrophes

position: absolute;

Upvotes: 1

Stokely
Stokely

Reputation: 15887

Your style attributes should always be formatted like this to keep these IDE's from going bananas:

style="width:125px;"

Also, you assigned a size value that may conflict with your style value. Make sure it fits in the pixel value you assigned. I would not use pixels for dimensions on input elements and use "em" instead. It works in old and new browsers unlike "rem". Match the "em" or text count to the size count plus extra and you will never go wrong, like so:

<input type="text" name="name" style="width:25em;" size="20" value="" maxlength="25">

Upvotes: 0

user7693832
user7693832

Reputation: 6849

I saw your code is:

<td><input type="password" name="password" style="width: 125 px" size="20" value=""  maxlength="25"></td>

You should attention the css value should continuous: 125px should not have the space.

Upvotes: 4

Related Questions