Website displays correctly in IE but not in Firefox or Chrome

Topic

New Reply

I’m not sure if this is the appropriate place for this post or even if the Lounge has a place to help with this issue. Our problem is how a page displays in FirieFox or Chrome.
We’ve just discovered that all the pages with links on our County Internet page do not work correctly with FireFox or even Chrome. They work fine with Internet Explorer Browsers. We have a CSS navigation with flyouts master template applied to all pages.

I believe the problem happens when any page has a link that is under what would be the flyout if it were present. It’s kind of hard to explain as I likely don’t have the right terminology! Hyperlinks just don’t work when on the top part of pages when viewed with FireiFox or Chrome. I din’t create the site, but rather am one of the people who maintain it now.

Here are a couple of page links that might better illustrate the issue, if you view them with FireFox: http://www.co.siskiyou.ca.us/website/services.aspx http://www.co.siskiyou.ca.us/website/localgov.aspx

I’m open to suggestions. I’d just like to make it work correctly with FireFox in paprticular.

Reply | Quote

Replies

Hi Judy, this is how they show with FF9.0.1

29738-1

29739-2

Reply | Quote

Thanks muich, but can you click on the links say on the Online Services page, about half way down, Board of Supervisors – Agendas. On my Firefox I can only click on the last two items which are probably below the CSS reserved space. Hope you can on your version, J

Reply | Quote

The problem in FireFox isn’t with the left hand links on the menu. They all work fine. It is the hyperlinks that are internal on the page. See my response to roadrunner. Thanks, Judy

Reply | Quote

I have the same issue with FF 9.0.1, only last two lines clickable – my solution which may not work for you, is to use the IE Tab addon to switch that tab to IE and it works perfectly. FF has the same issue with other websites, and I use the IE Tab for those too, Ford’s Sync My Ride, Twitter and Golf Channel only work in IE tabs for me. It would be nice if standards were tighter so that pages written with WWW Consortium standards would display in any browser. You’d think the browsers would recognize this issue and address it themselves, but I imagine, mostly, they leave it up to the web site administrator, you, to make your pages work with them, not the other way round. Ah, for a perfect world. Some day. :^)

Reply | Quote

I found the IE Tab addon, tried it and while the links now display correctly, the page looks very funky–content drops down below the Left navigation. I may temporarily redo pages to get links to work–that is re position them. It’s not a real fix, and I’ll need to redesign this page–the original designer isn’t in the picture now, so I’ll have to learn a bit more about css and design in general. Thanks for your thoughts and help, Judy

Reply | Quote

Hi Judy,

The links are on the left pane as my image.

29746-RR

Reply | Quote

I still don’t think you get what I’m asking sorry to be so bad it explaining. The question, on that Online Services page can you click on something like file Job Opportunities, or Assessor’s Parcel Data, from the links internal on the pages. Thats where we are having the problem. Not from the links on the left side. It’s the hyperlinks in the middle of the page. If yours works like mine the bottom one or two might appear as links, but the rest don’t even though they are hyperlinks and work in IE. Thanks much, Judy

Reply | Quote

I highlighted the ones that are links.

29747-1
29748-2

Reply | Quote

THanks so much, then the problem still exists. Am sure it is a CSS3 issue, but how to solve is another matter! Thanks for your time, Judy

Reply | Quote

Seems to me, to be 2 badly laid-out sites.

Reply | Quote

I was the designer on this one fortunately. It works great in IE. Now it’s my job to maintain and I don’t want to have to reconstruct the whole site. I’ll get the answer, but I’m learning that we first must make things work with FireFox and then it will likely work with IE. Again, appreciate your time. Judy

Reply | Quote

Thanks muich, but can you click on the links say on the Online Services page, about half way down, Board of Supervisors – Agendas. On my Firefox I can only click on the last two items which are probably below the CSS reserved space. Hope you can on your version, J

