Absolute positioning of content in a containing block

A less formal alternative title would be "Placing content from the middle of a box into a sidebar to the edge of a containing block"

Context

The problem first occurred when I tried to create a user style for a login page to accomodate small screens (Yes, there are people who use small screens).

The main problem was that I could not change the structure of the not-so-well designed page, so I had to resort to some unorthodox uses of formatting in CSS. Later it turned out ot have some interesting uses in a sister blog.

The basic [formatting] concept behind this is taking content out of normal flow, placing it as a sidebar into the top right edge of the container block, and then making sure that other content (mostly visible text) will then flow around the sidebar box.

While it may sound simple just like that, then implementing a working solution for the first time proved more difficult. The solution that I found out does work, but still contains some caveats. More about it later and below.

In-depth

What does not work

First off, just floating the box to the right is pointless, because the box is positioned according to normal flow and is floated where it's structurally positioned in the page (or text). It is then adjacent to that content which only follows the box in the page structure.

Adding a negative top margin is just as impractical, because it will never be accurate relative to the sidebar's position, as the position of the sidebar still depends on how much space is taken up by preceding objects or text, since relative renderings are always different, depending on fonts, rendering engines and zoom levels.

If you're modifying your own content, then putting the box before the content that initially preceded it defeats the purpose of normal text flow (as seen in Lynx).

The solution

Mostly assuming that the containing block and inner blocks are <DIV> elements, which I so dislike, because they are severely overused.

The points are here in a hierarchically continuous order, so as to present the logic and reasons behind it.

• The containing block,
  which is to enclose the sidebar and content that should surround it:
  Set its position to relative — This will keep absolutely positioned blocks inside the containing block; otherwise all absolutely positioned blocks will be taken out of all flow and will be (absolutely) positioned relative either to any preceding relatively positioned block in the page hierarchy, or the viewport, which is the topmost block.
• The sidebar's position must be set to absolute, with most important parametres set like this:
  
  <DIV STYLE="position:absolute; top:0px; right:0px; width:234px">Textual content<DIV>
  

  ^ top:0px and right:0px will place the sidebar box to the top right (to right of main content), where position is calculated from the containing block's top and right edges; width:234px — Here you can specify your own width for the absolutely positioned box.

• And finally, the tricky part — How to make sure that content or text surrounding the sidebar will show next to the sidebar without all of parts of it staying hidden under the sidebar?
  
  Well, my solution was to place the that content (which precedes the sidebar and is innards) into a relatively positioned DIV& box, with its right margin approximately the amount of the sidebar's width. This ensures that text or content inside that DIV won't stay under the sidebar.
  
  If the sidebar is long enough to encompass much of the content that follows, then that content should also be encased in a DIV with similar parametres: relative positioning and same margins.
  
  Caveats:
  • If much of the content left of the sidebar is text, then its flow is limited to the squares of DIV boxes (there must be at least two of them). Normally flowing text could then start well after the sidebar and DIV boxes end.
    
    Mitigating effects
    One way to mitigate this without creating separate DIVs and their left (or right) margins is to create a ghost DIV with same size properties as the sidebar floated right just under the absolutely positioned sidebar. This has better chances of taking effect if the sidebar's height and width are fixed and that the content is controlled server-side.
    
    Yes, the "ghost" DIV can contain about the same text, if there's a desire for that ghost DIV to follow the size of the primary DIV (think differences in fonts and zoom levels), but this then may defeat the purpose of having that text in the ghost sidebar, because it would be duplicating. Oh well, solutions can be made both with JavaScript and CSS to make sure this text doesn't appear twice in a text-only or very plain browser (think Lynx).
    
    Otherwise I was thinking of :before and :after pseudoelements, or of a way to insert a client-side Greasemonkey script.
    
    This is now the point where one can play around with various options.
    
  • I found another problem when editing text here in Blogger, where the sidebar height was greater than text next to it, so the sidebar, given that it was absolutely positioned, overlapped past the post tools area. In that sense it's a good thing to try out the size of the sidebar in the DOM Inspector, which allows client-side visual editing of webpage elements under inspection.
    
    One way to mitigate this would be wrapping all of the affected content, including some preceding the sidebar (where it visually starts) in a DIV and specifying a height greater than the height of the sidebar. The height of the DIV should then allow for some hypothetical differences in size.
  
  

This out-of-order sidebar solution works in Firefox 1.0 (Mozilla 1.7.xx, preferably SeaMonkey 1.1.19 or K-Meleon 1.5.4) and newer. It does not work in Internet Explorer 7 (or older), so a workaround must be in place, if there's a large IE-based audience in mind. It should probably work in Internet Explorer 8 or newer.

Adding formatting to CSS generated content

This solution (or workaround, if you like) came out of a need to write text visible only for modern browsers.

