GUI problem with JSP application + IE7

Posted on 2008-11-13
Last Modified: 2013-12-08
I created a JSP web application which displays correctly in Internet Explorer 6 and not in Internet Explorer 7.  The GUI is distorted.  What is the problem here and how can I fix it?  Any suggestions or resource documentation would be greatly appreciated.  Examples, if any.  Thank you for your input.

Could it be my CSS Style sheet not being read by IE7?  Or it is something in my Javascript?
Question by:OliviaRedhorse
    LVL 26

    Accepted Solution

    It doesn't have anything to do with JSP, it's the browsers.  

    I'm sure that IE7 is reading your css file.  It could be the Javascript or different behavior of the browsers in rendering.

    You're now in the phase of debugging page display in browsers, which is a pain.  If you can add zones to your question, I think the question would get more answers from Web Development or Javascript Zones.  The IE Web Browser zone seems like a good one, although I don't know how active it is.

    IE7 behaves more like Firefox in many ways, so you might want to debug in Firefox (which I think is much easier to debug in than IE).

    You'll get a lot more help with this if you can give a URL to the problem page.  If you can't give one to the real page, save the HTML source and obfuscate the data in it, and put it up somewhere public for people to look at.  Make sure that your .css and .js files are available to it.

    If you don't already have them, the following tools are invaluable for debugging rendering in browsers:
    * IE Developer Toolbar.

    * Javascript debugger from Venkman .
    * WebDeveloper
    * View Source Chart (you have to pay for the one which works with the latest Firefox, which I think is worth it, but YMMV of course.

    LVL 26

    Assisted Solution

    One more thing -- IE7, if you have certain security settings, requires you to specifically allow Javascript to be executed from a domain.  Try allowing Javascript to run from your page -- that might be your entire problem.

    Author Comment

    Here is a some code that can be looked.

    Here is what a simple version of my site looks like.  Attached is a copy of my css file.  Although the code from the .jsp file or the code below does not contain any javascripts, its display is distorted in IE7 and in FireFox.

    <%@page contentType="text/html"%>
    <%@page pageEncoding="UTF-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Test Page</title>
            <link rel="StyleSheet" href="pageLayout_01.css" type="text/css" media="screen">
            <div id="banner">
                <strong><font size="5">Test Page</font></strong><br>
            <div id="navigation">
                <h2><a href="">menu 1</a></h2>
                <h2><a href="">menu 2</a></h2>
                <h2><a href="">menu 3</a></h2>
                <h2><a href="" target="_blank">menu 4</a></h2>
                <div id="">
                        <tr align="center"><td><font size="1"><a href=""></a></font></td>
                        <tr><td><font size="1">Text Here</font></td></tr>
                        <tr><td><font size="1">Text Here</font></td></tr>
                        <tr><td><font size="1">Text Here</font></td></tr>
                        <tr><td><font size="1">Text Here</font></td></tr>
            <div id="center">
                <h1>Welcome to the test page!</h1>
                <p class="center">

    Open in new window

    LVL 26

    Assisted Solution

    Okay, the good news is as I thought, there's nothing related to JSP.   Even better, there's nothing related to Javascript.

    It looks to me as if you have to slog through the css directives and make them work in both Firefox and IE.  As I mentioned earlier, IE7 is closer to Firefox than IE6, and it's easier to debug in Firefox than IE, so you might start with Firefox.

    Get it working the way you want in Firefox, then try it in IE7 until it works there.  Check back in Firefox and IE6 to make sure that they still display correctly, and that should cover most browsers.

    Of the browsers you mentioned, IE6 is the least standard.  So it's the hardest to rely on for consistent display of your pages.  Also, with your JSP page, IE6 is reverting to quirks mode, which will change the behavior quite a bit.  IE7 will run in standards mode, which is another reason it looks more like Firefox.

    A tool like DreamWeaver can help with this, if you have access to it.

    Again -- since it turns out that you need CSS help, then the JSP and Servlets zones are not going to help much.  I'd be happy to look at pages as you work on them, though.

    Note:  The differences in your display might be related to the incorrect box model in IE6 quirks mode.  Again -- make your display work in Firefox, and it's much more likely to work in IE7, and it is usually easier to make that work in IE6 than the other way around.


    Author Comment

    Thank you, I got it to work correctly.  I had to go through my CSS File to fix it.
    LVL 26

    Expert Comment

    You're welcome.  It's always a pain to work through differences in browser display, so I'm glad you were able to find the problems in the CSS and fix them.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    "Realm" or "Domain" prompt 11 33
    endX challenge 2 33
    mapBully challenge 6 53
    Exception after setting jdbc session management 2 17
    I had to do a bit of research to find the answer to this question so I thought I'd share my results.  Due to our outdated mainframe systems, we need to downgrade IE9 to IE8 in order to stay compatible.  We also needed to downgrade Java.  In order to…
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

    734 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now