In FF9.01, I can click on any link in the left hand page and a new page opens. Tried with both the links you gave and works same in each all left hand links work.
But none of the links work in the right hand pane. As you say they do IN IE9. Hope this helps you to figure it out.

Reply | Quote

Judy, try with addons disabled.

Reply | Quote

I’m not sure if this is the appropriate place for this post or even if the Lounge has a place to help with this issue. Our problem is how a page displays in FirieFox or Chrome.
We’ve just discovered that all the pages with links on our County Internet page do not work correctly with FireFox or even Chrome. They work fine with Internet Explorer Browsers. We have a CSS navigation with flyouts master template applied to all pages.

I believe the problem happens when any page has a link that is under what would be the flyout if it were present. It’s kind of hard to explain as I likely don’t have the right terminology! Hyperlinks just don’t work when on the top part of pages when viewed with FireiFox or Chrome. I din’t create the site, but rather am one of the people who maintain it now.

Here are a couple of page links that might better illustrate the issue, if you view them with FireFox: http://www.co.siskiyou.ca.us/website/services.aspx http://www.co.siskiyou.ca.us/website/localgov.aspx

I’m open to suggestions. I’d just like to make it work correctly with FireFox in paprticular.

Hi Judy,

I took a look at one of the pages you referred to (http://www.co.siskiyou.ca.us/website/services.asp). In the page, the left navigation menu references CSS id “navbar2”. From the stylesheet http://www.co.siskiyou.ca.us/css/navbar.css:

[INDENT]#navbar2 {
[/INDENT]
[INDENT=2]font-family: arial, sans-serif;
[/INDENT]
[INDENT=2] width:550px;
height:150px;
position:relative;
margin:0;
font-size:12px;
margin:50px 0;
[/INDENT]
[INDENT=2] }
[/INDENT]

As you most likely already know, “navbar2” helps position the left navigation menu by creating a transparent floating box. Without it, the search box would be partially covered up by the left navigation menu.

The problem is that the transparent floating box is a bit too wide (550 pixels) and it’s laying right on top of the hyperlinks in the main body (e.g. Anonymous Crime Tips, Assessor Parcel Data, …). A simple test to verify this is by trying to use the mouse pointer to select some of the hyperlink text such as “Board of Supervisors – Minutes”. In Firefox, Chrome and Safari, the only way to select the hyperlink text is to select a large part of the page which grabs the entire bulleted list of hyperlinks. Another test is to add more text to one of the left navigation menu items (i.e. change “Departments” something like “Departments Departments Departments Departments”) and notice how it doesn’t word wrap but continues until it overwrites the top of the bulleted list of hyperlinks with white text.

I’m guessing the idea might have been to make the floating box as wide as the 3rd sub navgiation menu, but it’s not necessary. An easy fix is to take out the “width:550px” parameter and just let the box adapt to the width of the contents. I mirrored part of the web site and tested the change and it seems to do the trick (I’m definitely not a CSS expert, so someone out there with better skills might have a better fix). I tested the modified CSS and the pages work with Firefox 9, Chrome 16, Safari 5, Opera 11 and IE 9.

While we’re on the topic of web development and web browsers…

Although each version of IE has been getting better and better at supporting Internet standards, one thing that doesn’t seem to have changed is that when IE encounters a coding error (HTML, CSS, JavaScript, etc.), it appears to make an educated guess as to what the web developer might have intended and then takes that action instead. On one hand, this means that even broken web pages can be automatically ‘fixed” on-the-fly so that users aren’t inconvenienced. But the flipside is that the person doing the web development might never notice that there is a bug in the webpage.

In the past, Mozilla/Firefox has gotten a bad rap from web developers for its stance on sticking as close to the web standards possible. Chrome and Safari (they share the same WebKit layout engine) along with Opera are also very good about following web standards. Although IE for the Mac is no longer available, one interesting thing I found in working with IE in Windows and Macs is that they do not handle web pages identically — bugs that cause no problems in IE for Windows could behave badly in IE on Macs. A while back I had read somewhere that IE for Windows and the Mac were developed by two separate teams at Microsoft (from my own experience, the Mac version of IE seemed to be more standards compliant than the Windows version so there does seem to be a significant difference in design).

