PDA

View Full Version : Weird problem



Timothy
Jun 12, 2008, 5:19 PM
Hello everyone,

I'm not sure if anyone can help me here, but perhaps someone has bumped into this. Check out the following:



<style type="text/css">
<!--//
.N { font-size: medium; font-weight: bold; margin: 2px 0px 20px 0px; }
.N .S { background-color: #ffff99; border: 1px solid #ffcc00; color: #333; padding: 10px; }
-->
</style>
<ExtJS:ScriptManager ID="ScriptManager2" runat="server" StateProvider="PostBack" Theme="Gray" />
<ExtJS:ViewPort ID="ViewPort" runat="server" Stateful="True">
<Content>
<ExtJS:AnchorLayout runat="server">
<ExtJS:Anchor>
<ExtJS:Panel runat="server">
<Content>
<div class="N"><div class="S">Example works in IE7/FF not IE6


</Content>
</ExtJS:Panel>
</ExtJS:Anchor>
</ExtJS:AnchorLayout>
</Content>
</ExtJS:ViewPort>


Works in IE7/FF but not IE6, like the styles of N and S get stripped.

Any help or insight would be greatly appreciated!

Cheers,
Timothy

Timothy
Jun 14, 2008, 9:14 AM
Anyone?

mindcore1
Jun 14, 2008, 10:37 AM
Try this.. The ExtJS:Panel must be wrapped in a form tag and since your doctype is xhtml, you shouldn't need the comment tags around the css in your style tags.




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ExtJS" %>

<!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">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.N { font-size: medium; font-weight: bold; margin: 2px 0px 20px 0px; }
.N .S { background-color: #ffff99; border: 1px solid #ffcc00; color: #333; padding: 10px; }
</style>
</head>
<body>
<ExtJS:ScriptManager ID="ScriptManager2" runat="server" StateProvider="PostBack" Theme="Gray" />
<form runat="server">
<ExtJS:ViewPort ID="ViewPort" runat="server" Stateful="True">
<Content>
<ExtJS:AnchorLayout runat="server">
<ExtJS:Anchor>
<ExtJS:Panel runat="server">
<Content>
<div class="N"><div class="S">Example works in IE7/FF not IE6


</Content>
</ExtJS:Panel>
</ExtJS:Anchor>
</ExtJS:AnchorLayout>
</Content>
</ExtJS:ViewPort>
</form>
</body>
</html>

Timothy
Jun 14, 2008, 1:42 PM
Thanks for the response, I took your suggestions and it still doesn't work right in IE6. Can you confirm that your example works in that browser?

Cheers,
Timothy

mindcore1
Jun 14, 2008, 2:33 PM
Unfortunately I don't have a copy of IE6 on my machine. Just to clarify, when you say the CSS gets stripped, are the styles still in the page source and being ignored, or does it appear that ASP.NET is stripping the styles out before sending the page to the browser?

Thanks
MindCore

Timothy
Jun 14, 2008, 2:48 PM
mindcore1 (6/14/2008)

Unfortunately I don't have a copy of IE6 on my machine. Just to clarify, when you say the CSS gets stripped, are the styles still in the page source and being ignored, or does it appear that ASP.NET is stripping the styles out before sending the page to the browser?

Thanks
MindCore


Attached is an example, to the left is FF3.0 (same with IE7) on the right is IE6.

Cheers,
Timothy

Timothy
Jun 14, 2008, 2:50 PM
The styles are being forwarded in the view source with IE6 they are not being stripped by ASP.NET.

You can actually see the styles render if you delay the render of the ViewPort, but once it is rendered it strips the styles away.

Sincerely,
Timothy

jumbot
Jun 14, 2008, 3:18 PM
Your Vesion is .net 3.0?

why is my code like ?<ext:ScriptManager??

Timothy
Jun 14, 2008, 3:19 PM
Microsoft .NET 2.0 and Coolite Ext 0.5.1

Cheers,
Timothy

jumbot
Jun 14, 2008, 3:29 PM
aha,I know what happended!
you renamed "TagPrefix"!

jumbot
Jun 14, 2008, 3:35 PM
~~~,i'm too tired to go to bed!

It's half past two am.here(china)!

geoffrey.mcgill
Jun 15, 2008, 6:21 AM
Hi Timothy,

Well, this is a tough one to figure out.

I've played with this for a while now and I can't make it work. For some reason the Panel is removing the background-color (and other) styles from the inner div, but as noted, only in IE6.

Even adding the styles inline and setting them to "!important" does not seem to work.

I've simplified a sample down to the basic html &amp; JavaScript and posted on the Ext forums.

http://extjs.com/forum/showthread.php?t=38580

I'll keep you updated with my progress.

geoffrey.mcgill
Jun 15, 2008, 8:27 AM
The community came though with the answer...

Add the following to your inline <style>...


.ext-ie6 .N .S { zoom: 1; }

Hope this helps.

Timothy
Jun 15, 2008, 11:07 AM
geoffrey.mcgill (6/15/2008)The community came though with the answer...

Add the following to your inline <style>...


.ext-ie6 .N .S { zoom: 1; }

Hope this helps.


Who would have thought? God, I love IE6 sometimes ;)

Thanks Geoffrey!

Cheers,
Timothy