The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> IE11 won't apply CSS for <body> onload attribute selector
Duodecimalist
post Oct 23 2014, 03:17 PM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
I have a Web page generated by a server. I can't easily change the template that generates the page, but I can apply CSS to the page. The CSS has to apply to other pages as well, but the page I need to style has an "onload" attribute on the <body> element, so I'm targeting that in my CSS. More specifically the opening tag is
CODE
<body onload="dofocus();" onunload="mungeHistory();">

An example of the CSS is
CODE
body[onload="dofocus();"] {
  color: #001936;
}

IE (I'm using IE11) refuses to apply the style, but every other browser does. Well, that's not entirely true: IE will apply the style, but only after I've clicked somewhere on the page. I've tried CSS like
CODE
:root body[onload="dofocus();"] {
  color: #001936;
}

body[onload] {
  color: #001936;
}

* body[onload="dofocus();"] {
  color: #001936;
}

but nothing seems to get IE to apply the style except for a click on the page.

I'd appreciate any thoughts on this problem. The live page is not accessible, but I've got a copy of it at a demo page. If you view it in IE, click anywhere outside the main content of the page to get IE to apply the style. If you click on elements within the content of the page, IE will apply the styles just for those elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 23 2014, 03:58 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Don't have access to ie11 and can't test. So this is just a thought. Have you tried with just body[onload]?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 23 2014, 04:22 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Duodecimalist @ Oct 23 2014, 10:17 PM) *

