IE cna't take the simplest of the simple coding

[Rick Ace]

h5network.net/

Sheesh! Look at it in IE! It looks terrible. And I haven't even really started to code it....

I'm using Opera and it looks fine. I have a friend who tried it in Chrome and Firefox which also worked.

I think this might have to do with cellpadding.... Anyone know the cure?

[Jordan]

It's actually your coding, but browsers like FireFox, Chrome, Opera etc are intelligent so they can fix your mistakes. I'm going to be honest and say that your coding isn't too great, but I'm going to tell you how to make it better.

To fix your problem there are actually two ways. The best fix is to add a DOCTYPE tag because if you don't have one then IE will render in IE 5 or 6 mode (don't remember which version) which is why it's going all crazy on you. You need to be using a doctype anyway, and I recommend using the strict version. These basically tell your browser what version of HTML you've coded your website in. If it's not there then it guesses.

www.w3schools.com/tags/tag_DOCTYPE.asp

The second fix is to fix the actual problem and that is to add a "#" in front of all your CSS hex colors in your division elements. I also recommend adding "width: 100%;" as well to be safe. You shouldn't have all that CSS in the tag itself, though. Make a class instead.

<div style="width: 100%; border-bottom:1px solid #58a6d6; border-right:1px solid #58a6d6; border-left:1px solid #58a6d6;">

As for making your code better, you need to have some sort of "wrapper" object which sets the layout's total width and which all of your other elements will be nested in. You have separate tables which you separate by "&nbsp;" spaces. I recommend using division elements, but even if you are using tables you should have a "parent" table which all the others reside in. You should also use CSS for padding rather than using "&nbsp;" spaces all over the place.

The following red tags were deprecated ages ago so don't use them. The only reason why Proboards uses them is because it currently renders in quirks mode to be compatible with ancient browsers. Use the CSS styles "color: #0E0E0E; text-align: center;" with a CSS class instead. I would also like to say here that if you want to learn how to code HTML well, don't look at Proboard's source code. ;P

<font color="0E0E0E"><center><b>Welcome to H5 Network</b></center></font>

In your head tag, the 700 should be bold.

font-weight: 700;

Be consistent as well. Below you have a div nested within a font tag, but above this you did the opposite. Remember that you shouldn't use a font tag, though. Just set the font size with the div's styles in a class. Don't use bgcolor attribute either in the td tag. Use a class. Also, on most image tags you don't have /> but on this one you do. Again, be consistent, and if you are going to use a DOCTYPE then use the ending /.

<td bgcolor="b6ecf2"><font size="3"><div style="border-bottom:1px solid 58a6d6; border-right:1px solid 58a6d6; border-left:1px solid 58a6d6;"><center> ... <img src="http://s266./ii278/wfus/H5/V5/grin.png" /></center></div></font></td></tr>

There's just a few things you can do to make your code better. Let me know if you have any questions.

[Charles Stover]

I'm gonna go out on a limb and say that you have a few elements that have both a padding and a set width. That causes problems in IE.

On a related note, run your coding through a validator (e.g. W3 validator).

[Jordan]

Oct 23, 2010 14:36:07 GMT -8 Charles Stover said:

I'm gonna go out on a limb and say that you have a few elements that have both a padding and a set width. That causes problems in IE.

On a related note, run your coding through a validator (e.g. W3 validator).

The second fix is to fix the actual problem and that is to add a "#" in front of all your CSS hex colors in your division elements.

Not including the pound sign makes IE not parse the tags correctly. If you add them to his source it will display fine.

[Rick Ace]

Thank You Jordan You're always a helpful guy It's a bit late now. I'm going to study the advice in the morning and re-code the whole thing.

[Jordan]

Glad to help. Let me know if you need any help.

[Charles Stover]

Oct 23, 2010 15:20:40 GMT -8 Jordan said:

Oct 23, 2010 14:36:07 GMT -8 Charles Stover said:

I'm gonna go out on a limb and say that you have a few elements that have both a padding and a set width. That causes problems in IE.

On a related note, run your coding through a validator (e.g. W3 validator).

The second fix is to fix the actual problem and that is to add a "#" in front of all your CSS hex colors in your division elements.

Not including the pound sign makes IE not parse the tags correctly. If you add them to his source it will display fine.

I didn't actually view the page. The padding+width is just the most common IE error.

[Rick Ace]

Thanks Charles. I did run validators for the old website. It was I think CSS and HTML Valid. However when I got my new template ready, I forced things together, and killed it.