Any CSS gurus out there?

Factual Questions
1

I decided a while ago that i should learn CSS, because all the people in the know seem to be recommending it, both for general page appearance and specifically for positioning, in place of tables.

I’m pretty happy with my understanding of the basics, in terms of allocating CSS styles to headings, and texts in general. What i’m having trouble with is the issue of positioning. I thought i had a pretty good handle on the main concepts, after doing a fair bit of reading online, and so i decided to give it a go using a very basic model of a class syllabus for one of the courses i teach.

The problem i’ve run into is that, so far, it looks fine in Opera and IE6, but completely fucked in Firefox, which is my main browser. Also, i believe that Firefox is meant to implement CSS2 standards properly, while IE6 still has problems, so naturally i want to get it right in Firefox.

The CSS in my test case is fairly simple stuff, and i’m at a loss as to why it won’t work in Firefox. If anyone can help me out, i’d be most grateful The page (with CSS included in the head) can be found here.

If you want to see what it should look like, open it in IE6 or Opera. If you don’t have either of those available, you can look at my screenshot here.

I’ve probably missed something really basic, or else demonstrated that i still have no fucking idea. Be gentle with me! Any advice most appreciated.

By the way, i’ve put this page through the W3 validator, and both the html and the css are valid, it’s just that the CSS doesn’t give me the layout i anticipated in Firefox.

2

The problem here is you’re trying to replace a table with divs, but in this case a table is perfectly logical - you are presenting data in a tabular form.

Stick with tables for what they do best, leave css for simpler tasks.

3

Anyways, try adding a float and a clear tag, thus:

.tasks
{
float: left;
clear: all;
position: relative;
left: 25px;
width: 625px;
margin-bottom: 40px; }

4

Yeah, you know i was wondering that myself.

Thing is, there was no particular need for me to use that layout to experiment with CSS. I just picked it because it was something i had readily available. I think i might focus my CSS efforts on, as you say, simpler stuff. I also want to come to grips with CSS menus, inline lists, dropdowns, etc.

I think you’re right that this sort of syllabus layout is actually best left to tables.

Thanks for the advice.