IE (I'm using IE11) refuses to apply the style, but every other browser does. Well, that's not entirely true: IE will apply the style, but only after I've clicked somewhere on the page.

I made a simple test page, and IE9 (the newest one I got) supported the CSS.

QUOTE
The live page is not accessible, but I've got a copy of it at a demo page. If you view it in IE, click anywhere outside the main content of the page to get IE to apply the style. If you click on elements within the content of the page, IE will apply the styles just for those elements.

What do you see in IE11 that shouldn't be there? Compared with Firefox 31, my IE9 doesn't display the background image, the footer font looks different, and the "checkout area" has a white background instead of yellow. Clicking in my IE9 made no difference.

There's also a validator error (P element in HEAD section): http://validator.w3.org/check?uri=http://w.../sco/index.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duodecimalist
post Oct 23 2014, 04:42 PM
Post #4


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
QUOTE(pandy @ Oct 23 2014, 04:58 PM) *

Don't have access to ie11 and can't test. So this is just a thought. Have you tried with just body[onload]?

It may do the same thing in earlier versions of IE, too, but I only have IE11. Yes, I've tried all sorts of variations on body[onload]. I haven't played around yet to see whether it's a more general problem with IE not liking any attribute selector on the body element, though I can't imagine it would be. You never know with IE, though.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 23 2014, 04:52 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
What doctype is used? I found a note about IE not supporting attribute selectors when in quirks mode.

http://msdn.microsoft.com/en-us/library/ie...2(v=vs.85).aspx
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duodecimalist
post Oct 23 2014, 05:14 PM
Post #6


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
QUOTE(Christian J @ Oct 23 2014, 05:22 PM) *

QUOTE(Duodecimalist @ Oct 23 2014, 10:17 PM) *

IE (I'm using IE11) refuses to apply the style, but every other browser does. Well, that's not entirely true: IE will apply the style, but only after I've clicked somewhere on the page.

I made a simple test page, and IE9 (the newest one I got) supported the CSS.

I'll have to see if I can find a machine with IE9 on it to test. The person who will be using this said she has IE7, but I suspect she meant she's using IE on Windows 7.
QUOTE(Christian J @ Oct 23 2014, 05:22 PM) *

QUOTE
The live page is not accessible, but I've got a copy of it at a demo page. If you view it in IE, click anywhere outside the main content of the page to get IE to apply the style. If you click on elements within the content of the page, IE will apply the styles just for those elements.

What do you see in IE11 that shouldn't be there? Compared with Firefox 31, my IE9 doesn't display the background image, the footer font looks different, and the "checkout area" has a white background instead of yellow. Clicking in my IE9 made no difference.

There's also a validator error (P element in HEAD section): http://validator.w3.org/check?uri=http://w.../sco/index.html

It's mostly a matter of IE not showing styling that should be there. The background image and gradient aren't shown in IE, the yellow background on the card number box isn't shown, the layout is wrong, the institutional logo in the bottom right corner shouldn't be shown. Interestingly the styles that are applied to the unqualified body element are being rendered; it's just the styles for the body element qualified with the onload attribute that aren't getting styled.

The validator error about the P element in the HEAD section is for some commented-out javascript. The page probably isn't completely valid HTML, but I have no control over it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duodecimalist
post Oct 23 2014, 05:18 PM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
QUOTE(pandy @ Oct 23 2014, 05:52 PM) *

What doctype is used? I found a note about IE not supporting attribute selectors when in quirks mode.

http://msdn.microsoft.com/en-us/library/ie...2(v=vs.85).aspx

I double checked the live page and it's being served as <!DOCTYPE html>, so that shouldn't be the problem.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 23 2014, 05:30 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Duodecimalist @ Oct 24 2014, 12:14 AM) *

I'll have to see if I can find a machine with IE9 on it to test. The person who will be using this said she has IE7, but I suspect she meant she's using IE on Windows 7.

Can IE11 emulate earlier IE versions (press the F12 key to open its developer tools)? Otherwise you could always download http://www.my-debugbar.com/wiki/IETester/HomePage which use to give accurate rendering of earlier versions.

QUOTE
It's mostly a matter of IE not showing styling that should be there. The background image and gradient aren't shown in IE

The above may not be supported by IE9, even though my IE9 does support onload as an attribute selector. I haven't examined the other styling.

QUOTE
The validator error about the P element in the HEAD section is for some commented-out javascript.

No, it's the P inside this NOSCRIPT element:

CODE
<noscript><p><img src="http://piwik.ptfs-europe.com/piwik.php?idsite=6" style="border:0" alt="" /></p></noscript>


Why not make a minimal test page somewhere else (e.g. on your local computer)? Then you can test if IE11 supports the attribute selector while ruling out other error sources. You can also make sure IE11 isn't confused by the validator error or any of the jQuery/javascript on the page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 24 2014, 03:15 AM
Post #9


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
IE 7+ should support the attribute selector:
http://caniuse.com/#feat=css-sel3
http://www.quirksmode.org/css/selectors/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duodecimalist
post Oct 24 2014, 10:05 AM
Post #10


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
It's looking to me like this is a bug in IE. I've got three pages with a lot of extraneous HTML and CSS removed or commented out. The HTML and CSS validate. In the second and third versions, I added an ID to the BODY tag.

http://www3.nd.edu/~fboze/sco/simple.html
Selector in the form of -- body[onload="dofocus();"]
CSS is not applied in IE11

http://www3.nd.edu/~fboze/sco/simple2.html
Selector in the form of -- body#testid
CSS is applied in IE11

http://www3.nd.edu/~fboze/sco/simple3.html
Selector in the form of -- body[id="testid"]
CSS is applied in IE11

I thought maybe IE was having trouble in general with attribute selectors on the BODY tag, so I tried both forms of expressing the ID. The only one that IE has trouble with is the "onload" attribute.

The one thing that's changed is that on the simplified page simple.html, IE won't render the CSS even if I click on the page, unlike it previously did. However, if I open the Developer Tools (F12), and click on the elements in the DOM Explorer pane, the CSS will start to apply to each element I click on.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2014, 01:21 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
That's still a pretty complex stylesheet, I was thinking of something very basic to test the selector, like this test page:

CODE
<!doctype html>
<title>test</title>
<style type="text/css" media="screen">
body[onload="dofocus();"] {
  color: blue;
  background: pink;
}
</style>
</head>
<body onload="dofocus();" onunload="mungeHistory();">
some text
</body>
</html>

Or you could simply remove content until you find the bug. While I did that, I noticed that both the large background photo:

CODE
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.7) 40%,rgba(255,255,255,0.7) 100%), url("https://www3.nd.edu/~fboze/2012%20London%20Scenic%203_ab.jpg");

and the yellow box:

