Originally Posted by jcrawfor
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:
font-family: arial, sans-serif;
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...
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).
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,