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:


« Backwards — Onwards »

Show Forum Drop Down Menu