[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 831
  • Last Modified:

GUI problem with JSP application + IE7

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?
0
OliviaRedhorse
Asked:
OliviaRedhorse
  • 4
  • 2
3 Solutions
 
mrcoffee365Commented:
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:
* IE Developer Toolbar. http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Firefox:
* Javascript debugger from Venkman http://www.mozilla.org/projects/venkman/ .
* WebDeveloper https://addons.mozilla.org/en-US/firefox/addon/60
* View Source Chart https://addons.mozilla.org/en-US/firefox/addon/655 (you have to pay for the one which works with the latest Firefox, which I think is worth it, but YMMV of course.

0
 
mrcoffee365Commented:
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.
0
 
OliviaRedhorseAuthor Commented:
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"
"http://www.w3.org/TR/html4/loose.dtd">
 
 
 
<html>
    <head>
        <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">
    </head>
    <body>
        
        <div id="banner">
            <strong><font size="5">Test Page</font></strong><br>
        </div>
        
        <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="">
                <table>
                    <tr align="center"><td><font size="1"><a href=""></a></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>
                    <tr><td><font size="1">Text Here</font></td></tr>
                </table>
            </div>
        </div>
        
        <div id="center">
            <h1>Welcome to the test page!</h1>
            
            <p class="center">
            </p>
        </div>
        
    </body>
</html>

Open in new window

pageLayout-01-test.txt
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
mrcoffee365Commented:
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.

0
 
OliviaRedhorseAuthor Commented:
Thank you, I got it to work correctly.  I had to go through my CSS File to fix it.
0
 
mrcoffee365Commented:
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.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now