Several years ago I was helping a co-worker debug an online ordering application and he had invited a small group of people to test the application. Part of the form had a simple date selector using a pop-up calendar written in JavaScript. One user was using Netscape on a Mac and was having problems with the calendar. He got into a heated argument with the user when he insisted that everything worked fine when he tried it (… using only IE) and that the user must have been doing something wrong or her Mac was the problem. Totally frustrated, he asked me to talk to the user and try to convince her that his web app was working fine and to do what I could to fix her Mac. A couple of hours later after having talked to the user (whom I had known for a few years) and then taking a look at my co-worker’s web app, I found a bug in the JavaScript code he was using to generate the pop-up calendar. Like my co-worker had said, the calendar really did work fine in IE. The big problem was that it didn’t work at all in Netscape/Mozilla or any other web browser I tried.

So developing a website and testing with Firefox before IE makes a lot of sense because it also helps avoid the temptation of using IE-only features. What works in Firefox, Chrome, Safari and Opera will generally work in IE (at least the newer versions… IE 6 and it’s younger siblings… argh!).

Fortunately, the newest round of the “browser wars” are about which web browser has the best support for upcoming web standards like HTML 5 and CSS 3 instead of who has the largest user base.

Hope this helps, 😎

Chung

Reply | Quote

Thanks so much for your response. I can hear what you say, but I removed the width from the CSS but don’t see any difference in the underlying links. I need to learn more about the whole process. You can bet that any changes from now on will be designed around Mozilla!. I checked to see if the #navbar2 was anywhere else, but can’t locate it on another template or css. Wonder if maybe there’s another width setting that affects it outside of the #navbar2. I’ve got some learning ahead of me! I so appreciate you full discussion, and can now say amen to all you wrote. Your ideas on possible temporary fixes until I can get the page reworked will be appreciated. Thanks, Judy

Reply | Quote

Just an FYI, I removed the Width in the #navbar2 earlier this morning. I saved the file, but didn’t see any changes when viewing the page in Mozilla or Chrome–the navigaiton still interfered with links on the top of the content sections. Now a few hours later, I tried again, and the links are available and can be accessed on Mozilla and Chrome. There must have been a delay of somekind on our server. Anyway thanks so much for your effort on this one. We all ENJOYED your post so much, Judy

Reply | Quote

Just an FYI, I removed the Width in the #navbar2 earlier this morning. I saved the file, but didn’t see any changes when viewing the page in Mozilla or Chrome–the navigaiton still interfered with links on the top of the content sections. Now a few hours later, I tried again, and the links are available and can be accessed on Mozilla and Chrome. There must have been a delay of somekind on our server. Anyway thanks so much for your effort on this one. We all ENJOYED your post so much, Judy

Hi Judy,

Glad it worked out. 🙂

One catch with testing in web browsers is that the built-in content caching is designed to hold onto documents in an effort to speed up the web browsing experience. The downside is that when a secondary document like a stylesheet is updated, the old version is often still used by the web browser for a little while after it was updated.

The reload button in web browsers really acts more like a page refresh button in most cases because often only the main webpage is reloaded. Plus the web server also has its own disk cache that adds additional delay to when a change really takes effect.

A handy trick in Firefox is to hold down the [Shift] key before clicking the reload button. When holding down the [Shift] key, Firefox ignores the file time stamps and reloads the current webpage plus all of the supporting content (images, stylesheets,…) — this makes stylesheet changes take effect almost instantly in the web browser. For keyboard shortcut junkies like me, [Ctrl + R] and [Ctrl + Shift + R] are the mouse equivalents. If you have access to the web server traffic logs, you can watch the effect holding the [Shift] key has. The difference is pretty dramatic with complex webpages.

Chung

Reply | Quote