Solve this line Problem?

Hi all,
I have added the line to the header… see this page in IE…
New Page 1

The line below the search box, is showing in IE but not in other browsers. Why?
But in other browsers, when i saw source, it is showing the image URL… but not showing in the browser…

Solve me this problem…

Thanking you…

Well, first off your lack of a doctype is going to leave IE in quirks mode, so it doesn’t behave like every other browser out there.

Two, I don’t know where you’re learning HTML from, but it looks to be about fifteen YEARS out of date. Oh wait, HERE’S your problem…

<meta name=“GENERATOR” content=“Microsoft FrontPage 4.0”>

Welcome to 1997. Not only is frontpage discontinued, attempting to use ANY WYSIWYG to build a page is just going to result in a broken page – be it Frontpage, “Microsoft Web Expression” (which replaced Frontpage five years ago in their product line) or even the highly touted Dreamweaver.

Given that Dreamweaver is ranked head and shoulders over lesser WYSIWYGS like Frontpage, and a dearly departed friend still ended up saying “The only thing you can learn from Dreamweaver is how NOT to build a website” … Imagine what’s said about lesser programs like Web Expression or Frontpage.

To go down the list of “issues”

  1. No doctype, IE in “quirks mode”, no chance if it behaving like the rest of the world.

  2. Windows-1252 character set… Welcome to 1995.

  3. tables for layout.

  4. presentational images in your markup.

  5. non-semantic markup.

  6. DIV instead of fieldset.

  7. Invalid valign value – there is no “baseline”. People CALL it baseline, but the value is “bottom”. (unless you are ONLY dealing with legacy IE)

  8. Widths declared on TD that don’t add up to the same value!!!

That last of those is likely a huge culprit as there’s no way browsers are going to render that table the same way.

Your first TR’s TD add up to 337px wide… your next TR is only 663 wide, and your final TR is 940px wide … when they should all have the same value… Your use of rowspan on the first one… Ah, did you mean to put rowspan on the SECOND one as well? That MIGHT make sense…

NOT that said code makes any sense, but that’s using a WYSIWYG for you. The HTML for a page like that would be more appropriately built thus:


<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	New Page 1
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		TutorialsWeb
		<small>A home for tutorials</small>
		<span><!-- image replacement --></span>
	</h1>
	
	<form action="/search.htm" id="topSearch">
		<fieldset>
			<input type="hidden" name="cx" value="partner-pub-8523261719997194:cyny8p-wsjq" />
			<input type="hidden" name="cof" value="FORID:10" />
			<input type="hidden" name="ie" value="ISO-8859-1" />
			<input type="text" name="q" size="31" />
			<input type="submit" name="sa" value="Search" />
		</fieldset>
	</form>
	
	<script
		type="text/javascript"
		src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"
	></script>		
	
<!-- #pageWrapper --></div>	

</body></html>

Everything else you are trying to do belonging in the CSS… Which I realize if you are using frontpage is probably a bit beyond your current skillset, but if you care about working cross browser and having proper accessibility, much less not wasting bandwidth blowing 100k of code on 10k of content by the time you are through – you’ll need to pitch the WYSIWYG in the trash, and learn PROPER semantic HTML, CSS and something called “separation of presentation from content”.

To put it in the proper New England vernacular, “Ya cahnt geht theyah frum heeyah…”