How to fix my site?

[vinnier]

Hi,

 

I am having a problem with my website http://chat.hlippo.com/ when I access it using FF it all looks fine, same with Safari but with Opera, Chrome and IE8 the website is messed up/

Attached 2 files to show what I mean.

 

Please help me fix it.

 

Cheers.

 

[attachment deleted by admin]

[haku]

Step one is to fix the 926 errors in your HTML.

[vinnier]

Thank you, but these errors are keywords related can't see there anything that would mess up the layout of the from in IE etc. 

I will fix the keywords later together with the solution to fix the problem.

[haku]

You mean other than having an invalid doctype, using HTML tags in a strict html document, leaving quotes off of attributes, and not closing tags properly?

 

And that's just in the first four errors.

 

When you have errors in your code, browsers have to guess how to interpret the errors. The very fact that they are errors means that there is no standard to how errors should be interpreted - each browser will do it in its own way. This makes cross-browser debugging extremely difficult. Which is why I said that step one is to get rid of all the errors in your code. 99% of the time that will fix 97% of your problems.

 

And you have some MAJOR errors in your code, starting from the first line of your document.

[vinnier]

Thank you, I have changes/fixed what I could and knew how to fix. The view in IE is still messed up....

[haku]

It's much better, but 55 errors is still too many errors to be able to say anything conclusively.

 

One of the big problems you have is that you are using & in your URLs in the code. You need to change that to &

 

But you have others as well. Google the error, and you should find some ways to fix it.

[vinnier]

Tried what you told me, and the number of errors remained the same, made no difference at all.

Plus i have found that the rest of the errors are because I don't use CSS for image settings etc.

 

I changed the document type and now I am down to 2 errors.

[vinnier]

but it's still a mess under IE  :'(

[vinnier]

Down to 1 error; strange there is no Line 355 in my file, only 350 lines...

[haku]

The last error is because you don't have a closing tag on this form:

 

<form action="flashchat.php" method="post" name="login"><table width="100%" border="0" cellspacing="0" cellpadding="2">

 

It may seem like I'm being a little pedantic on this, but a missing closing tag will cause problems below, as the browsers will think everything after the opening tag is part of the form.

 

 

[vinnier]

Yeah  Result: Passed

 

But it's still a mess under IE! ;(

[haku]

Step one finished!

 

Ok, the next thing to do is go through your elements, and make sure you don't have any side paddings/margins on elements with a set width. You also want to make sure you don't have any top/bottom paddings/margins on elements with a set height.

 

For example, your sidebar is set with this CSS:

 

float:left;
padding:15px 20px;
width:200px;

 

IE renders paddings and margins differently than every other browser. So what you do is use two divs. So change your sidebar to this:

 

<div id="sidebar1">
  <div id="sidebar_padding">
    // sidebar stuff
  </div>
</div>

 

And set your CSS like this:

#sidebar1
{
  float:left;
  width:200px;
}
#sidebar_padding
{
  padding:15px 20px;
}

 

This way the width is the same for the sidebar whether it's IE or another browser, and the padding will also render the same for all browsers, since the padding is not combined with a width.

 

Find any other elements you have done this (combined a width with a margin and/or padding) and do the same thing - add an inner div, then put the margins/padding on the inner div.

[KevinM1]

Have you looked into a CSS reset?  Essentially, it's a stylesheet that zeroes out all styling on all elements, which would then allow your custom CSS to be (hypothetically) rendered in the same way across browsers.

[vinnier]

Nightslyr thanks, looks to complicated for me

 

Haku still can't get it right...

 

[vinnier]

Got it... This was causing the problem: <table width="100%" border="0" cellspacing="0" cellpadding="2"

 

Removed and it moved up the form

[haku]

Glad to hear that.

 

But actually, you should take Nightslayrs advice, it's quite important. First thing I do on every site!

[KevinM1]

Nightslyr thanks, looks to complicated for me

 

What's so complicated about it?  Cut & paste the code from one of the CSS reset pages the Google search shows, and save it in an external CSS file.  Link to it before linking to your custom CSS.  Voila, you're all set.

 

I mean, here's the link to Eric Meyer's reset file: http://meyerweb.com/eric/tools/css/reset/reset.css  It can't get much easier than that.

[vinnier]

Nightslyr thank you, I thought it was more complicated. Will give it a go.

[vinnier]

Done, what is it that it does exactly?

[vinnier]

Thank you all so very much for help and useful tips!

[haku]

Each browser has default CSS settings that are different from other browsers. A CSS reset sheet explicitly sets defaults so that all browsers are starting on a level playing field.