CODE
background: linear-gradient(to bottom, #fef8d3 0%, #ffec91 9%, #ffed87 89%, #f9dc00 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);

use CSS3 background linear-gradient values, that at least IE9 does not support. Don't know about IE11, but try replacing them with simpler CSS just to make sure. Ditto for viewport units like this one:

CODE
max-width: 100vw;
max-height: 100vh;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duodecimalist
post Oct 24 2014, 01:43 PM
Post #12


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
IE11 should support all of the CSS in my stylesheet. It renders all the CSS if I target something other than the ONLOAD attribute on the BODY tag.

I've reduced the CSS and HTML even further as you suggested, and I'm still seeing the same problem in IE11. I find it interesting that IE will apply the CSS in the Developer Tools as I click on the elements, but not when the page loads. IE must handle the ONLOAD attribute differently than other attributes somehow.

http://www3.nd.edu/~fboze/sco/simple4.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2014, 02:04 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Duodecimalist @ Oct 24 2014, 08:43 PM) *

I've reduced the CSS and HTML even further as you suggested, and I'm still seeing the same problem in IE11. I find it interesting that IE will apply the CSS in the Developer Tools as I click on the elements, but not when the page loads. IE must handle the ONLOAD attribute differently than other attributes somehow.

http://www3.nd.edu/~fboze/sco/simple4.html

FWIW, that page works in IE9...

QUOTE
IE must handle the ONLOAD attribute differently than other attributes somehow.

Maybe IE11 confuses it with its old "CSS expressions", but that seems like a long shot.

I also recall some browser could run actual javascript in STYLE elements (against all common sense), but I can't remember which one (this was many years ago).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Oct 24 2014, 04:37 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
QUOTE
Maybe IE11 confuses it with its old "CSS expressions", but that seems like a long shot.

Maybe because onload is a javascript function rather than a attribute in the sense of CSS attribute selectors.

QUOTE
I also recall some browser could run actual javascript in STYLE elements (against all common sense), but I can't remember which one (this was many years ago).

Sounds strange to me. All I can find is how to set/change CSS styling with javascript. Let me know if you recall.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2014, 04:51 PM
Post #15


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Frederiek @ Oct 24 2014, 11:37 PM) *

QUOTE

I also recall some browser could run actual javascript in STYLE elements (against all common sense), but I can't remember which one (this was many years ago).

Sounds strange to me. All I can find is how to set/change CSS styling with javascript. Let me know if you recall.

I think I mentioned it on this forum, perhaps something like

CODE
<style>
alert('foo');
</style>

<script>
body {color: red;}
</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 24 2014, 05:45 PM
Post #16


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Christian J @ Oct 24 2014, 09:04 PM) *

I also recall some browser could run actual javascript in STYLE elements (against all common sense), but I can't remember which one (this was many years ago).


I don't recall that, but it would make some kind of sense if it was Netscape.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2014, 06:27 PM
Post #17


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Duodecimalist @ Oct 24 2014, 08:43 PM) *

I find it interesting that IE will apply the CSS in the Developer Tools as I click on the elements, but not when the page loads.

Not sure I understood the above, how does Developer Tools affect things?

BTW make sure your IE11 copy is not emulating an older IE version (in Developer Tools). Also check that you don't use any browser extension that interferes with the page's styling or DOM tree somehow (not sure how extensions work in IE). Have you tested IE11 on some other PC?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 24 2014, 06:30 PM
Post #18


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(pandy @ Oct 25 2014, 12:45 AM) *

it would make some kind of sense if it was Netscape.

Yes, JSSS. It could have been that. Afraid my copy of NS4 is gone with the wind. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Duodecimalist
post Oct 24 2014, 10:35 PM
Post #19


Newbie
*

Group: Members
Posts: 11
Joined: 23-October 14
Member No.: 21,713
QUOTE(Christian J @ Oct 24 2014, 07:27 PM) *

QUOTE(Duodecimalist @ Oct 24 2014, 08:43 PM) *

I find it interesting that IE will apply the CSS in the Developer Tools as I click on the elements, but not when the page loads.

Not sure I understood the above, how does Developer Tools affect things?

BTW make sure your IE11 copy is not emulating an older IE version (in Developer Tools). Also check that you don't use any browser extension that interferes with the page's styling or DOM tree somehow (not sure how extensions work in IE). Have you tested IE11 on some other PC?

So far, Developer Tools is the only way I've found to get the CSS to render. If I load this page http://www3.nd.edu/~fboze/sco/simple5.html in IE11, the CSS is ignored. Black text on a white background instead of blue text on a pink background. If I open Developer Tools, various things will cause the CSS to render in the page. If I switch from Edge (IE11) mode to IE10 mode, the CSS renders. If I switch back to Edge mode, the CSS remains rendered. On my office PC (but not my home PC) if I click on a P element in the DOM Explorer, the CSS for that element is rendered in the page. If I close IE, then open it again and load the page, no CSS is rendered until I once again open Developer Tools and change the mode, etc.

I'm using IE11 on two 64-bit machines with pretty much the same results. They're not configured to emulate any other version of IE. I never use IE except to occasionally test a page I'm working on, so I've never added any extensions and all the configuration options are as they were when the OS was first installed.

I'll just have to figure some way of styling that page without targeting the ONLOAD attribute. It's too bad I can't easily change the HTML, then I could add an ID attribute to the BODY and target that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 25 2014, 05:33 AM
Post #20


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
Can you edit any of the external javascript files? If so you might use that to add an ID for that particular web page's URL.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 10:41 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC