Adapting overrides for use in S2 (advanced version)

[livredor]

So I've been evangelizing S2 around lots of layout communities, and been doing quite a bit of helping people to convert their S1 styles to S2. I've turned up a couple of quirks that might be of interest, and I'm also curious to know why these things work the way they do, if anyone can tell me.

You can't use CSS comments in print_custom_head.

I'm sure everyone knows this already, but it's worth pointing out, because it's a good reason why pasting S1 overrides directly might not work. It also means you can't use some of the more elaborate browser selection hacks (on which more later). I'm confused about this, thank you kunzite1

Scrollbar colour overrides have to be applied to html rather than body.

Yeah, I know, IE specific, whatever, but it's a very popular customization. I was getting really frustrated with the overrides not working, and started reading the HowTos where I discovered that for some layouts, you should put the CSS rule in html rather than body. This seems to be quite generally the case when putting overrides in print_custom_head, regardless of which layout you're working with. From what I know of CSS it seems like html {} and body {} should have the same effect.

You can't use child selectors, because > is escaped to >.

I Zilla'd this at kamara's suggestion, but who knows if it will get fixed. I take it that it's a side-effect of a security precaution. The main reason I use child selectors is, to be honest, browser selection; html>body div {} allows you to specify rules that IE doesn't see. After much poking around on CSS websites (and help from troworld) I have found a way round the browser selection issue which does work in S2. So in case anyone needs it, * html body div {} is read by IE but ignored by standards-compliant browsers.

As far as I can tell, filters don't work in S2 at all.

Another IE specific thing, yes, and I'm not exactly a fan myself. But again, lots of teenyboppers like them, so I've faithfully tried to copy them over from their S1 overrides to S2, and they do nothing. I have no idea why this should be; a security thing? Is there any way to make them work?

display: none works weirdly in S2 + IE.

One very common trick is to use CSS to hide most of the default navigation and then put a load of HTML in LASTN_WEBSITE to specify an image map, header image, or customized text. Obviously it's hacky and if I'm making S2 layouts for paid users I might as well just delete the navigation box from the layer. But if I'm trying to teach people to do this for themselves, it's easier to tell them just to paste their overrides, and point to the place where they can put the LASTN_WEBSITE HTML into Page::print.

For some reason, this works fine in Mozilla but in IE, the container will display but not the text in it, which is obviously useless as it leaves coloured boxes all over the layout. The same overrides work perfectly well in both browsers in S1; I think it's probably one of the most common customizations requested and there are thousands of people using it.

Strange ideas about the height of the page

I know that the height property in CSS just generally isn't very well supported cross-browser. But again, it's a case of overrides working fine in S1 but strangely in S2. If you use a rule like div {height: 50%;}, in S1 your entries take up half the screen in Mozilla or IE. And the page appears without a right-hand scrollbar no matter how much content there is, which is the point of this kind of rule. But in S2 the same rule works in Mozilla as expected, but in IE the browser seems to assume that the container is huge and gives you a div which is 50% of huge so you have to scroll a mile even if there is hardly any content. (The way round it is to mess around with browser selector hacks and set the div with a percentage height in Mozilla and an absolute height in pixels for IE, but that's desperately hacky and not very satisfactory!)

I'm thinking that a lot of these things may be to do with S2 layouts setting a different DOCTYPE from S1 layouts. That seems the most likely reason why the same CSS would work in S1 but break or behave strangely in S2. Can anyone enlighten me on the technical details of this? As you can probably tell by reading this my knowledge of CSS is kind of patchy!