I have a case, where such text would point out a formatting feature containing further information in <ACRONYM> tags, only that severely out-of-date and text-only browsers do not support the dotted underline and border properties, so help text for these browsers was not necessary. I wouldn't use JavaScript (which uses document.write) and there are websites like WordPress (IINM) that only allow editing CSS files and may forbid JavaScript.

The CSS 2.1 specification has it that it's possible to create generated content before or after an element, using :before and :after pseudo-elements, respectively.

The best explanation about how it works is in the CSS2 technical recommendation at W3.

The difficult part is in how to format text within the content: property.

Well, there are two ways that work and a third way that is a workaround. The two ways are well-documented in the W3 technical recommendation (see above link), where it's possible to specify attributes with first-letter and first-line (for longer texts within content) pseudo-elements.

The Third Way

Specifying formatting for bits of text within the content: property is impossible, so the solution is to create one or more rulesets of :before or :after pseudo-elements with similar declaration blocks, wherein some rulesets' declarations are different.

In HTML, write the following snippets of code:

<SPAN CLASS=text></SPAN><SPAN CLASS=dotted></SPAN><SPAN CLASS=bits></SPAN> and so on...

In CSS, example code shows the following:

.text:after {content:'^ Mouse over text with\ ';}
.dotted:after {content:'dotted underlines'; border-bottom:dotted 1px; border-bottom-color:inherit;}
.bits:after {content:'\ for more infobits'}
/* ^ Use the backslash \ to escape special characters, including a space (or it won't be shown). */

The result:

Browsers, which don't support CSS :before and :after pseudo-elements, won't see this. ^

The result is used here in a previous blog post. The example text snipped was put in place of a paragraph break, but since the Lynx browser wouldn't create a paragraph break inside a list with <P></P> or <BR><BR>, or instead there was more space added in modern browsers with variants that included a non-breaking space  , then the best solution was to wrap above HTML code within <DIV> tags and add a non-breaking space —

<DIV>&nbsp;<SPAN CLASS=text></SPAN></DIV>

Characteristics

The most interesting and equally obscure characteristic with CSS generated content is, that generated text cannot be directly copied — even when selecting a normal area that wraps around generated content, then only the wraparound selection is pasted.

While this may be useful to wonks interested about protecting original content, then it's still a chore to implement, and advanced users would still be adept at copying text from near the source (unless obfuscated). The technique is similar to mechanisms that disable direct text copying in advanced document files, like PDF, but with the difference in sophistication: PDF files have encryption and other features.

The (dubious) advantage is, that direct copying is disabled; and the disadvantage is, that a number of browsers don't support these pseudo-classes. And not just older (Netscape 4) and niche browsers (Lynx, Links, Elinks), but even Internet Explorer 7 doesn't.

16.12.2015. Update:

I recently wanted to add newlines to generated content, but after several turns of trial-and-error with \A in content:, I turned to a search engine and found about the best blog post by Chee Aun that describes the issue in detail.

The solution with Firefox is to specify white-space:pre-wrap — This preserves both wrapping and newlines.

pilet.ee-sse ei saa sisse

Juhtus selline lugu, et tegelikult päris modernse, kuid õige pisut aegunud Mozilla Firefoxiga (versioon 3.0.19) läksin pilet.ee kodulehele ning seal tekkis selline veateade:
"invalid security certificate".

Veateade annab võimaluse lisada pilet.ee domeen erandite nimekirja, kuid seda pole tegelikult vaja teha.

Sama veateade võib tulla ka teiste vanemate Gecko-põhiste lehitsejatega, nagu näiteks SeaMonkey (Mozilla edasiarendus), K-Meleon, Galeon, Epiphany jt.

Lahendus:
Tarvis on lehitsejale peale panna Sertifitseerimiskeskuse sertifikaadid siit või siit.

See on suhteliselt lihtne, sest sertifikaatidele tuleb peale klikkida ja siis ilmub programmidialoog, mille kaudu saab sertifikaadid lehitsejasse panna. Saab valida vähemalt, et nende sertifikaatidega saab ära tunda veebisaite.

Tuleb tähele panna, et see protseduur tuleb veateate esinemisel teha igas lehitsejas ja lehitsejaprofiilis eraldi. Lähtuda võib kasvõi sellest, kui lehitsejas niisugune veateade tekib.

Kui niisuguseid asju juhtub ka Internet Exploreriga, tuleb sertifikaat samamoodi peale panna.

Unable to change HTML and HTM file icons

I found the solution at MozillaZine Forums.

I didn't do all of the things that were described in the second instruction set, as I only had to go as far as delete the IconHandler key from the registry, re-access the Tools > Folder Options > File types dialog and click OK for both file types, after which the filetypes' correct icon finally appeared.