my website in IE has 2 major html problems.

**Johnnymushio** · 12-05-2010, 08:23 PM

I have removed IE from my computer since I installed Windows 7 and only used Firefox.

Lately, I have been updating my website.

http://japantown.awardspace.com/

It looks fine and dandy in FF.

Out of curiosity I wanted to see what it would look like in IE.

I went to http://ipinfo.info/netrenderer/ and saw that my site was just pure white.

So, I installed IE9 beta... when I went to my page, well, you can see for yourself what the heck IE has done to it.

So my questions are...

1. How can I get rid of those gradient-bar images that seem to trail on forever to the right? (You can see the content of the page by scrolling all the way down to the bottom.)

2. How can I get rid of that huge white space at the top that shifts my whole page down to the bottom?

In other words, make it look more like how it does on FF.

**jscheuer1** · 12-05-2010, 09:21 PM

Use a DOCTYPE that invokes standards compliance mode. Replace:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

with:

Code:

<!DOCTYPE html>

But with or without that, there are other problems. There are two bodies for one. Your code should be standard at least to a minimal degree regardless of mode. If not, problems relating to that will almost certainly arise later.

**Johnnymushio** · 12-05-2010, 09:26 PM

Hey John, long time no see. Probably don't remember me, haha.

Out of curiosity, I took out the google search script:

Code:

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'en'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('012832971271815635782:gegft7bqism');
customSearchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
customSearchControl.draw('cse');
var myCSC = new google.search.CustomSearchControl('012832971271815635782:gegft7bqism');
myCSC.draw('cse');
myCSC.setLinkTarget(google.search.Search.LINK_TARGET_SELF);
}, true);
</script>

And, to my surprise, it fixed every problem at once. But, I do not want to have that search box removed. I will try your method and post back with the results.

Okay, your method worked, somewhat.

My method of removing that search script fixed everything perfectly, except for the lack of a search box.

Your method fixed the problem as well, but with a couple problems.

I can't seem to get rid of the space between the billboard script and the image header.
Also, in IE the billboard text is centered. instead of left alligned.
And last, in both IE and FF I cannot center the search box on the top like it was before.

**jscheuer1** · 12-05-2010, 10:19 PM

If using a DOCTYPE that invokes standards compliance mode (what I recommended), you should also validate your code. Once you do that, minor discrepancies among the browsers can either be lived with or more easily dealt with than without validation.

Link to the validator:

http://validator.w3.org/

If you need help with that, let me know. Be sure to use it with the new DOCTYPE.

One thing that may or may not show up in that (but probably will) is the use of the <center> tag. It has different meanings in different browsers. Best to avoid it. There are other ways to center things. The best way is to give the element you want centered intrinsic width and a left and right margin of auto. That only works for block level elements, but should do what you want.

The problem with the center tag is that it not only centers elements within it, it often also centers the text within those elements, or even other contained elements that you wouldn't normally expect it to affect.

**Johnnymushio** · 12-05-2010, 10:41 PM

I do not understand many of these errors, for example:

Error Line 265, Column 39: body start tag found but the body element is already open.

<body style="background-color: white;">

I was so happy too, finally getting the site exactly how I wanted it. Darn IE, now it even looks ugly in firefox.

Instead of 0 problems in FF, and two in IE, now there are 4 problems, 2 exclusive to IE

there is white space between the billboard and headerimage
the search box is no longer centered, now its right aligned with the little x going pass the header image
the billboard text is centered in IE for some reason, instead of left aligned like in ff
the title of my pages does not show up in IE

my code is only a couple hundred lines, the vast majority of those being a dropdown menu script and billboard script from this site. there is only so much i can tinker with to fix this...

**Johnnymushio** · 12-05-2010, 11:42 PM

Originally Posted by jscheuer1

But with or without that, there are other problems. There are two bodies for one. Your code should be standard at least to a minimal degree regardless of mode. If not, problems relating to that will almost certainly arise later.

There were two bodies thanks to Kompozer not knowing i was using ssi includes to include the endings and beginnings of tags in another 2 files.

I have fixed the problem, and deleted kompozer, so i am just using basic ol' notepad++ for editing for now...

EDIT

It's hard to believe that I have been trying to make a simple space go away for three hours...
Is there something simple here in the code I am missing that would make this space appear?

Code:

