chadmichael

I have an image tag that I set the height on, expecting it to obtain its width automatically. However, IE is making the width equal to a width set on a containing div several layers up. Are images supposed to inherit width like this, even if you set the height?

Thanks. That's kind of obvious. Why does firefox accept this then? Seems like they should reject it as bad structure, if that's what it is.

Hi. I''m having trouble making anchor tags that include other tags. I'm not sure whether my problem is because of some rule about what tags can be inside of an anchor or not. Or it might be my styling. Below I have a list based menu with some styling. The problem is that IE doesn't recognize the entire anchor inclusion as clickable. Any ideas? <div class="menu" id="leftmenu"> <ul> <li><a class="menulink" href="HomePage.action"><div class="centeringDiv menuLinkSize">home</div></a></li> <li><a class="menulink" href="ArtistPage.action"><div class="centeringDiv menuLinkSize">artist</div></a></li> <li><a class="menulink" href="GalleryMenuPage.action"><div class="centeringDiv menuLinkSize">galleries</div></a></li> <li><a class="menulink" href="EventPage.action"><div class="centeringDiv menuLinkSize">events</div></a></li> </ul></div> style sheet #leftmenu {background:transparent url(images/artists/1/bg_menu.gif) repeat-y scroll left top;float:left;width:200px;}.menu {text-align:center;}.menu ul {list-style-type:none;margin-top:50px;padding-left:20px;text-align:center;}.menu ul li {margin-left:0pt;padding-left:0pt;vertical-align:middle;}.menulink {background:transparent url(images/artists/1/bg_menu_button.gif) repeat scroll left top;display:block;margin:15px 0px;text-decoration:none;width:160px;}div.menuLinkSize {height:50px;width:160px;}

That's called a tag library declaration. As per your other post, this is not something that someone can just give you a bit of code to resolve. In this case you would have to set up a servlet container and learn about JSP coding. All of which is quite easy, if you read the book, or do some on line tutorial perhaps. Very lucrative skills to have, professionally speaking. I can recommend the Oreilley JSP book by Hans Bergsten.

I don't mean to be impolite, but you are asking about fairly non-trivial tasks. You probably need to read a book, or something. I highly recommend the Oreilly Javascript book by David Flanagan. Its a big book, but you wouldn't have to read all of it.

The java script would need the data from the backend in order to do this. You just need to put the data into Javascript arrays, or objects, then make a function that rewrites the DOM objects of the second select box when the first is changed. There are on change events for the boxes that you can register your function with.

Just curious, but why do you have to use the brackets in the name? Are you trying to match some backend properties?

I've always had problems running scripts that tell me that such and such an object has no properties. Seems like this is because the page is not "rendered", or whatever the appropriate term is, and is not quite ready for scripting access. In the past, I've set a time out or something to stall a few milliseconds and everything is fine. This seems kind of dumb though. Does anyone know of a good way to set a script to execute and know that the page will be "full cooked" when the script starts to execute?Seems like I'm missing something pretty major?

I'm doing a slide show. One of the things I do when switching images is set the height and width on the image tag. This is necessary for a centering technique that I'm using. The code I have works great on everything except IE. And it works on IE except that in the case of tall, portrait images -- where I set the width to auto, rather than a specific number -- IE doesn't recalculate the width. Here's the code: if ( image.height > parseInt ( imageTag.parentNode.style.height ) ){ imageTag.style.height = imageTag.parentNode.style.height; imageTag.style.width= 'auto'; } else { imageTag.style.width = image.width + 'px'; imageTag.style.height = image.height+ 'px';} This is obviously a snippet from my switch image method. Interestingly, if I hit this code twice in a row, i.e. call switch image with the same image twice in a row, IE correctly redoes the width on the second go. I've tried changing display and visibility to no avail. Any idea on why IE doesn't re-do the width and re-render? Any hacks? Any good fixes?

Yes, I used that technique plus some supplemental positioning via negative margins.

