Very Basic Help Needed: Internet Explorer Compatibility

[jessi-belle]

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/iglass.biz/architecture.html

Thank you so much for your time :)

[bluewalrus]

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/extras/entities.html

[jessi-belle]

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

[azoomer]

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

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.