<tr>
<td height="85"><img src="headerbackground.gif" usemap="#Map" border="0"></td>
</tr>
<tr>
<td background="billboardbackground.jpg">
<div id="contentwrapper">
<div id="billboard0" class="billcontent"><font color="#ffffff">&nbsp;Welcome to Japan Town!!</font></div>
<div id="billboard1" class="billcontent"><font color="#ffffff">&nbsp;Have you visited the forum today?</font></div>
<div id="billboard2" class="billcontent"><font color="#ffffff">&nbsp;The chat room and message board
are open!!</font></div>
<div id="billboard2" class="billcontent"><font color="#ffffff">&nbsp;Also, the interesting facts
section is open!!</font></div>
<div id="billboard3" class="billcontent"><font color="#ffffff">&nbsp;Enjoy your stay at Japan Town!!</font></div>

</div>
</td>
</tr>

I should also mention when following the instructions on the w3 code validator, it actually messed up my site even more. it told me cell padding wasnt necessary, but when i removed the padding it caused a ugly solid blue bar to appear at the end of the billboard :/

out of curiosity i checked googles homepage and it had a ton of errrors as well. so, i am not too concerned with having 0 errors as far as this site is concerned. i just want these few problems to be fixed, but i am clueless after hours of failed attempts. my ftp manager says i have uploaded the file 156 times during the session... so 156 failed attempts

**jscheuer1** · 12-06-2010, 02:20 AM

When you get rid of cellpadding - and I don't think it says it's unnecessary:

The cellpadding attribute on the table element is obsolete. Use CSS instead.

If you still need it, you give the cells (the td elements) css padding. Ideally this is done in an external stylesheet so that it can be easily applied to all pages.

Since it appears all (I see only two) of your tables have:

Code:

 style="width: 765px;" border="0" cellpadding="0" cellspacing="0"

One also has align="center" and the other relies upon the obsolete <center> tag.

You can get rid of all that, and put in the stylesheet:

Code:

table {
	border-width: 0;
	margin: 0 auto;
	width: 765px;
}
td {
	margin: 0;
	padding: 0;
}

If you end up with different types of tables, class names or id's may be used to differentiate.

In case you missed it, I'm saying that this allows you to get rid of the <center> tag as well. Once you do that, the billboard widget's text will be on the left in all browsers. It's not just IE that's having the problem.

There are 100's of browsers, so unless you can check in all of them, best to use standard practices.

Now, about Google - they chose a long time ago to code in quirks. They have at least a few, possibly a hundred or more people checking their site in almost every browser. You have to do that when you use quirks mode. It helps as well to be experienced in quirks. Even so, most of their errors are extremely technical, and/or just sloppy - nothing fatal I can see. Over the years they've become more compliant really. The sloppiness just makes it harder for them to change their template without editing a bunch of pages. They also keep their page as simple as possible, that helps avoid differences among browsers. And since there's so much space, if something is off by a pixel here or a few pixels there - who's going to notice?

**Johnnymushio** · 12-06-2010, 03:12 AM

I am not sure how this will make the white space go away, but..

I removed the center tag and added the code you mentioned above.

But still, there is a space there...

**jscheuer1** · 12-06-2010, 04:11 AM

Looks fine to me. That space, if it's the one I'm thinking it is, under the menu image is from the standards compliance requirement for images to allow space below the line. This is the one thing I'm not too keen on about standards. The thinking is that since images are inline elements, like a span or an a tag, space must be reserved below for letters like q, p, g, etc. that need it. To get rid of that you can set in style either:

Code:

img {
	vertical-align: top;
}

or:

Code:

img {
	display: block;
}

Sometimes one or the other is better. Sometimes you only want this applied to certain images. Again, like I was saying about the tables, if there are various ones that you want treated differently, use class or id to differentiate.

**Johnnymushio** · 12-06-2010, 04:20 AM

Well, that somewhat did the trick. I guess I would say it fixed the problem by 50%, since the height of the space looks like it decreased by 50%.

Is the table padding below the menu image causing that excess space?

EDIT

Well, I managed to get rid of all those errors the w3 validator told me, except for one. It told me this:

Error Line 318, Column 41: Attribute background not allowed on element td at this point.

<td background="billboardbackground.jpg">

Is this what is causing that white space? None of the other 25+ errors were.