navigation bar css changes after a servlet is called

Question

Before: enter image description here

After enter image description here

The first image is of the login page, but when I click login button the navigation bar becomes like the second picture, spaces appear between the blocks. This happens when a sevlet is called and has this code:

out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
            RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
            rd.include(request, response);

The CSS code is:

#menuli{
display: inline;
float: left;
color: #CCCCCC;
}

#menuA,#menuAL {
display: block;
width: 180px;
padding: 10px;
color: #FFFFFF;
font-size: x-large;
font-variant: normal;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin: 10;
text-decoration: none;
opacity: 0.9;
border-spacing:0;

border-collapse:collapse;
text-align: center;
background-color: #000033;
/*font-weight: bold;
/*border-radius: 20px;*/
}
#menuA:hover, #menuAL:hover
{
/*color: #699;*/

background-color: #003;
/*text-shadow: 10px 0px 10px;   */
font-weight: bold;
background-image: -webkit-gradient(linear, 50.00% 0.00%, 50.00% 100.00%, color-stop( 0% , rgba(65,62,110,1.00)),color-stop( 40.94% , rgba(7,5,53,1.00)),color-stop( 49.74% , rgba(9,8,56,1.00)),color-stop( 100% , rgba(12,11,60,1.00)),color-stop( 100% , rgba(54,56,116,1.00)));
background-image: -webkit-linear-gradient(270deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
background-image: linear-gradient(180deg,rgba(65,62,110,1.00) 0%,rgba(7,5,53,1.00) 40.94%,rgba(9,8,56,1.00) 49.74%,rgba(12,11,60,1.00) 100%,rgba(54,56,116,1.00) 100%);
}
#menu
{
position: absolute;
top: 126px;
left: 139px;
}

The JSP code is:

<div name="header" id="header">
    <img id="logo" style="position:absolute; left:145px; top:10px; "src="images/logo.jpg">
        <div id="menu" >
        <ul>
            <li id="menuli"><a id="menuA" href="index.jsp#header">Home</a></li>
            <li id="menuli"><a id="menuA" href="index.jsp#services">Services</a></li>
            <li id="menuli"><a class="prod" id="menuA" href="Display?course=6">Products</a>

            </li>
            <li id="menuli"><a id="menuA" href="index.jsp#contact">Contact</a></li>
            <li id="menuli"><a id="menuA" href="index.jsp#about">About</a></li>
        </ul>
    </div>
</div>

It's happening with all the pages after any servlet includes it.

Please see the links for images.

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

Printing the html content inside servlet is considered as bad practice . you can rather set the attribute in the request . so instead of this ,

out.print("<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>Sorry username or password error! </p>");
            RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
            rd.include(request, response);

use,

request.setAttribute("message","Sorry username or password error!");
            RequestDispatcher rd=request.getRequestDispatcher("login.jsp");
            rd.include(request, response);

And try to print the message in the jsp page,

simply using the scriptlet as ,

<p style='position:absolute;top:200px;left:300px;color:#CC0066;'><%=message></p>

or using EL

<p style='position:absolute;top:200px;left:300px;color:#CC0066;'>${message}</p>

using scriptlets are also considered to be bad practices since a decade . see this How to avoid java codes inside jsp

Hope this helps !!

edited May 23 '17 at 10:32

Community

1
1

answered Jul 10 '14 at 12:14

Santhosh

8,181
4
29
56

the change in CSS was due to this code? This would work? – user63762453 Jul 10 '14 at 12:25
the answer is in general . But you could eliminate the issue if you follow in above way . i guess `position:absolute` is the problem in your code . try changing it to relative – Santhosh Jul 10 '14 at 12:28
using what you said is working. But i will have to do it in the whole project. bdw what do you mean by position:absolute is the problem?? What should i replace it with? – user63762453 Jul 10 '14 at 12:33
well removing `position:absolute` does not changes anything. so i don't think the problem is there. – user63762453 Jul 10 '14 at 12:37
Have tried replacing it to `position:relative` . what do you say as working does that avoid your problem – Santhosh Jul 10 '14 at 12:41
Got it fixed. I had `margin:10px` in the CSS part of the navigation bar. Removed it and the problems are all gone. But I wonder why the margin thing wasn't visible first (Before calling servlet). – user63762453 Jul 14 '14 at 08:49
1

Because you don't have any thing inside it . margin is for the elements inside the div and not for the div – Santhosh Jul 14 '14 at 08:53
But what i m asking is that whatever the margin was for, it should remain unchanged even after any servlet call, but it changed. – user63762453 Jul 14 '14 at 08:56
1

Because you were appending a new paragraph to the existing html through the response from servlet which caused distortion . – Santhosh Jul 14 '14 at 08:59

score 1 · Accepted Answer · answered Jul 14 '14 at 08:50

1

Got it fixed. I had margin:10px in the CSS part of the navigation bar. Removed it and the problems are all gone.

:)

answered Jul 14 '14 at 08:50

user63762453

1,734
2
22
44

navigation bar css changes after a servlet is called

2 Answers2