I have a web page that seems to look great with every browser I use except IE. http://www.firstbaptistgoosecreek.com/test/calendar.php

IE on this page (and not the other pages on this site) has a thick bottom border, a thick right border, and thick dividers between the menu options. I suspect that it has something to do with the code in the iframe putting IE in quirks mode, but that is just a guess.

First, is there a way to use CSS to make IE behave?

Second, any idea how to fix the Google calendar code?

Hi Bill,
You are right. The DOCTYPE you are using (Transitional without DTD) triggers quirks mode on every browser. You use a different DOCTYPE in the other pages (strict with DTD).
You may check the different DOCTYPEs here: http://hsivonen.iki.fi/doctype/

Regards

Rafael

Rafael,

Thanks. I always use a strict DOCTYPE, but forgot to change it when I started this page. Guess I better check the remainder of the site to be sure I have all the DOCTYPEs set properly.

Now, with Firefox and Opera, the menu rises above the background line where it belongs. Of course, now IE6 is behaving. I don't have access to IE7 here at work.

I just tried relative positioning, and now I can get Firefox and Opera where they belong, but IE6 has dropped out of the box.

Hi Bill,

I'm not sure how much this is affecting things, but your #covenant styling is missing a closing "}" just before the </style> tag.

Cary,

Thanks.

I copied that from another page, and missed the closing } so I have just removed that unneeded styling.

Unfortunately, that did not fix the problem.

Hi Bill,
Here we go again... The generated menu position is different in Firefox/Opera that in MSIE. Specifically, the top property for the first div of the menu is 181px in MSIE versus 166px in Firefox. This means, of course, that the problem is in the DHTML Editor code generation. It has nothing to do with your style sheet.

Unfortunately I still don't know where in the code this problem occurs, but I think the code assumes that MSIE always uses the broken box model, while in fact MSIE v6 and v7 use the W3C model in standards mode. I had detected a similar problem with the spacing between the menu items. Which makes me think it is something like that.

If I have time one of this days I'll look into it.

In the meantime perhaps you could manipulate the position of the span element using an IE conditional tag.


Rafael

Rafael,

What I was trying to do was have a line from one side of my page to the other that matched the menu color. I eliminated the background in my DIV statement, and added a blank menu on each end of the menu. I then adjusted the two end menus to have the same width and fill out the remaining space.

Crude approach, but I had used it one time in the past.