My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
<object> in <head>
I was reading up on a bunch of stuff based on HTML, CSS, and others and came across this:http://www.howtocreate.co.uk/wrongWithIE/?chapter=Object+Tags
According to this, if one puts an Object tag with an image in the header, the image shouldn't appear. I tried putting a .png file in the header using the object tag, but contrary to the page, the image did appear (in Opera, Firefox, and Safari). So I did some searching around and found this:
http://www.w3.org/TR/html4/struct/objects.html
Even after reading through it, I don't think I still understand what is supposed to be the intended outcome of having an object tag with a picture in the head tag.
Have you read this?
http://www.w3.org/TR/html4/present/frames.html#sharing-frame-data
http://www.w3.org/TR/html4/present/frames.html#sharing-frame-data
Easter Woman came today and took away my wife
Took her through an open doorway to the afterlife
(9.2/8713-1152x864x32-XP.P.SP2)
Took her through an open doorway to the afterlife
(9.2/8713-1152x864x32-XP.P.SP2)
Originally posted by Meophist:
Even after reading through it, I don't think I still understand what is supposed to be the intended outcome of having an object tag with a picture in the head tag.
In HTML, if you put something in the head that tells the browser to render something, it will. The spec doesn't say that browsers must not render stuff in the head. It only says that they generally don't, which as you've found, is off according to current browser behavior.
If you want to put an object in the head to preload an image ( in the head, because you don't consider the preload object to be content, because it's not to be rendered ), just use width="0" and height="0" so it still loads, but doesn't take up any space. ( Firefox is the only one that properly collapses a 0 x 0 object though. Other browsers leave a tiny bit of space. )
You don't have to preload in the head though. You can do it in the body if you want.
You might also want to put an object in the head that loads an applet that is only meant to be loaded and not rendered. Or, you might have a script in the head that needs to access the applet. Therefore, the applet needs to come before the script unless you use an event listener etc.
Also there's the frameset deal as already mentioned.
Also, you can declare objects in the head and initialize them later. ( Support for this is slim though. )
You should probably keep away from putting objects in the head. It doesn't work with XHTML ( served as application/xhtml+xml ).
Thank you very much. I've found some lag when I changed images via JavaScript so I looked up some pre-loading methods. After some experimenting, I found that putting the image into an img tag with 'style="visibility:hidden;"' seems to work pretty well. Opera seems to load it without taking up any space, which is nice.
I came across the website later which said I could use an object tag in the head tag to preload images. When it didn't work, I checked the next website which failed to say why. I tried hiding the object images with 'style="visibility:hidden;"' but they still take up space for some reason.
Oh yes, you said that when a browser is told to render something in the head tag, it will. Does that include other elements and their contents, such as p tags?
I came across the website later which said I could use an object tag in the head tag to preload images. When it didn't work, I checked the next website which failed to say why. I tried hiding the object images with 'style="visibility:hidden;"' but they still take up space for some reason.
Oh yes, you said that when a browser is told to render something in the head tag, it will. Does that include other elements and their contents, such as p tags?
Originally posted by Meophist:
Oh yes, you said that when a browser is told to render something in the head tag, it will. Does that include other elements and their contents, such as p tags?
I won't say all, but <div>test</div> in head shows.
Originally posted by AutisticCuckoo:
That's invalid. Paragraphs and DIVs cannot legally occur in the HEAD.
Correct
Originally posted by burnout426:
I won't say all, but
testin head shows.
No, it doesn't!
In SGML, DIV implicitly closes HEAD, and the parser has to add the BODY element. So DIV there is not strictly speaking in the HEAD, but in BODY, where it's supposed to be shown. The end tag for HEAD is ofcourse invalid, but the parser can deal with this situation.
OBJECT also closes HEAD, just like any other element that's not supposed to be in HEAD.
If you try it in xhtml, it won't be shown, as there are no elements to be added by the parser.
Wow, you're right. I should have read it again.
I could see Object being used to start a sound or something, but well, both Opera and FireFox switch out of HEAD when there is an OBJECT start tag. Also the html 5 parsing model is the same as what Opera and Firefox do. IE doesn't end HEAD. Bugs in Opera and FF. Maybe whatwg should also be told this.
But an Object with any content in it inside HEAD is non-conformant and since the specification doesn't talk about what should be done, the browser has to invent it.
I could see Object being used to start a sound or something, but well, both Opera and FireFox switch out of HEAD when there is an OBJECT start tag. Also the html 5 parsing model is the same as what Opera and Firefox do. IE doesn't end HEAD. Bugs in Opera and FF. Maybe whatwg should also be told this.
But an Object with any content in it inside HEAD is non-conformant and since the specification doesn't talk about what should be done, the browser has to invent it.
8. August 2006, 20:15:01 (edited)
I decided to experiment a little and pased the following code through w3.org's validator.
...you know, I did this thinking it'll clear something up in how this is supposed to work. It doesn't. I saved it as "blash.html" and decided to modify the object tag a bit:
It still validates correctly, but the rendering is... wierd. It renders the same in Opera and Firefox, but differently in Safari. I think I'm just getting really confused right now...
Edit: To answer the aside, I tried that, but the browser failed to pre-cache the image (for an img tag). So I did "visibility: hidden;" instead and the element didn't take up any space anyways. However, when I tried to do "visibility: hidden;" on the object tag which I tried replacing the img tag with, the tag still took up space. Weird stuff.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <object data="logo.gif" type="image/gif"></object> <title>Blash</title> </head> <body> <p> </body> </html>According to it, this is perfectly valid code. Checking it Opera, Safari and Firefox, the image renders and the title tag works.
...you know, I did this thinking it'll clear something up in how this is supposed to work. It doesn't. I saved it as "blash.html" and decided to modify the object tag a bit:
<object data="blash.html" type="text/html"></object>...and I also put "Hello, World!" after the <p> tag just so that I'll have visible content.
It still validates correctly, but the rendering is... wierd. It renders the same in Opera and Firefox, but differently in Safari. I think I'm just getting really confused right now...
Edit: To answer the aside, I tried that, but the browser failed to pre-cache the image (for an img tag). So I did "visibility: hidden;" instead and the element didn't take up any space anyways. However, when I tried to do "visibility: hidden;" on the object tag which I tried replacing the img tag with, the tag still took up space. Weird stuff.
Originally posted by Snover:
As an aside to this discussion, if you want an element to collapse (take up no space, like width : 0; height : 0;), you should use display : none;.
Note that this won't work for preloading, as Opera (and possibly other browsers) will save time & bandwidth by not downloading something that it knows won't be displayed.
Can Opera users and Firefox fans agree on anything? The Alternative Browser Alliance.
Comics fans: Follow the Flash at Speed Force.
Comics fans: Follow the Flash at Speed Force.
Originally posted by JeroenH:
In SGML, DIV implicitly closes HEAD, and the parser has to add the BODY element. So DIV there is not strictly speaking in the HEAD, but in BODY, where it's supposed to be shown.
Yes, you are correct. The end result is that the div or object is in the body and you're left with a stray </head>.
Originally posted by Snover:
As an aside to this discussion, if you want an element to collapse (take up no space, like width : 0; height : 0;), you should use display : none;.
But, as Kelson mention, Opera won't load the object until you switch to a different display state, which would defeat the purpose of preloading.
Originally posted by JeroenH:
Maybe whatwg should also be told this.
Ask on the list just to be sure. I'll participate.
However Konqueror does the same thing as Opera and Firefox.
I can see this being a problem if I have an object in the head (text/html) and a style sheet right after it. I may have a script that looks for the stylesheet by document.getElementsByTagName("head")[0].getElementsByTagName("style")[0] that would fail in this situation because the stylesheet would actually be in the body. (Unless of course I know it ends up in the body.)
In short, because of current browser behavior, we should probably keep object out of head even if the end result works and even if the spec says that it can be there.
I'd rather have it where div and object etc. do not close the head and are loaded, but just not displayed.
You guys are confusing me. So basically, what you're saying is... if an element that normally goes into the Body tag appears in the Head tag, the specification asks the browser to close the Head tag, start a Body tag, then start the tag. Correct? The current browsers recognise the Object tag as a Body-only tag and thus uses this behaviour. Wouldn't this be considered a bug for the browsers as the Object tag is allowed in the head? What's supposed to happen anyways? Also, W3C's specification states that most browsers don't render things in the Head tag. Is this true or false?
This is all so confusing... if a page goes through W3C's validator alright, it means the page is free of errors, right?
This is all so confusing... if a page goes through W3C's validator alright, it means the page is free of errors, right?
Try this. That should show you what's happening.
Generally, it only means that the page doesn't break any markup rules specfied by the dtd you're validating against.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<object></object>
<script>
window.onload = function() {
alert( "content of head:\n" + document.getElementsByTagName("head")[0].innerHTML );
alert( "content of body:\n" + document.body.innerHTML );
};
</script>
</head>
<body>
</body>
</html>
Originally posted by Meophist:
This is all so confusing... if a page goes through W3C's validator alright, it means the page is free of errors, right?
Generally, it only means that the page doesn't break any markup rules specfied by the dtd you're validating against.
9. August 2006, 02:56:39 (edited)
Originally posted by Meophist:
Also, W3C's specification states that most browsers don't render things in the Head tag. Is this true or false?
That's true. If the object was to stay in the head, it wouldn't be displayed or loaded. To get it to stay in the head, you have to append it to the head with js. To get it to load in the head you have to change the head element's display to something else besides 'none'.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script>
window.onload = function() {
alert( "content of head:\n" + document.getElementsByTagName("head")[0].innerHTML );
alert( "content of body:\n" + document.body.innerHTML );
};
</script>
</head>
<body>
<script>
var obj = document.createElement("object");
obj.setAttribute("type", "image/gif");
obj.setAttribute("data", "http://www.google.com/images/logo.gif");
obj.setAttribute("width", "300px");
obj.setAttribute("height", "300px");
obj.appendChild( document.createTextNode( "You won't see this" ) );
document.getElementsByTagName("head")[0].appendChild( obj );
</script>
</body>
</html>
Originally posted by Meophist:
Would this be considered a bug for the browsers as the Object tag is allowed in the head?
Maybe, but I think this is intended behavior. It allows you to put object markup in the head and have it load. It may end up in the body ( otherwise it wouldn't load because head is set to display:none), but it works out mostly because even if the object closes the head before a title element or script or stylesheet is read, they'll all still work in the body except for some weird cases.
What should really happen is that objects should stay in the head ( in collapsed form) and objects in the head should still be able to download their content even though head is set to display: none, but that currently doesn't happen.
edit:
If you want to preload with object or img, I suggest something like this:
<!DOCTYPE html>
<html>
<head>
<title>preload images with object</title>
<style type="text/css">
div#preloadbox, div#preloadbox * {
visibility: hidden;
display: block;
width: 0;
height: 0;
padding: 0;
margin: 0;
border: 0;
}
</style>
</head>
<body>
<div id="preloadbox">
<object type="image/gif" data="http://www.google.com/images/logo.gif"></object>
</div>
<div>text</div>
</body>
</html>
Hey, wait! It works! ...alright, it1 doesn't really work, because the Head tag is defaulted to "display: none", but you can hide objects in the Head tag! It seems this only works in XHTML, which is pretty strange to me. Of course, with some styling, it should be easy to allow the objects to be pre-loaded.
1: Pre-loading images using Object tags in the Head tag.
1: Pre-loading images using Object tags in the Head tag.
Originally posted by Meophist:
but you can hide objects in the Head tag
I saw that. The preloading doesn't work for me, but it does in this XHTML (if served as applicatiion/xhtml+xml):
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head style="display: block; width: 0; height: 0; overflow: hidden; visibility: hidden;">
<title>preload images with object in head</title>
<object type="image/gif" data="http://www.google.com/images/logo.gif"/>
</head>
<body>
<div>text</div>
</body>
</html>
And, the object stays in the head.
Originally posted by burnout426:
Originally posted by JeroenH:
Maybe whatwg should also be told this.
Ask on the list just to be sure. I'll participate.
However Konqueror does the same thing as Opera and Firefox.
I found this mail. So they are already aware of it. This thread is not about a problem that appears in the wild, otherwise it would be something they need to know.
Originally posted by JeroenH:
I found this mail. So they are already aware of it. This thread is not about a problem that appears in the wild, otherwise it would be something they need to know.
Cool Thanks.
<object> implies <body> because doing otherwise has no real use case and I think it even breaks certain content out there.
Originally posted by anne:
Thanks
If you had head tags in your markup and wanted to preload an image with the object element, would you put the object inside the head or outside of it? ( It looks better in the head imo and isn't considered content to me exactly if it's just preloading. )
It ends up in the body either way, but if it's in the head and not the last element in the head, it'll take the elements after it with it. That could be a problem if you're working on arbitrary pages with JS where you look for things in the head that you expect to ONLY be in the head.
Would you agree that the best markup practice is to have the object markup inside the body markup only? ( Assuming you have body|head tags in your markup )
Why do you want to preload images? And if you do, why would you do it using <object>? Images that are not displayed at all are likely not to be fetched at all...
The use application for pre-loading images is pretty obvious, no?
I'm sure it has its drawbacs, though.
I'm sure it has its drawbacs, though.
Hebrew Forums Moderator | Hebrew Group
Originally posted by anne:
Why do you want to preload images? And if you do, why would you do it using
I don't need to preload images myself, but many like to. They want to do it without JS and they want to do it in the head. Since non-content OBJECTs are alowed in the head ( according to the spec at least ), then OBJECT becomes a candidate for that use. Also, since the object ends up in the body, even if the object has a width and height of 0, its content will still be downloaded.
Maybe this would be a bettter example:
<object classid="java:EventHandlerClass" width="0" height="0"></object>
If all the object is doing is handle events, I'd put it in head just like I'd do with scripts. I know it ends up in the body, but markup-wise, imo, it belongs in the head.
However, knowing that it just ends up in the body anyway, I might do like the 2nd code block in this post.
Basically, I was wondering if you're saying something like, "Keep object elements out of the head no matter what. It doesn't matter if the spec say it's O.K., or if they get moved to the body and everything renders fine. Keep object elements out of the head because with current browser behavior, it technically causes a parse error. Also, with application/xhtml+xml, since object elements in the head don't end up in the body, their content doesn't get downloaded and the use-case goes out the window unless you change the display of the head element. That means, to be consistent, you should keep object elements out of the head no matter what."
Forums » General Opera topics » Opera and cross-browser Web design