.center {text-align: center;margin: auto;} Then in the HTML: <div class="center">IMAGE HERE</div> That's how I center things.I need vertical centering too. But thanks for the help. What's the margin:auto; do in this case?

Thanks for the block element centering technique. However, I don't think its what I'm looking for, in this case. I'm trying to center the image within the div. The div itself, I don't need centered; in fact, I want its width to be 100% -- which is centered by nature.

I'm trying to center an image in a containing div. I'm using a vertical centering technique that I have found on the internet, and have used successfully in the past. In the past, however, I have applying this technique to situations where I'm centering an image in a know, fixed size containing element, such as a div with the height and width set. In this present case, I don't want to se the width of the containing div becauuse I want it to be width=100%, i.e. as wide as the space available to it. But this presents problems for my centering techniques.The vertical centering I'm using is the one that uses a font declaration to provide the basis for vertical centering on IE. This includes a style that setst he containing elements display to table-cell. It seems like the is style makes the width=100% not work on Firefox -- I suppose its working correctly, just not as would be most convenient for me in this case I've provided a code sample below. Please check it out. Note, provide your own image please. Note, I've set the width of the containing div to a fixed 800 pixels so you can see that the centering actually works. What I would like to do is make that have a width of 100%, but, if you try it you can see, it doesn't work. The containing div collapses to the size of the image, same result if I set width to auto. How can I get the containing div to have a width of 100%?Do I need to abandon this centering technique? Is there a whacky hack? <html> <head> <style type="text/css"> #container { background-color: lightgrey; } .centeringDiv{ background-color:lightgreen; height: 470px; /* I NEED width to be the full width of the containing div, which in this test case is the width of the browser view port, but if I set width=100% the div collapses to the width of the image, due to the display style used for the centering, I think. Actually, width at auto or 100% works on IE but on firefox the div collapses. */ width: 800px; /* width: 100%; */ /* CENTERING STUFF */ text-align: center; /* these two lines provide the vertical centering for standards based browsers */ display: table-cell; vertical-align: middle; /* this font declaration is necessary for the IE fix. While there won't be any actual text in this page, the vertical alignment for IE is based upon the center line of the defined font family, I think;) */ font:420px Arial, Helvetica, sans-serif; } </style> </head> <body> <div id="container" > <div class="centeringDiv"> <img src="v10.jpg"/> </div> </div> </body></html>

Hello. Can someone give me a quick list of the things necessary to sending an html email? I know how to send the email, from my application, and all of that, and I know how to do html, but what do I have to do to the email itself to get the thing to render as HTML in the email client? Are there headers that need to be set? etc.

I've posted a lot of more html-ish stuff to this forum, but I'm not exactly sure this is a completely appropriate topic. But seems like someone here will have some experience, hopefully.I need to encrypt a query string with RSA. This is the request of the 3rd party to which the URL is pointing. I've read and understand the theory behind RSA ( public key encryption ), and I know of Public Key Infrastructure. My questions are more practical. 1) What are the industry standards for such things? 2) What are the practical level steps? My backend is Java so, AFAIK, I could just get their public key and use some java RSA encryption API to write the query string. But I need to know what the best practices are. Thanks.

I've just read that the url encoding of an, lets say, equal sign is %3D. However, I'm working with a web site that uses $ instead of %. So, the equal sign is encoded as $3D. And it works just fine. What's going on here? Is the $ an old format?

What is the business? It seems a bit too cool looking for a business site, unless its some kind of hip oriented business.

