Hello all, Here at the Astrofaces research project, we're using CSS to replace tables, and it works better than the tables did (by wrapping rows properly) so we would like to make it work for every browser. Trouble is, this works only in MSIE without a DOCTYPE. Which DOCTYPE will allow this to work in MSIE, Mozilla, Firefox, MACOSX, etc? The problem specifically seems to be the "display:block" style. It works in MSIE without any DOCTYPE. It doesn't work at all in Mozilla. If a DOCTYPE specifying HTML1.0 or 4.1 is present, it doesn't work in either MSIE or Mozilla. Below are the visual representation and below that is the actual code and the CSS. The site is www.astrofaces.com - a research project with photos and icons and text under each photo. See the "Clearest Groups" to view the problem area. Thank you very much in advance, M Berlin VISUAL REPRESENTATION OF ROW POSITIONS: Photos spans are display:inline with text block under each photo row 1 ________ _________ ________ | | | photo2 | | | | Photo1 | | | | Photo 3 | --------------- ------------------ ---------------- text text text under under under photo 1 photo 2 photo 3 row1 text under all the photos in the row ... subsequent rows are similar. The number of photos in a row are irregular, since the pages are created on the fly by a cgi script from a database. ________ _________ | | | photo2 | | Photo1 | | | --------------- ----------------- text text under under photo 1 photo 2 row2 text under all the photos in the row ... _____________________________________ HTML CODE (produced by a CGI script): <div class="row"> <span class="row photo"> <a href="javascript:Start('../cgi-bin/ShowClearestSMAGroup.cgi?sun=02&moon=01& asc=06')"><img src="../astrofaces/photosSmall/S02/020106-1S.jpg" alt="Sun Taurus Moon Aries" border="none"></a> <span class="row photo glyphs"> <img src="../astrofaces/signs/02w.gif" alt="Sun Taurus" height=18 width=32> <img src="../astrofaces/signs/01w.gif" alt="Moon Aries" height=18 width=32> <img src="../astrofaces/signs/06w.gif" alt="Asc Virgo" height=18 width=32> </span> </span> <span class="row photo"> <a href="javascript:Start('../cgi-bin/ShowClearestSMAGroup.cgi?sun=02&moon=01& asc=06')"><img src="../astrofaces/photosSmall/S02/020107-2S.jpg" alt="Sun Taurus Moon Aries" border="none"></a> <span class="row photo glyphs"> <img src="../astrofaces/signs/02w.gif" alt="Sun Taurus" height=18 width=32> <img src="../astrofaces/signs/01w.gif" alt="Moon Aries" height=18 width=32> <img src="../astrofaces/signs/07w.gif" alt="Asc Libra" height=18 width=32> </span> </span> <span class="row text">These are listed with adjacent ascendants. <a href="../astrofaces/abstract.html#problems-bd">Do they actually share one?</a></span> </div> <hr> .... __________________________________ CSS: body {background:#FBEEB5} .row {display:block; text-align:left; width: 400px; margin:0px; padding:0px; border:solid 3px gold; } .row.photo {display:inline; width:106px; text-align:center;margin:0px; padding:0px; border:solid 2px red;} .row.photo.glyphs {display:block; margin:0px; padding:0px; border:solid 1px blue; } .row.photo.caption {display:block; width:101px; margin:0px; padding:0px; vertical-align:top; font-size:8pt;border:solid 3px purple; } .row.text {display:block; margin-top:0px; margin-left:0px; text-align:left; font-size:10pt; border:solid 3px green;} Thanks. __________________________________ ______________________________________________________________________ css-discuss [EMAIL-REMOVED]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
