javacssjspcss-positionjspinclude

<jsp:include> not respecting position styles of the jsp included

I have an index.jsp which includes header.jsp by <jsp:include>. The doc header.jsp has 2 elements that I've positioned at the bottom right corner. If I execute the header file as .html, both elements are positioned correctly, but when I execute index.jsp both items are at the top right corner ignoring just the position style because, as you can see, the loginButton and messageLabel divs still have the rest of their styles.

This is what I see if I execute the header like an html (I see it properly): enter image description here

And this is what I see if I execute the index.jsp in my local server: enter image description here

The index.jsp:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <jsp:include page="header.jsp" />
        <h1>Hello World!</h1>
    </body>
</html>

The header.jsp:

<link rel="stylesheet" type="text/css" href="Resources/Styles/headerStyles.css" />
<header id="header">
    <label id="messageLabel">User not registered</label>
    <div id="loginButton">
        Login
    </div>
</header>

The headerStyles.css:

#header {
    background-color: yellow;
    width: 100%;
    height: 92px;
}

#loginButton {
    position: absolute;
    right: 8;
    top: 60;
    background-color: darkorange;
    height: 40px;
    width: 80px;
    text-align: center;
    line-height: 40px;
    font-weight: bolder;
    font-size: 15pt;
}

#messageLabel {
    position: absolute;
    right: 100;
    top: 70;
}
Solution

  • OK, I got it. You only have to specify the unit of measurement in attributes right and top like this:

    #header {
    background-color: yellow;
    width: 100%;
    height: 92px;
}

#loginButton {
    position: absolute;
    right: 8px;
    top: 60px;
    background-color: darkorange;
    height: 40px;
    width: 80px;
    text-align: center;
    line-height: 40px;
    font-weight: bolder;
    font-size: 15pt;
}

#messageLabel {
    position: absolute;
    right: 100px;
    top: 70px;
}

    It seems measures must be followed by their proper unit of measurement correctly specified. It's quite strict.