I'm back to fiddling with web pages made by others. Ugh I hate this, and particularly when my jolly ideas on how to improve them don't work.

At http://hoary.org/testing/testing.html you'll see a helpfully minimized reconstruction of the problematic part of a page I'm fiddling with. That it's (i) a fixed-width design and (ii) in XHTML transitional are not my decisions. By contrast, I've deliberately used lurid colors in order to make the [male-bird*]-ups easier to see and describe.

*Can we do without the nannyware?

If you're using a moderately recent KHTML or Gecko browser (offhand I don't know about the others) and aren't colorblind, you'll probably see a rectangle (div.profile) divided unequally into a blue left half (div.profilefacts) and a yellow right half (div.profilewriteup). So far, just as intended. But way over to the right is an image (img.profilephoto). It's as if I'd specified

position:fixed;
right:20px;

for it. However, I did not. Instead, I specified

position:absolute;
right:20px;

and so it should be 20px from the right of its immediate container (div.profilefacts). Or that's what I think, and anyway it's what I want.

What pearl of CSS wisdom have I overlooked?

I didn't know that was a bird name in English. How interesting.

I, too, would be very happy if we could get rid of the word censor.

Nope. It will be positioned relative its closest ancestor with a position other than static. If such a box doesn't exist it will be positioned relative the root element. For practical purposes that means the browser window.
http://www.w3.org/TR/CSS2/visudet.html#con...g-block-details
The way to set a box up as a containing block for an AP box is to make it 'position: relative' (w/o offset).

Hm. Can't get it to work with you AP box. Must brood.

The source code definitely shows position: fixed; in Safari3/Mac.

Why use positioning anyway, be it fixed or absolute. Get rid of it and the image will be placed in the blue box at 20px from the right edge.

Yeah, I just realized that a few gray hairs later. Shame on you, Peter Evans! Tricking us like that!

Aarrghh!

Frederiek writes: The source code definitely shows position: fixed; in Safari3/Mac.

Here's what happened. I did use "position:absolute" (honest!). I couldn't figure out why it was fixed, but then it occurred to me that it had been so long since I'd last used this stuff that I might have got them the wrong way around. So I switched it to "position:static". No change. So I changed it back -- but it seems that I forgot to save till after I'd uploaded.

Frederiek writes: Why use positioning anyway, be it fixed or absolute. Get rid of it and the image will be placed in the blue box at 20px from the right edge.

Oh, it works! Thank you!

That shows how long it has been. I was under the impression that to use "right" and the other three you had to use "position" as well.

Pandy writes: Nope. It will be positioned relative its closest ancestor with a position other than static. If such a box doesn't exist it will be positioned relative the root element.

That doesn't even sound familiar. I'll have to re-skim-read whichever CSS book by Meyer it is that I have in my office, halfway across Lake Tokyo from where I sit. Good: it can replace Erotic Grotesque Nonsense as my commuting read: EGN is a lovely title, fascinating subject, dreary book.

No, you remember it right. It's 20px from the edge because of the 20px padding. The offset isn't used for anything. If you do it like this you'll have to make adjustments for IE's shortcomings though. The image drops below in IE (8 anyway).

IE -- why doesn't it just die?

But it won't do so any time soon. Hmm, any hints about what I might do in order to keep MSIE as well as decent browsers happy? Split the whole thing into three "columns" (rather than two with the first itself split into two)?

It does seem that what I want to do is extraordinarily simple. Perhaps it's the bizarre demands made by MSIE that is what forced the commercial makers of this site that I'm attempting to streamline to write bloated code with tables for everything and nothing.

I haven't heard much yet of IE8's inconsistencies in CSS, it's thought to be more standards compliant, even implementing some of CSS 3.

I just looked around at http://www.d.umn.edu/itss/support/Training...design/css.html. Only two entries there that are not relevant here. Doing a search on "css in ie8" in Google might come up with something useful.

IE probably adds a few pixels margin to the float (read at positioniseverything). So either make the layout less tight, give the boxes a little leeway, or use AP as you originally meant to.

Ah, the old box model problem.

I thought it was history, but I'd forgotten about quirks mode, because I always invoke a "strict" DTD. This page invokes "transitional" and it's a bit of a crock so making it strict would probably be too much of a challenge.

Oh well, kludges coming up. http://www.456bereastreet.com/archive/2006..._css_box_model/ looks useful.

Always so tempting to add

<!--[if gte IE 5]>
<p><strong>Did you know that better alternatives to Internet Explorer are free for the downloading?</strong></p>
<![endif]-->

No, not the box model. That's gone, at least in Strict Mode. Not the float model either, I think. IE has lots of bugs and/or unconventional behaviors with floats, one of them adds small margin. I'm just guessing that's the one, too lazy to break it down. You can look it up at PIE if it matters to you.

When then I suppose I shall just have to commandeer a Windows machine and bricole away with the CSS -- making CSS soup, as it were -- tlll the result looks more or less OK, and then plop all that stuff into the stylesheet accessed via conditional comment.

Again, I'm out of date, sorry. So what's "PIE"?

(I still wish that MSIE would die.)

Well, if you stick to AP as you originally planned there are no hacks needed



The site I mentioned above. Sorry, thought you knew. They have a section dedicated to IE bugs. A little old now, but so are the bugs.
http://positioniseverything.net

Ah, right.

You'll find a later draft at , or within, this temporary page. Without first making any changes for MSIE -- no change of DOCTYPE, no division of labor between DIVs used for padding and other DIVs used for dimensions, no special stylesheet invoked by a "conditional comment", no CSS hacks, nothing -- I took a look at it via whatever version of MSIE was bundled with the version of WinVista that was being sold a couple of months ago. I expected the worst. I was astonished to see nothing wrong whatever. It looked pretty much the same as it did via Mozilla. I wonder if MSIE8 (I think it's called) renders XHTML 1.0 Transitional in standards mode.

I suppose MSIE 6 and 7 will screw it up and aren't so old that I can ignore them.

Incidentally, don't be surprised by horrors of coding and appearance in that site. I know there's more work to be done on it before it even "satisfices' [ugh] me



I did once join Facebook for an hour or so. Under an assumed name, of course. The hour seemed to last a lot longer.

The two top boxes with the pictures of the girls are fine in IE6. In the ones below the blue picture with signs drop below.

Those two top boxes use tables (and weren't created by me); the boxes below are mine.

As I hazily understand it, most of the improvements in CSS standards compliance came between versions 7 and 8, not 6 and 7. And even 6 isn't so old that I can ignore it.

OK, I'll attend to it later.

Since uploading that revision, I've noticed more miscellaneous idiocy. I've fixed perhaps 80% of what I've noticed and shall upload the result a few hours from now. Then I'll attend to Microsoft's mistaken box model. And then the other mistakes.

Don't complicate things. The way you originally went about it works without problems, only you weren't aware of the containing block thing. Make the container boxes position: relative and you're all set. There's nothing wrong with AP, not when it's used with sense. Personally I think it's great for what I call positioning details withing restricted areas, as this is an example of. It's when people start to position every detail on the page relative the browser window, in best DW style, that it goes nuts.