h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

Would you all mind taking a look at this and tell me how it fares in your different browsers?

http://teachx.rutgers.edu/coursetemplate/

Links and whatnot are not finished, I'm just looking at the layout at this point.

Many thanks

also I'm only looking at the default stylesheet - if you are using a browser that lets you switch to the alternates, don't bother. They are not finished and probably won't be there in the end.

In "Mozilla Firefox 0.9.3" it looks pretty much the same as MSIE apart from the fact that large fonts you have used for the titles appear slightly smaller than in MSIE. In "Lynx" (Text only browser with no CSS support) the page is functional (This bodes well for accessibility). Looking at your code I've some concerns as to how well Netscape4.xx will cope with the CSS but as I'm on the GF's PC I can't check (if there is a problem there is a quick (if nasty) fix).

I've looked at it with Netscape 4.8 for the Mac (there will be differences between that and the Windows version), and it looks acceptable. A couple of extra images show up, but they are down at the bottom of the page where they don't interfere. I was aiming for a page that degraded well but would not necessarily be as pleasant in an old browser.

Did the "your browser is cr*p" message (I'm paraphrasing there ) appear in Lynx?

yes

Opera looks the same as IE6.

I'll have to do something about that "browser is cr*p" message then.

I'm glad to hear about Opera. Does anyone have IE5.0 hanging around? That's the one I expect will have lots of oddities.

Testing in Firefox 0.9.3. The site looks excellent. Very professional.

Just two minor nits. You may want to consider putting a bit of space (say, 2px) after the list items in the Rutgers Links section. In Firefox at 800x600 I find it difficult to tell where one item stops and the next starts until they are mouseover-ed. Also, the image that links you back to the main RU site (ru_logo.gif) looks a bit strange to me left-justified.

That logo on the bottom is a problem. It should be in the far-left bottom corner, but I keep running into problems with the css. The padding in the left column is an easy fix. I might add some other visual clue too, a bullet of some sort maybe. Is there a way to make the second and following lines of a list item be further indented, so each item has a hanging indent if it runs over one line? Like this:

Item 1
Item 2 is too long
and should indent
like this
Item 3 is too long
as well
Item 4

Thanks for the compliments, but I can't take credit for the design. I'm trying to make the page look as much like the official university template (http://toolkit.rutgers.edu/templates/nbp/nbp_templateB1.html) as I can while targeting a more specific use, and addressing some shortcomings with that template. It's proved impossible for a novice to work with (and I hate all that wasted space on the right).

"Does anyone have IE5.0 hanging around?"
Forget about that MSIE 4 is the real pain, I had the misfortune to have to use IE 4 last April (on the Office PC of a major Hotel Chain).
Old browsers (for testing) can be found at http://browsers.evolt.org/

I'm not especially fond of this but it works:

li {
padding-left: 1em;
text-indent: -1em;
}

It's creating a hanging indent by making the indent on the first line negative and shifting the box to the right. Not sure if it will work inside a navigation menu, though. I tested it in Internet Explorer 6 and Firefox 0.9.3.