Will this DOCTYPE and meta data code be non-problematic for several years?

Add this to your tyle sheet:

ins {vertical-align:bottom;}

Thanks, Ralph. It works like magic.

I tried googling about ins and css but the info I saw on ins was as it related to html and it appeared to be something entirely different, like an line under text.

My search was not exhaustive but this is the only link I found that may be related to the problem you solved as it mentions java script and css: http://www.java2s.com/Code/HTMLCSSReference/HTML-Tag-Reference/insCSSAttributesandJavaScriptStyleProperties.htm

Is this method you showed me not well documented? It worked but I’d like to find more info on why.

Inline elements (such as img and apparently ins) by default align their baseline with the baseline of the text they could potentially end up sitting next to. That is, they leave space below for the text descenders. (So, if text sits beside them, their bottom will align with the bottom of the text, but any descenders, like that of the p, will hang below.) So it’s common to get an annoying gap under images in certain circumstances. You can either use display: block to stop this or change the vertical alignment to “bottom”, as I posted.

Thanks for the explanation. The only thing that is confusing to me now is where do I have ins in my html? Was it possibly on some other page the ad company had associated with the java script ads? I’ve never used ins before in any html document.

Since adding the vertical-align:bottom; declaration to the ins selector tag on my CSS style sheet corrected the problem I’m assuming that since I don’t have any ins tags on my html page that it is on an external java script related page made by the company who makes the ads.

The Ads pull in a whole heap of their own code, the out-most of which is a series of ins elements. (View the ads with Firebug or the dev tools of any browser to see what gets pulled in.)

I found this through Firebug:

<ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px">

You are very helpful. Thanks, again.

No problem. Glad to be able to help! :slight_smile:

I have noticed that although the ads are vertically aligned in IE, Firefox, and Safari…in Opera there is still a 3 pixel space under the ads which pushes the main center div down 9px(3px times 3 ads).

Here is the link: http://nanoweather.com/zebra_photos.html

The problem DIVs are named “adspace”. The “vertical-align: bottom” for the java-script related ins worked in every browser I tried
except Opera. I’ve tried different vertical-align values to see if they had an effect in Opera but to no avail.