page is validate, but everything messed up [Archive]

san_crazy

11-02-2008, 06:48 AM

I have validated my page successfully at w3c validation center. OK, I am just giving the screen shots what did I get before and after the page validation:

page URL:
http://www.stripathi.110mb.com/resourcespage.html

CSS URL:
http://www.stripathi.110mb.com/external/stylesheets/resourcestyle.css
http://www.stripathi.110mb.com/external/stylesheets/header_menu.css

1 .the interesting issue is, at first I have had not included the !DOCTYPE declaration,
the output in IE7.0 looked like this
http://codingforums.com/attachment.php?attachmentid=6822&d=1225604703

the output in FF2.0.0.x looked like this
http://codingforums.com/attachment.php?attachmentid=6823&d=1225604838

2. when I included the !DOCTYPE declaration at top then I got every thing messed up in IE but few of those in FF.
the output in IE--
http://codingforums.com/attachment.php?attachmentid=6824&d=1225605007

http://codingforums.com/attachment.php?attachmentid=6825&d=1225605085

the one thing that I don't get is, the page was running as I expected before validating it and without fixing the errors and warnings, but when I got each error/warning removed and fixed everything accordingly, then I got it messed up.

the style sheet at first link doesn't have its effect to make every element in its proper position and looks accordingly.

thanks in advance

bluewalrus

11-02-2008, 10:49 PM

Browsers may have been guessing which doc type you were trying to using before and when specified it wouldnt be guessing so it'd display the way the one stated would. I usually use the transitional doctype or strict yours isn't valid there. This is close to being valid in there though if you want to try this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



<link rel="stylesheet" type="text/css" href="http://www.stripathi.110mb.com/external/stylesheets/header_menu.css" />
<link rel="stylesheet" type="text/css" href="http://www.stripathi.110mb.com/external/stylesheets/resourcestyle.css" />
<script type="text/javascript" language="javascript">
function verifyMe(element) {
if(document.getElementsByTagName("input")[0].value!=""){
element.action ="http://www.google.com/search";
element.submit();
}
else alert("Please enter a quary");
}
</script>
</head>
<body bgcolor="#EFFFFB">
<div id="personalhead">
<form action="" onSubmit="return verifyMe(this)">
<input id="query" type="text" maxlength="2048" size="55" name="q" />
<input id="button" type="submit" name="btnG" value="Google Search" />
</form>
</div>
<div id="header"></div>
<div id="mainbg">
<div id="leftpane">
<a id="insidelp">Programming Tuts</a>
<ul>
<li><span><a href="/interestspage.html">C</a></span></li>
<li><span><a href="/photo.html">C++</a></span></li>
<li><span><a href="/contactpage.html">Java</a></span></li>
<li><span><a href="/resourcespage.html">Resources</a></span></li>

<li><span><a href="/photo.html">Courses</a></span></li>
<li><span><a href="/linkspage.html">Links</a></span></li>
<li><span><a href="/extrapage.html">Extra</a></span></li>
<li><span><a href="/photo.html">Site Map</a></span></li>
</ul>
<a style="position:relative;left:3px;top:0px;border:none;background-image:url('http://localhost/WebSite/external/images/smoth.png');height:28px;width:142px;color:white;text-align:center;padding-top:7px;">Web Tutorials</a>

<ul>
<li><span><a href="/interestspage.html">Interests</a></span></li>
<li><span><a href="/photo.html">Photos</a></span></li>
<li><span><a href="/contactpage.html">Contacts</a></span></li>
<li><span><a href="/resourcespage.html">Resources</a></span></li>

</ul>
</div>
</div>

<a style="position:absolute;left:106px;top:211px;"><img src="http://www.stripathi.110mb.com/external/images/resuppbg.png" alt="body" /></a>
<a style="position:absolute;left:105px;top:1029px;"><img src="http://www.stripathi.110mb.com/external/images/reslowbg.png" alt="body" /></a>
<div id="toppane">
<ul>
<li><span><a href="/index.html">Home</a></span></li>
<li><span><a href="/interestspage.html">Interests</a></span></li>
<li><span><a href="/photo.html">Photos</a></span></li>
<li><span><a href="/contactpage.html">Contacts</a></span></li>

<li><span><a href="/resourcespage.html">Resources</a></span></li>
<li><span><a href="/photo.html">Courses</a></span></li>
<li><span><a href="/linkspage.html">Links</a></span></li>
<li><span><a href="/extrapage.html">Extra</a></span></li>
<li><span><a href="/photo.html">Site Map</a></span></li>
</ul>
</div>
</body>
</html>