PDA

View Full Version : All grey background in IE when using Ext.Msg() and Ext.LoadMask()



rrandymeyer
29 Apr 2011, 9:25 AM
When running in IE my Ext.Msg() and Ext.LoadMask() make the background go completely grey instead of transparent. It works fine in FF. I have searched the forums without luck to resolve this issue. My client is required to use IE so I would really like to fix this as it does not look very nice. Is there a stylesheet update or something to resolve it?

Thank you.

rrandymeyer
3 May 2011, 4:27 AM
Hi guys, No one else has seen this? Can anyone provide a suggestion as to where I should look? Is it possible I am not including a necessary css? Thanks again.

friend
3 May 2011, 6:48 AM
What version of IE?

rrandymeyer
3 May 2011, 8:57 AM
IE8

pmatsumura
3 May 2011, 12:38 PM
Can you show us a screen shot?

rrandymeyer
4 May 2011, 4:53 AM
I have attached 2 screenshots, this is from the login screen. Here is the code:


function submitLogin() {
var mask1 = new Ext.LoadMask('loginform', {msg:'logging in..'});
mask1.show();
Ext.getCmp('loginform').getForm().submit({
success: function(form, action){
var mask2 = new Ext.LoadMask('loginform', {msg:'loading main page..'});
mask2.show();
window.location = 'welcome.action';
},
failure: function(form, action){
mask1.hide();
Ext.Msg.alert('Login Failed', 'Invalid username and/or password.');
}
});
}

pmatsumura
4 May 2011, 5:21 AM
Please post the HTML code of your webpage.

rrandymeyer
4 May 2011, 5:47 AM
Here you go. This is part of a Struts2 project.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/tps.css" charset="ISO-8859-1"/>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
// Path to the blank image must point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
</script>

<script language="javascript" src="login.js"></script>
<title>My Project Solutions</title>

</head>
<body>
<table border=0 cellPadding=0 cellSpacing=0 width="100%" height="100%">
<tr valign="top">
<td>
<table border=0 cellPadding=0 cellSpacing=0 width="100%">
<tr>
<td align="center">
<a href='http://www.myproject.com' target='new'><img src='images/welcome.jpg' border=0 /></a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="100%">
<td valign="middle" align="center" >
<table border=0 cellPadding=0 cellSpacing=0 align="center">
<tr><td id="loginui"></td></tr>
</table>
</td>
</tr>
<tr valign="bottom">
<td>
<center class="footertxt">Copyright &copy; 2011&nbsp;<a href='http://www.myproject.com' target='new'>My Project Solutions</a>&nbsp;All rights reserved.&nbsp;Version: <s:property value="systemInformation.version" />&nbsp;Build: <s:property value="systemInformation.build" /></center>
</td>
</tr>
</table>
</body>
</html>


I used a panel in place of a window so it would stay in place and centered within the browser window.


Ext.onReady(function() {
win = new Ext.Panel({
id: 'mainpanel',
frame: true,
shadow: false,
width: 400,
height: 175,
title:"My Application",
items: [loginForm],
renderTo : 'loginui'
});
Ext.getCmp('username').focus(true, 100);
});

pmatsumura
4 May 2011, 5:52 AM
Please try this doctype definition:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
As far as I know, IE8 has problems rendering CSS transparency when in strict mode.

rrandymeyer
4 May 2011, 6:25 AM
I updated my login.jsp so the header information is like this:



<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags" %>
<html xmlns="http://www.w3.org/1999/xhtml">


Unfortunately the behavior is still the same. :(

pmatsumura
4 May 2011, 6:37 AM
What happens when omitting the JSP-tags?

rrandymeyer
4 May 2011, 6:44 AM
I had tried that also. It made no difference.

friend
4 May 2011, 6:48 AM
Can you Firefox/Firebug the CSS and see if anything's being overridden?

rrandymeyer
4 May 2011, 7:04 AM
My stylesheet contains these styles:

* {
margin: 0;
}

html, body {
font-family: Verdana,Helvetica,sans-serif;
height: 100%;
}

.footertxt {
font-family: Verdana,Helvetica,sans-serif;
font-size: small;
}

.app-msg {
font-family: Verdana,Helvetica,sans-serif;
font-size: x-small;
font-weight: normal;
}

In firebug my margin is overridden and none of the ext-all.css styles are overridden.

rrandymeyer
4 May 2011, 11:33 AM
As a separate test I used the login example from the ExtJS Tutorial:Basic Login (http://www.sencha.com/learn/Tutorial:Basic_Login). I used my entry point as index.html and the login.jsp version. I deployed this on apache-tomcat-6.0.26. This shows the same behavior on IE8, works fine in FF 4.01.

The folder structure is this:



webapp/ExtJsLoginTest
/ext
/adapter
/ext
/ext-base.js
/resources
/css
/ext-all.css
/images
/default
/ext-all.js
/WEB-INF
/web.xml
/index.html
/login.js
/login.jsp

pmatsumura
5 May 2011, 12:59 AM
What does it look like on an other computer?

rrandymeyer
5 May 2011, 4:59 AM
Installed Tomcat and the sample on a diff box (XP, IE8) - looks perfect! This is good news as then I can hope it looks good for my client. Do you have any ideas what sort of setting on my dev pc is mucking this up? (XP, IE8)

rrandymeyer
5 May 2011, 1:08 PM
I was able to hit the server running on my dev pc from another pc using IE and all looks good. So there is something on my localhost that causing the issue.

pmatsumura
5 May 2011, 10:45 PM
The only thing I can think of, is that your IE8 installation/configuration is messed up. Maybe reinstalling or setting the config values to defaults helps.