HTML/CSS gurus - a little help please

Factual Questions
1

I’m putting together a small website for a class i’m teaching this semester. Right now, i’m trying to get the basic layout right using CSS, but it’s a pain in the ass. I admit i’m no CSS expert, but i understand the basic principles, and getting column layouts to work in CSS is really annoying. I’m almost ready to throw up my hand and go back to using tables. I could do this layout in tables in about 5 minutes.

Anyway, here’s the page:

Test 1

The grey banner at the top is reserved for a image with course title. That’s no problem.

The left hand column with navigation etc. also looks fine to me. There with be a couple of gif logos there in the final version, making the column slightly longer.

I’ve used a hack to make sure the columns appear to be of equal length.

What’s really puzzling me right now is:

(a) why the page displays so fucked up in Internet Explorer 6.

(b) why, in Firefox 2.0.x, the Test Header, which should be centered in the second column, is offset to the right.

(c) why it displays perfectly in Opera 9.24.

I have a feeling that (a) and (b) are related, and fixing one will probably fix the other. And obviously there’s a browser compatibility issue i’ve missed here.

There’s a further issue, also. I did have a layout that works fine in all three browsers:

Test 2

but i changed it because i wanted #col2 to be position:relative rather than float:left. I need the position attribute so i can use position:absolute within column 2. Does that make sense? Anyway, it appears that adding position:relative to #col2, and removing float:left from #columns was what caused my problem.

Anyway, if anyone can help me with this, i’d be most appreciative.

(You can ignore the javascript in the header; that’s just for the rollover images i’ll be using in the top banner.)

2

I have no idea if you’re still needing help - I only saw this thread now. But you can combo float:left and position:relative. Using a float will take the element out of the normal flow of the document anyway. Barring issues with that, throw a container div in the float:left div, same width and height, and put position:relative on that.

3

Thanks for the advice. I actually discovered, during some internet searching over the weekend, that i could combine float:left and position:relative. Floats and clears are probably the things i find it hardest to get my head around in CSS.

One of the reasons that i wanted to do this was so that i could place some layers (position: absolute) inside the right hand column, but now i don’t think i’m going to do that, so i think i’m OK now.

Thanks again.

4

I see you already made some changes. I was going to suggest this design to use for a basic page layout, followed by a simple rollover for the left nav.

5

I was going to suggest the same thing about rollovers - don’t use javascript for them, you can get much more reliable and faster loading ones using CSS hover.

6

Thanks for the links, Duckster.

Actually, by the time you posted, i had changed my page and my CSS a bit, and the result is similar to the page you linked. I used [this page](http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html\) as a guide, but got rid of the horizontal nav bar at the top, and made the left column thinner and the right column thicker. And changed the color scheme, obviously.

I think i have the hang of the basic two- and three-column layout now, as i’m finally getting the hang of how float and clear commands work in CSS. Of course, i still need to hack it a bit in order to make sure IE works OK, but at the moment the page is looking good.

As for the rollover images, the main reason that they’re in javascript is that i created my header graphic in Adobe ImageReady. The graphic is a long (900 x 100 pixel) image composed of nine small square images, each of which is a layer in the original Photoshop file. ImageReady easily creates rollovers for each layer, and exports the Javascript and HTML.

I do like the idea of doing the rollovers in CSS. In fact, normally that would have been my first choice, but i figured that if ImageReady was going to write the code for me, i’d save myself some time and use it. I think, though, that CSS is preferable, and not just for issues like loading time and reliability.

If i use CSS, it allows me to have most of the rollover info in the style sheet rather than the html, making it easier to adapt the page layout to another site or page. Also, quite a lot of people these days (including me) use Firefox and block Javascript using NoScript. And even IE gives an annoying pop-up message whenever i open a page with Javascript. So using CSS means more people will see the page in the way i want them to see it.

Thanks for the help, folks.

7

You really don’t have to “hack” the CSS just to please IE. Build the site according to strict standards so that it works in Firefox and Safari (For Mac. Forget Safari for Windows.) Make sure you don’t use the XML prolog at the very top of the code to force compliance, even for IE. Then where you have IE issues, you can easily insert what is called child selectors just for IE.

BTW, that annoying popup message in IE is easily turned off in your browser.