LaLaLa Posted July 17, 2009 Share Posted July 17, 2009 I am beginning to create a new website. I have decided to use a Windows Vista Aero WinAPI theme, which is why I must use tables. I need a top and bottom border image around the main content, and left and right border images that expand to the height of the content. These border images are cropped screenshots of windows to make the content actually appear to be within a window. So far, the images look perfect, although I cannot get the left and right border images to expand properly. Here is my current code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body style="margin:0px;overflow:auto;text-align:center;"><table style="font-size:14px;font-family:'Segoe UI';width:769px;" cellpadding="0" cellspacing="0"><tr><td style="background-image:url('Top.bmp');height:42px;" colspan="3"></td></tr><tr><td style="width:22px;"><img src="Left.bmp" style="height:100%;" /></td><td style="background:rgb(240,240,240);height:600px;">Rebar Control<div style="margin:10px;">Text.</div></td><td style="width:27px;"><img src="Right.bmp" style="height:100%;" /></td></tr><tr><td style="background-image:url('Bottom.bmp');height:26px;" colspan="3"></td></tr></table></body></html> If you read through the tags' attributes you should be able to tell what I am trying. The left and right <td>s expand to the full height, but any content within them (such as an <img> tag or even the image nested within a <div>) does not expand.What I am more generally asking, and the problem to which no one can find a solution, is how to get content within a <td> element to automatically expand (or srink) to that size, without actually affecting the <tr>'s height. For example, if a <td> is 500px tall and you have an image within it, get the image to automatically stretch to 500px (by setting <img height="100%">?, but this doesn't work), regardless of the image's native height. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2009 Share Posted July 17, 2009 do the left and right cells as you did the top and bottom (without the height), background: url(Left.bmp) yellow repeat-y; width:22px;see this posting i did earlier shadowwhere it says 'enter table here' that is where You enter you content instead. Link to comment Share on other sites More sharing options...
LaLaLa Posted July 17, 2009 Author Share Posted July 17, 2009 do the left and right cells as you did the top and bottom (without the height), background: url(Left.bmp) repeat-y; width:22px;see this posting i did earlier shadowwhere it says 'enter table here' that is where You enter you content instead.I can't have repeat-y because my image isn't just a 22x1px border, it's a screen shot of the highlight of a window (originally 520px high), so it has to be stretched/shrunk. I know that what you are suggesting would work, but that's not what I need in this situation. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2009 Share Posted July 17, 2009 then you will probably have to use javascript to find height of table, and adjust the height of image accordinglyfunction runthis(){var x = document.getElementById("mytable").offsetHeight; //assign this id to tabledocument.getElementById("left").style.height=x+"px";// assign this id to left image//alert(x)}window.onload = runthis; Link to comment Share on other sites More sharing options...
LaLaLa Posted July 17, 2009 Author Share Posted July 17, 2009 then you will probably have to use javascript to find height of table, and adjust the height of image accordinglyfunction runthis(){var x = document.getElementById("mytable").offsetHeight; //assign this id to tablevar y = document.getElementById("left").style.height=x+"px";// assign this id to left image//alert(x)}window.onload = runthis;Ah, I know that if you read the "style.height" property for something that hasn't been explicitly set then it is considered undefined, but "offsetHeight" will return this in pixels? Is this well supported on IE, FF, etc.?And does JavaScript allow double assignments (x=y=5)? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2009 Share Posted July 17, 2009 undefined error is usually displayed when javascript tries to read the id of an element that has not been created yet. but using the window.onload it waits for the page to finish loading, before implementing the onload function so this error will not occur.and yes! offsetHeight is supported in all browsers, and returns the value in pixels only."And does JavaScript allow double assignments (x=y=5)" i've never come across this before? and all it does is set x and y variable values to 5. Link to comment Share on other sites More sharing options...
LaLaLa Posted July 17, 2009 Author Share Posted July 17, 2009 undefined error is usually displayed when javascript tries to read the id of an element that has not been created yet. but using the window.onload it waits for the page to finish loading, before implementing the onload function so this error will not occur.and yes! offsetHeight is supported in all browsers, and returns the value in pixels only."And does JavaScript allow double assignments (x=y=5)" i've never come across this before? and all it does is set x and y variable values to 5.I know that it will return an error if you try to access an element that has not yet been loaded, but it would return "Error: Object Expected". What I'm talking about is different. Look at the following code:<html><body><div id="the_div">Crap.<br />More crap.</div><script>alert(document.getElementById("the_div").style.height);</script></body></html> This will return an error saying "style.height" is undefined because you haven't set a specific height for the <div>, even though it's like 40px tall.Also, you used a double assignment in your code: Then you will probably have to use javascript to find height of table, and adjust the height of image accordinglyfunction runthis(){var x = document.getElementById("mytable").offsetHeight; //assign this id to tablevar y = document.getElementById("left").style.height=x+"px";// assign this id to left image//alert(x)}window.onload = runthis; In the line before //alert(x), you put "var y = document.getElementById('left').style.height=x+'px';". Notice the two equal signs, so it is basically "y=height=x;". Considering you used this, I guess it is allowed.Lastly, about what you were saying concerning using onload, there is an attribute keyword that you can put in a script tag in the <head> that automatically fires it once the DOM has finished loading, but I forget what it is. An even easier way is to simply put <script> tags in the body after the required elements, so it will run as soon as possible. These methods prevent using external JS files, but they are much faster. Link to comment Share on other sites More sharing options...
Ingolme Posted July 17, 2009 Share Posted July 17, 2009 There is the "DOMContentLoaded" event. It only works when used with the addEventListener() method, and does not work for Internet Explorer or Safari. However, IE and Safari have other ways to do it. I put together this script a while ago after doing some research for a website I'm working on. function initialize() { // So that Firefox doesn't run this function upon the "load" event that's used for compatibility with other browsers if(!window.DOMLoaded) { // Do something when the page loads }}// Firefox and Opera handle the event when the DOM content is loadedaddEvent(window,"DOMContentLoaded",initialize);addEvent(window,"DOMContentLoaded",function() { window.DOMLoaded = true;});// Other browsers don't handle that event, so here are some alternatives:////Internet Explorerif(window.attachEvent) { // Internet Explorer has the defer attribute for the script tag // which will run the script as soon as the page content has loaded, // so we'll create a <script> tag and find out when it starts running. document.write("<script id='__ie_onload' defer='defer' src='java script:void(0)'><\/script>"); var tempObj = document.getElementById("__ie_onload"); tempObj.onreadystatechange = function() { if (this.readyState == "complete") { initialize(); } };} else {//// Safari // In Safari, we keep on testing the readyState of the document until it is "loaded" or "complete" var safariTimer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { clearInterval(safariTimer); initialize(); } }, 10);} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 17, 2009 Share Posted July 17, 2009 Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height. For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored. offsetheight retrieves the combined height of all elements within it as stated above. AND I just noticed what you mean now, my bad!second line should bedocument.getElementById("left").style.height=x+"px";sorry about that. Link to comment Share on other sites More sharing options...
LaLaLa Posted July 18, 2009 Author Share Posted July 18, 2009 @Ingolme: The "defer" attribute is what I was thinking of, although I wasn't aware that it only worked in Internet Explorer. Nice script.@dsonesuk: I understood what you meant and have already implemented it. It works like a charm :)I now have another problem ... my site works fine when using the HTML 4.01 Transitional DTD and forcing Quirks Mode rendering, which I happened to randomly try, but when using any standards complient Doctype (XHTML 1.1, for instance), 4px of padding are added below the left and right border images. I tested some things by setting background colors and the <td> in which the <img> is contained isn't the problem (the background color shows through), so it's like I put img{margin-bottom:4px;}. What the crap? Also, after finding this problem I removed the JavaScript and set an explicit height for the images (just to test), and it was the same. Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2009 Share Posted July 18, 2009 The images are probably behaving as inline elements. Give them a class name and use the following CSS: img.border { vertical-align: middle; } Link to comment Share on other sites More sharing options...
LaLaLa Posted July 18, 2009 Author Share Posted July 18, 2009 The images are probably behaving as inline elements. Give them a class name and use the following CSS:img.border { vertical-align: middle; } What you suggested didn't work, although it gave me an idea and setting img{display:block;} works fine Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.