Adding XHTML Transitional DOCTYPE messes up Mozilla — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

Adding XHTML Transitional DOCTYPE messes up Mozilla

This page's ID: 23818

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	I made an image i wanted to use for layout of my site, and Adobe Imageready sliced up my images. i added the XHTML transitional doctype, did NOT add the ?xml declaration. I made a nifty javascript to set the background of the table cells, as the background attribute is not xhtml standard :-D. HOWEVER, the XHTML doctype does not allow mozilla to use this script, and it does nto render those images. the site is http://www.aaron.kamioner.com/prob.html and the code is lsited here (please note this is a work in progress): [code]<!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> <title>Aaron's Awesome Website</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="MSThemeCompatible" content="no" /> <!--disable the XP theme in internet explorer, enble by changing content to yes--> <meta name="keywords" content="Comma-seperated-keywords" /> <meta name="doc-type" content="Web Page" /> <meta name="doc-rights" content="Copywritten Work" /> <meta name="doc-class" content="Living Document" /> <meta name="description" content="short description of site" /> <meta name='copyright' content='(c) Demonblade Works 2004' /> <meta name="author" content="Aaron J. Katz" /> <link rel='stylesheet' type='text/css' href='css/indexCSS.css' /> <link rel='stylesheet' type='text/css' href='null' /> <script type='text/javascript' src='scripts/menuscript.js'> //<![CDATA[ //]]> </script> <script type='text/javascript' src='scripts/unselectable.js'> //<![CDATA[ //]]> </script> <script type='text/javascript'> //<![CDATA[ function createBackgrounds() { Slice3.setAttribute("background","image/web/images/web_03.jpg",0); Slice7.setAttribute("background","image/web/images/web_07.jpg",0); Slice9.setAttribute("background","image/web/images/web_09.jpg",0); Slice11.setAttribute("background","image/web/images/web_11.jpg",0); Slice14.setAttribute("background","image/web/images/web_14.jpg",0); /CHANGE TD BACKGROUND COLORS!!!!/ } function snifBrowser() { if(document.all\|\|document.layers) { return true; } } //]]> </script> </head> <body onload='createBackgrounds()'> <!-- ImageReady Slices (web.psd) --> <table width="1000" border="0" cellpadding="0" cellspacing="0"> <tr> <td class='imgcell' colspan="7"><img src="image/web/images/web_01.jpg" width="1000" height="205" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="205" alt="" /></td> </tr> <tr> <td class='imgcell' width='823' height='50' colspan="5" rowspan="2"><img src="image/web/images/web_02.jpg" width="823" height="50" alt="" /></td> <td id='Slice3' width='161' height='23' align='center'><span id='oPSp'>Site Properties</span></td> <td width='16' height='357' class='imgcell' rowspan='8'><img src="image/web/images/web_04.jpg" width="16" height="357" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="23" alt="" /></td> </tr> <tr> <td class='imgcell'><img src="image/web/images/web_05.jpg" width="161" height="27" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="27" alt="" /></td> </tr> <tr> <td class='imgcell' colspan="3"><img src="image/web/images/web_06.jpg" width="294" height="37" alt="" /></td> <td rowspan="5" id='Slice7' width='487' height='291'><iframe frameborder='0' src='news.htm' height='291' width='487'> </iframe></td><!--noresize--> <td class='imgcell' rowspan="6"><img src="image/web/images/web_08.jpg" width="42" height="307" alt="" /></td> <td rowspan="2" id='Slice9' width='161' height='154'><p style='font-size:9pt;' id='containImage'><!--Labeled with ICRA button--> <a class='pic' href='http://www.icra.org/labelv02.html.'><img alt='Labelled with ICRA' src='image/icra_sy.gif' width='65' border='0' /></a> <!--Valid W3C XHTML 1.0 button--> <a class='pic' href="http://validator.w3.org/check?uri=referer"><img src="image/xmhtl1.gif" alt="Valid XHTML 1.0!" width='65' border='0' /></a><br /> <!--Valid W3C CSS button--> <a class='pic' href="http://jigsaw.w3.org/css-validator/"><img width='65' border='0' src="image/css.gif" alt="Valid CSS!" /></a> <!--Unicode Encoded button--> <a href="http://www.unicode.org/"><img width='65' border="0" src="image/UniEncWhite.gif" alt="Unicode Encoded" /></a><br /> <!--Created Commons License--> <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/"><img alt="Creative Commons License" border="0" src="image/somerights20.gif" /></a> <span id='licText' style='font-size:8pt;'>Unless otherwise noted, all content is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/2.0/">Creative Commons License</a>.</span> <!-- /Creative Commons License --> </p></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="37" alt="" /></td> </tr> <tr> <td class='imgcell' rowspan="5"><img src="image/web/images/web_10.jpg" width="27" height="270" alt="" /></td> <td rowspan="3" align='center' valign='middle' id='Slice11' width='201' height="237"><div class='menuNav' onclick='nav("home")' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'> Home</div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'>Photo Gallery<sup>New</sup></div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'>Graphics Gallery <sup>New</sup></div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'>Monsey Monkeys(NCSY)</div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'>Applications/Scripts</div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'>Special stuff<sup id='msie'>MSIE 4+</sup></div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)'>Links</div> <div class='menuNav' onmouseover='hiliteOn(this)' onmouseout='hiliteOff(this)' onclick='nav("contact")'>Contact</div></td> <td class='imgcell' rowspan="5"><img src="image/web/images/web_12.jpg" width="66" height="270" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="117" alt="" /></td> </tr> <tr> <td class='imgcell'><img src="image/web/images/web_13.jpg" width="161" height="53" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="53" alt="" /></td> </tr> <tr> <td rowspan="2" id='Slice14' valign='top' width='161' height='84'><p id='oPCredit'>Moshe Kamioner: For hosting this website!<br />Etai Gross & Moshe: For helping me learn graphic design!<br /><!--for when i use their stuff: (get their permission for this method first)DevianArt, GreyCobra and other photoshop brush creators.--></p></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="67" alt="" /></td> </tr> <tr> <td class='imgcell' rowspan="2"><img src="image/web/images/web_15.jpg" width="201" height="33" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="17" alt="" /></td> </tr> <tr> <td class='imgcell'><img src="image/web/images/web_16.jpg" width="487" height="16" alt="" /></td> <td class='imgcell'><img src="image/web/images/web_17.jpg" width="161" height="16" alt="" /></td> <td class='imgcell'><img src="image/web/images/spacer.gif" width="1" height="16" alt="" /></td> </tr> </table> <!-- End ImageReady Slices --> <script type='text/javascript'> //<![CDATA[ window.status='This page best displayed maximized.'; //embed the font. document.styleSheets(1).href='css/fonts.css'; //]]> </script> </body> </html> [/code] and the css files are: indexCSS.css: [code] body{ background-color:#86d1cd; margin:0px; } #containImage{ margin-top:10px; margin-left:10px; } #oPSp{ margin-top:2px; font-weight:bold; font-family:Pristina; } #oDivNewsContent{ border-style:solid;border-color:black;border-width:1px;margin-top:13px; } .menuNav{ cursor:pointer; } #oPCredit{ font-size:8pt; margin-top:6px; } a { color:blue; } a:visited{ color:blue; } .pic:hover { text-decoration:none; } table tr td p{ cursor:default; } #oDivNewsContent{ cursor:default; } table tr td div.menuNav sup{ color:red; text-decoration:underline; } table tr td div.menuNav sup#msie{ color:blue; border:solid black 1px; text-decoration:none; } imgcell {display:inline; margin-right:0; margin-left:0; } [/code] the fonts.css file merely allows 3 downloadable fonts, but this is not important now. the menuscript.js script file simply allows a kool rollover for the menu, and provides a navigation function for the "links." the unselectable.js script file adds the unselectable attribute set to "on" for every tag. Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu