IE problem

Hi,

I am very new to ModX and have learnt everything from scratch.

I thought I had finished a website, as everything looked correct in FF. However, not everything was appearing in IE

The DropMenu, FlexSearch form snippets and Google ads do not appear in IE, which should appear in the left-column. Here’s a link to the test site http://breakfastout.net/index.php?id=1

Below is the css I am working with. I apologise if it’s a little amateur

* {
margin:0;
padding:0;
/*font-style, font-variant, font-weight, font-size, line-height, font-family*/
font: normal normal 0.95em/1.6 "Times New Roman", Times, serif;
text-align:left;
text-decoration:none;
color:#000;
border:none;
}

a:link {
color: #000;
}
a:visited {
color: #000;
}
a:hover {
color: #FFd600;
}
a:active {
color: #000;
font-weight:normal;
}
p, h4 {
margin:0 0 0.5em 0 ;
}
h1 {
font-size:2.7em;
}
h2, h3 {
font-size:2.7em;
font-style:italic;
}
h4 {
font-style: italic;
}
strong {
font-weight:bold;
}
table {
table-layout: fixed;
}
td {
vertical-align:top;
}
td p {
margin:0;
}

body {
/*background-color, background-image, background-repeat, background-attachment, background-position*/
background: #fff url(bkg.gif) repeat;
}
#sidebar, #logo, #navcontainer, #blackbox, #search, #ads {
float:left;
width:200px;
}
#logo, #blackbox {
padding:10px 0 20px 0;
background:#000;
}
#navcontainer {
color:#fff;
padding:0 1em 2em 1em;
}

#search, #ads {
background:#fff;
}
#search {
margin:30px 0 0 0;
border:10px solid #ffd600;
width:180px;
height:2em;
}
/* Google Adsense 180x150 */
#ads {
font: normal normal 0.7em/1.6 Tahoma, Arial sans-serif;
margin:200px 10px 0px 10px;
width:180px;
height:150px;
}
#content {
float:left;
width:60%;
background:#fff;
padding:1em;
}
#reviewimages {
float:left;
width:80%;
}
#sideimages {
float:left;
width:70px;
height:500px;
clear:right;
}
#reviewintro {
float:left;
width:100%;
}
#cafename {
}
#article {
float:left;
width:100%;
}
#tags, #footer {
float:left;
width:100%;
margin:1em 0 0 0;
}
#leadimage {
height:500px;
background:#000;
margin-right:1em;
overflow:hidden;
}
#homeimage {
height:133px;
width:200px;
background:#000;
margin-right:1em;
overflow:hidden;
margin-bottom:1em;
}

#reviewintro{
border-bottom:1em solid #ffd600;
padding:0 0 1em 0;
}
#whereopen {
float:left;
width:100%;
font-size:1.1em;
}
p.table {
margin:0;
}
.tags {
width:7em;
}
#leadin {
float:left;
width:100%;
}
#headline {
float:left;
width:100%;
}
#footer {
float:left;
width:100%;
}
/*MENU left*/
#menu {
font-size: 1.1em;
font-weight: normal;
font-family:"Times New Roman", Times, serif;
}
#menu a {
font-size: 1em;
color: #ffd600;
font-weight: normal;
color: #ffd600;
}
#menu a:hover {
font-size: 1em;
color: #ffd600;
font-weight: normal;
color: #fff;
}
#menu a:active {
font-size: 1em;
color: #ffd600;
font-weight: normal;
color: #fff;
}
#menu li {
list-style: none;
margin: -1px 0 -1px -20px;
padding-left: 15px;
}
#menu li.here {
color: #fff;
}
#menu li li.here {
background-image: url(right-arrow.gif);
background-repeat: no-repeat;
background-position: 15px 6px;
color: #fff;
}
#menu li li a{
padding-left: 15px;
margin: -1px 0 -1px 0px;
}
#menu li li a:hover{
background-image: url(right-arrow.gif);
background-repeat: no-repeat;
background-position: 0 4px;
color: #ffd600;
}
#menu li li li a{
margin: -1px 0 -1px 30px;
color: #ffd600;
}
#menu li li li a:hover{
margin: -1px 0 -1px 30px;
background-image: url(right-arrow.gif);
background-repeat: no-repeat;
background-position: 0 4px;
color: #ffd600;
}
#menu li li li.here{
margin: -1px 0 -1px 25px;
background-image: url(right-arrow.gif);
background-repeat: no-repeat;
background-position: 0px 6px;
color: #ffd600;
}
#menu li.last {
color: #ffd600;
}
#menu li li li.last{
margin: -1px 0 -1px 25px;
color: #ffd600;
}
#menu li li li.last a{
color: #ffd600;
margin: -1px 0 -1px -15px;
}
#menu li li li.last a:hover{
color: #ffd600;
margin: -1px 0 -1px -15px;
}
#menu ul {
margin:0;
}
#menu ul ul {
display:none;
}
#menu li.here ul {
display:block;
padding: 0 0 0 7px;
font-family:"Times New Roman", Times, serif;
font-size: 1.1em !important;
background-repeat: no-repeat;
background-position: 0 6px;
color: #fff;
}
#menu ul ul ul {
padding: 0 !important;
margin: 0 !important;
}


/*END MENU left*/

/*SEARCH*/
.FSF_form {
height: 24px;
}
.FSF_submit {
background-image: url(go-button.gif);
width:24px;
height: 24px;
}
.FSF_input {
padding-left:5px;
width:151px;
}
.FSF_resultLink {
font-size:1.5em;
font-style:italic;
line-height:.5em;
}
.FSF_resultDescription a{
list-style: none;
}
/*END SEARCH*/

/*A-Z*/
.azalpha a{
list-style: none;
color: #000;
padding: 0 10px 0 0;
}
.azlist a{
list-style: none;
font-style: italic;
font-size:1.5em;

}
.azlist li {
list-style: none;
font-size:0.95em;
}
.azlist ul {
margin-bottom:20px;
}
/*END A-Z*/


.ditto_pageTitle{
font-size:1.5em;
font-style:italic;
}
.children a{
list-style: none;
font-style: italic;
font-size:1.5em;
}
.children ul{
list-style: none;
font-size:.95em;
}


I’ve tried a lot of solutions suggested in the forums, however nothing seems to be working.

Can someone please help me? The website is due to be launched very soon, so I need an urgent response. Thanks in advance

I’d recommend fixing your HTML before worrying about your .CSS. Some browsers are better than others at displaying incorrect HTML.

Put the URL of your test site into the window here:

http://validator.w3.org/

My guess is that your problem is caused by the errors in your comments.

HTML comments look like this <!-- comment here -->

You have an exclamation point at the end of your comments and (as you’ll see at the validator) sometimes you have other combinations at the beginning and end as well.

I’d start by redoing every one of the comment start and end tags, then validate again.

It also looks like you may have a double closing tag on your form: <form /> </form>

Hope this helps,

Bob