Log in

View Full Version : 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. :eek:

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:


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

with:


<!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:


<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
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?

<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:


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:


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:


img {
vertical-align: top;
}

or:


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.
jscheuer1
12-06-2010, 06:28 AM
table {
border-width: 0;
margin: 0 auto;
padding: 0;
width: 765px;
border-collapse: collapse;
}
Johnnymushio
12-06-2010, 07:14 AM
Yes! Thanks for that, really. That was my number one problem.

I don't wanna sound like I have endless amounts of html problems, I only have 2 minor ones left.

1. In IE, the favicon is not displayed. Do you know why? It is displayed in firefox.

2. The search bar on the top of the menu is shifted to the right. You can see in both IE and FF how the x is not hovering over the menu, but to its right. And if you look to the left, the amount of space x is shifted to the right, is the amount of space that is kind of empty on the left. Another example is after typing in something (try "qqq"), the "No Results" box is also shifted to the right instead of centered. I am not sure if it was centered prior to changing the doctype, but I know I only recognized that it was not centered after I changed the doctype.

Aside from the strange font in IE, I say it looks pretty good now. All I have to do now is clean up the code so it can be validated like how is is on the home page. You woudn't happen to know how to fix that one error on the home page, would you? I tried using css to fix it like the other problems, but neither using "background: blablabla.jpg" nor "background-image: blablabla.jpg" worked. Sure, it said "congradulations the page is verified", but the gradient image was not displayed.


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

<td background="billboardbackground.jpg">

And here is the css code I used, which did not display the image.


#billboardbackground {
background-image: "billboardbackground.jpg";
}
Anyways, I couldn't have done this without your help, thanks.
jscheuer1
12-06-2010, 08:45 AM
I see that icon.ico is really a .gif image. Upload it to:

http://tools.dynamicdrive.com/favicon/

and use the genuine .ico file that utility will produce instead of the current one.



Put this in your stylesheet:


.gsc-control-cse {
padding: 2%;
width: 96%!important;
}



Change the highlighted as shown:


#contentwrapper{
width: 765px;
height: 19px;
border: 0px solid black;
background-image: url(billboardbackground.jpg);
padding: 0px;
color: white;
}
Johnnymushio
12-06-2010, 09:31 AM
Wow, that really did the trick.

And another wow, the favicon now works in IE but not FF. :p

EDIT

odd, changing the name from favicon.ico to icon.ico fixed the problem.

that search was centered before, not sure how it got shifted to the right in the first place, but its fixed now, thank you.

all the problems are fixed now, thanks so much. i hope it wasnt too time consuming for you.

EDIT

haha maybe I spoke too soon. not really a problem, just a question. when i validate i get the warning saying:

Line 4, Column 71: Using windows-1252 instead of the declared encoding iso-8859-1.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

if i change the charset to windows-1252, the warning goes away. but i never see any pages with that charset. does it make a difference? should i just change it and leave it to windows?
jscheuer1
12-06-2010, 02:25 PM
About the encoding - If you're saying that the pages disappear with windows-1252, don't use that. If you tell the validator to use iso-8859-1, it will and the warning goes away.

However, since I'm assuming you will be using Japanese characters at some point, you might want to use utf-8. The only problem with that is that your source code is saved as iso-8859-1 or possibly ansi, not utf-8. If you're using notepad++ you can save it as utf-8 without the BOM. Then it should be fine with:


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

All future pages should then start out as utf-8 without the BOM.

But for now, iso-8859-1 looks to be OK. I'm not sure why the validator chose to change it. It didn't have to and offers no explanation as to why.
Johnnymushio
12-06-2010, 07:33 PM
Sorry, I wasn't clear. I meant when I declare windows encoding, the warning messages goes away.

When I declare iso formatting, it gives me a warning and tells me I am declaring it as iso but it is using windows encoding.

Line 4, Column 71: Using windows-1252 instead of the declared encoding iso-8859-1.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

So if I declare windows-1252 formatting, this warning goes away.

switching it to utf-8 produces many errors, the first one being

Line 4, Column 68: Attribute http-equiv not allowed on element meta at this point.

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

I would prefer the utf-encoding. I saved the file as utf-8, then declared utf-8 encoding, but it just produced errors for some reason in the validator.
jscheuer1
12-07-2010, 05:04 AM
OK, I did a little more research into this windows-1252 vs iso-8859-1 thing. Apparently they're the same. However, at the moment it appears as though - going forward that windows-1252 will be the one browsers must support. So it's just safer, if that's the encoding you want, to call it windows-1252.

Now, about the utf-8 business. Open the page in notepad++, then open a new page. Set the encoding for the new page as utf-8 without the BOM. Go back to the view of the current page. Select all and copy. Switch to the new page and paste. Change the meta tag. Save that. It should be a valid utf-8 version of the page. I have one here. If you want it I can attach it to a message or post it to the web.