I have a photo gallery type application that must be robust enought to handle a variety of sizing constraints. The photo's can range in size, as well as the space alotted to them. The main problem is that when the space gets too small in relation to the images, the flow out of the bounds of the containing block. My choices, as I know them, are to use overflow to hide the extra or add scrollbars. Neither of these is a first choice. My preference is to constrain the width of the images so that they never grow larger than the containing block. The following code sample works, but you need to supply your own image that is wider than the 300 pixels set on the containing div. The styling in this example makes the width equal to 100% of the div. So, in the case where the image is too large, it gets scaled down to the size of the div, and my original problem is solved. The new problem is that the width is tied to the size of the containing div and when the image is smaller than the space ( recall that my space changes too, and the fixed number of 300 is only for the example; it could be 500 ) it gets stretched out to that space. This isn't acceptable. What I really need is the to constrain the minimum and maximum dimensions, but this isn't supported by IE as I understand it. I believe I could write some rather intricate javascript to intervene and handle the run time styling of all the elements but that seems like overkill. Any ideas? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>Test Page</title><style type="text/css"> #container {padding: 25px; background-color:lightblue;} #container1 { height: 200px; width:300px; border: 1px blue solid; background-color:cadetblue; } #container1 img {width:100%;} </style></head><body><div id="container"><div id="container1"> <img src="images/wide.jpg"/></div></div></body></html>

So, the HTML spec is more just the DTD of the language?The previous post mentioned that the default style sheet determines whether a <p> </p> is a block or inline. So, basically the HTML spec just says what attributes are available for each element, and the values it can have, but doesn't define defaults?

If you check out the following code, you'll see that the div is positioned absolutely. This positioning is relative to the contiaining block. I would think that the body is the containing block, but its not. Html is the container. Why isn't body the container? <!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><style type="text/css"> html {border: 1px solid red; color:aqua;} body {border: 1px solid black; color:aqua;} #content { position: absolute; left: 100px; top: 50px; border: 1px dotted red; }</style><title>working with style</title></head><body><div id="content"><h1>The Black Cat</h1><h2>By Edgar Allen Poe</h2><p>I married early, and was <a href="http://www.poemuseum.org/">happy to find</a>in my wife a disposition not uncongenial with my own. Observing my partiality fordomestic pets, she lost no opportunity of procuring those of the most agreeablekind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p><p>This latter was a <a href="http://www.poemuseum.org/">remarkably</a> large andbeautiful animal, entirely black, and sagacious to an astonishing degree. Inspeaking of his intelligence, my wife, who at heart was not a little tincturedwith superstition, made frequent allusion to the ancient popular notion, whichregarded all black cats as witches in disguise. Not that she was ever seriousupon this point - and I mention the matter at all for no better reason than thatit happens, just now, to be remembered.</p></div></body></html>

Is there a specification that describes how the browsers should render things?

Ajax in Action by ManningI like it because it tells you why and not just how. But that's my personal preference. Its not a nutshell or complete reference kind of thing, but since most of the AJAX component technologies are pretty commonplace, complete with top notch reference oriented books ( the Oreilley Javascript book for instance ) then I think this is an appropriate role for an Ajax book.

I noticed that in the following style delcaration, not all of the things are inherited. body {border: 1px solid green; color:aqua;} The text coloring is inherited by every child of the containing body element, but not the border styling. THis makes sense of course, logically, but can someone summarize the types of attributes that are inherited and those that aren't?

Is this for performance, i.e. speeding up the parsing? Or is it only necessary when some kind of illegal or problematic character sequence exists within the text?

Okay, so I figured out some more details about the behavour that I am seeing. Im pretty sure its not a bug but its a behaviour to be sure. In the following code sample, I have a page that has just a single line of conent, but an embedded style centers a non-tiled image for the body's background. This code works but you have to supply your own image. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>background positioning bug</title><style type="text/css"> body {background: #919 url(images/snowyGate.jpg) no-repeat center; }</style></head><body > Not much to say.</body></html> If you try it out, the image will be centered horizontally, but vertically it is centered to the center of the single line of text. It seems that if the body's content doesn't have much size, in the vertical dimension, then the body size ( to which the background image is positioned ) is only the height of the body's content. So, it seems to me that the body is only the height of the content?? Can someone explain the logic behind this behaviour? I kind of knew this was the behaviour for a div but I would have thought that the body element would have taken up the whole browser viewport by default.