a lot of problems with this site - on anything but Mozilla

A quick glance through the CSS shows nothing bad up, and again a quick glance at the problem areas shows nothing glaring. It works spot-on in Moz1 <edit>ahem next time I'll read the title of the post</edit> - but IE chokes. It's not bad CSS, it's bad IE...

OK I took out the float:left box which holds the title and now the title shows fine in IE (well, IE6). God only knows how to get the blurb on the right to show in IE - I removed the 'position : relative' from the first-paragraph-content-style and it then showed, but the title disappeared off to the left... I then returned that statement and removed the background-colour, and it showed up again. Grr.

More to come...

Hey, thanks so far. I'm trying to head up a project at work which will use Apache, PHP, MySQL and (ta-da!) CSS. I want to push CSS, so that we can avoid the tables. I'm a great evangelist, but not so good in execution. As I said, I couldn't draw a circle in Photoshop...

Anyway, thanks for the advise...

chewy

There's more coming! Honest! Quite busy outside of the internet world at the moment, but I'm getting there...

Got the title sorted. Going back to what is on the site (rather than what I said before), simply add position:relative to the .pg-title-box-right class; and remove float:left from pg-title-box-left. Well that bit now works in IE.

I'll continue posting in dribs and drabs since if I leave it all till the end I won't remember what I changed...

Individual story headers : bit more complex.

I removed the position:relative; from .content and the float:left from the .storyTitle. Thing is then, the <div class=storyDept> must come before the <div class=storyTitle> to get the floats right. Hope that bit isn't too much hassle...

Same deal with the footers. Remove the float:left from the date, and move the name DIV above the date DIV to get it floating right.

Ok ok ok ok! (Like Joe Peschi in Lethal Weapon 3)

That is amazing. I don't understand it, but it works brilliantly.

I feel like an aboriginal warrior seeing gunpowder for the first time.

Tell me, is this sort of wizardry second nature to you? How did you come to this knowledge?

I built the site piece by piece, when I needed a block to stick to the right, I used float:right;. How did you know that it was not necessary?

Thanks again!
chewy

Many, many hours of trying to get my site( working...

float:right is necessary, but in those cases float:left wasn't, as there was nothing in the middle.

The position:relative stuff was new to me, just fiddled around until something worked. Suppose I knew what it wasn't, so was able to mess with the rest.

You just pick things up as you go along. Like, if you have a DIV with two floats inside it and nothing else, that DIV won't show up unless you give it some content of it's own (the problem with your blue background subheads).

I also have waaaay too much time on my hands at the moment...

I find regular back ups of my CSS files and then messing arround with stuff you wouldn't think would matter is the best way to get Opera, IE, Mozilla compatability. Can't claim to be an expert tho.

I recommend a good read of the Visual formatting model part of the spec, as it will help you to understand boxes are generated.

It's especially important to understand which elements will be removed from the normal flow and how that will affect/create your layout (see dJomp's post above about floats in a containing div - this happens because floats are taken out of normal flow - "In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float").