Calthorpe Broken in Opera and Firefox (8th April 2007)
The header for Calthorpe Park School was broken in Opera. This is because Opera is stricter about the size and position of float’ed elements than other browsers.
The result was the header spanned about 75% of the page with everything in it bunched alongside everything else.
The fix was thankfully simple: setting width: 100%; on the #utility container and using clear: left; on the #logo image. This works in the usual suspects:
- Opera 9
- Firefox 2
- Internet Explorer 6
- Internet Explorer 7
However, there was a slight issue with Firefox. To prevent the search form wrapping over several lines if there wasn’t enough space to have it alongside the utility links, I was using white-space: nowrap; on the <fieldset>. This also was using text-align: right; and Firefox was clipping the right edge from the Search button.
I found that applying the CSS to a <div> inside the <fieldset> worked perfectly:
#search div {
white-space: nowrap;
}So a bit of fiddling was involved to accomodate browser bugs but I was worried that a major rebuild of the header would be in order. These fairly straightforward workarounds were a big relief! Browser incompatibilities wouldn’t have helped our chances in the most accessible website category of the Hantsweb Awards 2007.