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?
OliviaRedhorseAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.