Internet Explorer Issues

[HorizonsChurch]

We recently launched our new website for Horizons Church. I tested the site in Internet Explorer 7, Firefox, Opera, and Safari (for PC because we don't have any Macs to test on). The site works fine in FF, Opera, and Safari, but I have run into two IE issues that I can't fix.

1) The site runs fine in IE7, but in the bottom left corner of the screen, IE says the page has loaded, but with errors and shows a little exclamation mark in a yellow triangle. When I click the triangle, I get this message:

"Problems with this Web page might prevent it from being displayed properly or functioning properly. In the future you can display this message by..."

Then it shows the source of the error as:

Line: 2
Character: 8913
Error: Invalid argument
Code: 0
URL: http://www.horizonschurch.net/

I checked the source code for the site, and there's not 8,913 characters in the second line of the code. I also checked the external Javascript file for the menus, but it doesn't have 8,913 characters in the second line either. The page seems to work just fine, but I was wondering if anyone could figure out what is causing the error message.

2) In IE 6, you can't read the menu titles becase they show up in a dark blue color. I can't figure out where IE is getting this color because it should be white. I went through the style sheet and changed everything that I thought could be causing the problem, but didn't have any luck.

Any help you guys could give me would be greatly appreciated. The site is http://www.horizonschurch.net

Thanks!
Malorie
Horizons Church

[JackWolfgang]

You're using JavaScript to construct the menu, and there are several reasons not to do that:


JavaScript can be difficult to troubleshoot, especially with cross-browser compatibility problems.
Some people surf the web with JavaScript turned off, either because of IT policies, browser limitations, or limitations due to accessilbility tools.


Standard Markup is better for menus for the reasons above, and the Listamatic (http://css.maxdesign.com.au/listamatic/) and Listamatic2 (http://css.maxdesign.com.au/listamatic2/index.htm) sites provide many non-JavaScript options for a menu, including this one (http://css.maxdesign.com.au/listamatic2/horizontal04.htm), which is similar to what you are trying to do with JavaScript.

[David Gillaspey]

Hi Malorie,

Thanks for posting.

How much of the web design & coding did you do, and how much comes from the NetMinistry Website Platform that your church is using?

Home page, at least, looks fine to me in Firefox 2.x on the Macintosh.

You should always check your website (page by page) using the validator services provided by the W3C:

Home page:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.horizonschurch.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

CSS stylesheet:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.horizonschurch.net%2Fcss.asp&profile=css21&usermedium=all&warning=1&lang=en

Doing this will help you create pages that are web standards compliant, as much as possible. Even if that is not your goal, these two validation services will flag mistakes in your code. There are some.

But anyway, to answer your questions:

1) Here's a web page from Microsoft that explains how to troubleshoot this very issue:

http://support.microsoft.com/kb/308260

2) Your external stylesheet does contain the following code:

A,A:Visited,A:Active,A:Hover {
color:#003366;
/*text-decoration:underline;*/
}

"003366" is blue, so this perhaps is the source of the blue text. Try changing the color to, say, orange, to verify this is the source of the color for the menu links, at least in I.E. 6.

This should be overridden by the CSS styles in the internal stylesheet for the Chrome CSS Drop Down Menu that you have obtained from Dynamic Drive DHTML. That's because the internal stylesheet follows (is below) the link to the external stylesheet. When CSS rules conflict, the more specific rules win, as well at the last-most specified on a page.

Look at

.chromestyle ul li a{
font-family: "Trebuchet MS";
font-size: small;
color: white;
padding: 4px 7px;
margin: 0;
text-decoration: none;
color: white;
}

in the internal stylesheet for the menu and compare this to the following HTML:


<ul>
<li><a class="chromestyle" href="http://www.horizonschurch.net/">Home </a></li>

[[ etc. ]]

</ul>

Maybe you should add


a.chromestyle { color: white; }

to the internal stylesheet.

Perhaps other browsers are smart enough to make the existing CSS styles work as you intend for them to, but I.E. 6 doesn't render the existing CSS styles the way you intend and you need to add this slightly more specific style rule for the links in the menu.

(Also, try giving these links their own specific class. "chromestyle" is the class for both the <div> that encloses the menu as well as the class for all the links in the menu. This seems a bit odd.)

[HorizonsChurch]

Thanks for the quick responses!:)

@Jack- I like a lot of the menus on the sites you suggested and I'll definitely some of them somewhere down the road, but I don't think pure CSS drop downs work in IE6. At least the ones that I have tested so far haven't worked without a small amount of Javascript. I'll definitely look more into it though. Thanks a lot!! :)

@David- I hand-coded the template, so most of the HTML and the internal CSS are my own work (with the exception of the menus because I don't know enough JavaScript to make my own yet, but I'm working on it now). I validated the home page and the errors in the HTML and CSS were caused by NetMinistry, most of them were in the text entered through the CMS, which from what I have read online is a common problem for CMS. You were right about the source of the blue in IE 6 though. It is caused by the #003366 in the style for the general links, which I agree is odd because it should be overwritten. The external style sheet is based on some settings in NetMinistry. I changed it to white, which worked in IE6, but also changed the internal links in all browsers. I'm working on a fix right now and I'll let you know how it turns out.

Thanks again guys, you were a big help! :D

[JackWolfgang]

You should always check your website (page by page) using the validator services provided by the W3C:

Home page:

http://validator.w3.org/check?uri=ht...Inline&group=0

CSS stylesheet:

http://jigsaw.w3.org/css-validator/v...ning=1&lang=en

Doing this will help you create pages that are web standards compliant, as much as possible. Even if that is not your goal, these two validation services will flag mistakes in your code. There are some.

David, are you channeling me? :D

[David Gillaspey]

David, are you channeling me?Hi Jack,

I'm not quite as gung ho as you are (and have been on this forum) regarding web standards compliance. For example, the rest of this site (Great Church Websites) doesn't validate 100% because I refuse to give up using "target = '_blank' " in links.

However, the W3C validation tools really help web designers clean up mistakes in code. I needed that last night. I couldn't figure out why a small subhead at the top of the righthand column of my site (the rest of the site, which has a three-col layout) was underlined. I even had set the text decoration for the line of text to "none." I was tearing my hair out trying to resolve the problem.

After using the W3C validator, I identified the problem: an unclosed <a> tag at the bottom of the page, which just happened to be right before the underlined text in the code for the page. In the code, they followed each other. In the layout, there was a wide distance between the two. The validation tool helped me fix the problem.

Problem solved.

[JackWolfgang]

I'm not quite as gung ho as you are (and have been on this forum) regarding web standards compliance. For example, the rest of this site (Great Church Websites) doesn't validate 100% because I refuse to give up using "target = '_blank' " in links.

Transitional Doc Types allow target="_blank", but the reason Strict Doc Types (including XHTML 1.1 which does not have a Transitional Doc Type) does not allow them is because they are not accessibility friendly for some people.

However, the W3C validation tools really help web designers clean up mistakes in code. I needed that last night. I couldn't figure out why a small subhead at the top of the righthand column of my site (the rest of the site, which has a three-col layout) was underlined. I even had set the text decoration for the line of text to "none." I was tearing my hair out trying to resolve the problem.

After using the W3C validator, I identified the problem: an unclosed <a> tag at the bottom of the page, which just happened to be right before the underlined text in the code for the page. In the code, they followed each other. In the layout, there was a wide distance between the two. The validation tool helped me fix the problem.

You just summed up a key reason to write valid code. CSS is only rendered properly with valid code. If the code is invalid, the browser does the best job it can, but that's not always what we want.

Problem solved.[/QUOTE]