Very Basic Help Needed: Internet Explorer Compatibility

Hey Everyone :)

I am very very new to building websites, and I am having some problems with compatibility. My website looks like in Firefox, Safari and Google Chrome, but looks completely different in Explorer. Here is a link to the page. I am not sure what to change, but would it have something to do with CSS?

http://rusecureintranet.com.au/iglas...hitecture.html

Thank you so much for your time :)

I don't have I.E. but the problem could be from the pngs.

You also probably want to be using entities so you don't get these symbols.

Based on liquid crystal polymertechnology

http://www.elizabethcastro.com/html/.../entities.html

Thank you so much for that! :) That is a problem too, so I will fix that!
Its more so the placement that is different though, some of the content ends up in the center of the page when it should be left aligned... :) Thank you so much for taking the time to answer my question though :)

About the browser differences it can sometimes help to use a Meyer reset. You can try to paste this on the top of your stylesheet and see if it helps

Code:

---

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
        outline: 0;
}
body {
        line-height: 1;
        color: black;
        background: white;
}
ol, ul {
        list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
        border-collapse: separate;
        border-spacing: 0;
}
caption, th, td {
        text-align: left;
        font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: "";
}
blockquote, q {
        quotes: "" "";
}

---

If you think that it's an overkill, maybe just parts of it like
html, body, div { margin:0; padding:0;}
would do ! Don't know for sure if it works but it's worth a try.
With the Meyer reset you may have to restyle a bit after, but it makes it easier to get a consistent layout across browsers.