Topic: Adding XHTML Transitional DOCTYPE messes up Mozilla (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=23818" title="Pages that link to Topic: Adding XHTML Transitional DOCTYPE messes up Mozilla (Page 1 of 1)" rel="nofollow" >Topic: Adding XHTML Transitional DOCTYPE messes up Mozilla <span class="small">(Page 1 of 1)</span>\

 
Luc 666
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Oct 2004

posted posted 10-27-2004 01:29

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 &amp; 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>


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;
}



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.

tntcheats
Bipolar (III) Inmate

From: BC, Canada
Insane since: Jun 2004

posted posted 10-27-2004 02:06

Just an idea: try changing the doctype, unless it's completely crucial to the page. As long as it validates

-----------------------------------------------------
funny websites | funny signatures | funny jokes

Ozone Asylum KILLED my inner child.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

posted posted 10-27-2004 06:06
quote:
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.



So use CSS to specify the background-images....



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu