[RESOLVED] Saving as .xhtml vs. .html problems. [Archive]

mr.j

02-01-2010, 01:23 PM

Recently I have been working on a website that will be entered in a web design contest away from my usual computer with dreamweaver, so I've been doing some hand coding. I told Notepad++ the language I would be using was XHTML. I was building away and liking what I was seeing until I tried to get a preview in IE. IE wouldn't open the file because of the extension, and showed the download box which would simply open the file in Firefox again. In firefox it looks fine with the .xhtml extension, but when I tried to save as .html, it looks trashy everywhere. Mostly it seems that some of the javascript quit working, but I don't know why just changing the extension would cause that. Here is the code I am using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<meta name="author" content="Justin Ingram" />
<meta name="description" content="This is the website for Lee County Career and Technical Center's FBLA chapter. We are so grateful to our local chamber of commerce for giving us this space on their server." />
<meta name="keywords" content="FBLA, LCCTC, Lee County Career and Technical Center, Future Business Leaders of America, Lee High School, Lee County" />
<title>LCCTC FBLA</title>
<link rel="stylesheet" type="text/css" href="js/css/superfish.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js" />
<script type="text/javascript" src="js/jquery.innerfade.yui.js" />
<script type="text/javascript" src="js/superfish.yui.js" />
<script type="text/javascript" src="js/hoverintent.yui.js" />
<script type="text/javascript">
$(document).ready(function() {
$("#creed").innerfade({
animationtype: 'slide',
speed: 'normal',
timeout: 10000,
type: 'sequence',
containerheight: '100px'
});
$('ul.sf-menu').superfish({
delay: 1000, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'fast', // faster animation speed
autoArrows: false, // disable generation of arrow mark-up
dropShadows: false // disable drop shadows
});
$("#mainpic ul").innerfade({
animationtype: 'fade',
speed: 'slow',
timeout: 5000,
containerheight: '250px'
});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
<div id="creed">
<p><span style="font-size:24px;">The FBLA Creed</span><br /><br />I believe education is the right of every person.</p>
<p>I believe the future depends on mutual understanding and cooperation among business, industry, labor religious, family and educational institutions, as well as people around the world. I agree to do my utmost to bring about understanding and cooperation among all of these groups.</p>
<p><br />I believe every person should prepare for a useful occupation and carry on that occupation in a manner that brings the greatest good to the greatest number.</p>
<p><br />I believe every person should actively work towards improving social, political, community and family life.</p>
<p><br />I believe every person has the right to earn a living at a useful occupation and that this right should not be denied because of race, color, sex, or handicap.</p>
<p><br />I believe every person should take a responsibility for carrying out assigned tasks in a manner that brings credit to self, associates, school and community.</p>
<p><br />I believe I have the responsibility to work efficiently and to think clearly. I promise to use my abilities to make the world a better place for everyone.</p>
</div>
</div>
<div id="nav">
<div id="navbarl">
<img src="img/test.gif" alt="nav bar left" />
</div>
<ul class="sf-menu">
<li class="current">
<a href="#a">menu item</a>

<ul>
<li>
<a href="#aa">menu item that is quite long</a>
</li>
<li class="current">
<a href="#ab">menu item</a>
<ul>
<li class="current"><a href="#">menu item</a></li>

<li><a href="#aba">menu item</a></li>
<li><a href="#abb">menu item</a></li>
<li><a href="#abc">menu item</a></li>
<li><a href="#abd">menu item</a></li>
</ul>
</li>
<li>

<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>

</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li>

<a href="#">menu item</a>
<ul>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>
<li><a href="#">short</a></li>

<li><a href="#">short</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>

<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>
</ul>
</li>
<li>
<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</li>
<li>

<a href="#">menu item</a>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>

<li><a href="#">menu item</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
</li>
<li>
<a href="#">menu item</a>
</li>
</ul>
<div id="navbarr"><img src="img/test1.gif" alt="nav bar right" /></div>
</div> 
<div id="mainpic">
<ul class="fade">
<li><img src="img/demo.jpg" alt="demo image" /></li>
<li><img src="img/demo1.jpg" alt="demo image" /></li>
<li><img src="img/demo3.jpg" alt="demo image" /></li>
</ul>
</div>
</div>
</body>
</html>
How it should look (with .xhtml extension).
http://www.freeimagehosting.net/uploads/th.9936441447.jpg (http://www.freeimagehosting.net/image.php?9936441447.jpg)
What I'm seeing with .html extension.
http://www.freeimagehosting.net/uploads/th.99c18a16de.jpg (http://www.freeimagehosting.net/image.php?99c18a16de.jpg)

Thanks in advance for any assistance.

mr.j

02-02-2010, 09:26 AM

I figured this out myself. Apparently .html files even with the xhtml aren't evaluated quite as strictly, and scirpt tags must be done like <script></script> instead of <script />.

Jeff Mott

02-02-2010, 01:25 PM

I figured this out myself. Apparently .html files even with the xhtml aren't evaluated quite as strictly, and scirpt tags must be done like <script></script> instead of <script />.

Yes indeed. In fact, all the browsers are reading your XHTML code as if it were plain old HTML. That's why self closing tags don't work.