Autarchy of the Private Cave

Tiny bits of bioinformatics, [web-]programming etc

    • Archives

    • Recent comments

    Archive for February 19th, 2007

    Multiple IEs on one Windows: enabling Printing in IE6

    19th February 2007

    After IE7 came out, it got much harder for HTML/CSS coders to maintain compatibility with both IE6 and IE7.
    IE7 is pushing IE6 out, as it is a high-priority update; however, massive part of users will remain on IE6 for various reasons, not excluding the licensing issues (non-licensed/fake-licensed Windows XP will not let install IE7).

    The problem is: after installing IE7, you no longer have IE6 (which is replaced by IE7).

    However, there is a good and simple solution, enabling one to run IE3 through IE7 on one computer.
    To do so, just install the latest version of IE you want (I assume it’s IE7), and then point your browser to evolt’s archive of browsers (what an excellent collection!). You will have to “install” (just copy, really) each older IE you want into a separate directory, and create a short-cut for each. (You may want to use all-in-one installer, found here – also a great package, though I didn’t use it.)

    After I installed IE6, I also copied some additional files to its folder (like wininet.dll, version 6.00.2900.2180 or like that), to avoid problems with cookies disabled in IE6.

    However, there is a huge problem with multiple IEs: Print Preview and Print do not work at all!
    After some searching, I found two bug reports:

    • clicking on any bookmark will not load the bookmark, but will open the Print dialogue
    • trying to use the bookmark-derived Print dialogue appears not to work: produces blank page

    Read the rest of this entry »

    Share

    Posted in Programming, Software, Web, XHTML/CSS | 3 Comments »

    Vertically align text to bottom within div

    19th February 2007

    I was looking to solve this extremely common problem – when you need to vertical-align:top/middle/bottom something within the DIV element. So far not a single solution fits my exact case, but I collected different solutions here for convenient reference.

    • vertical-align CSS property should be applied to the inline element within your DIV (which is a block element), and NOT to the DIV itself. For this to work, you may need to set line-height and font-size to the height of the enveloping DIV element:
      1. <div>
      2. <img src="/images/demoBoxH.gif" alt="" />
      3. </div>
      1. div{
      2.     height:200px;
      3.     width:200px;
      4.     background:blue;
      5.     text-align:center;
      6.     line-height:200px;
      7.     font-size:200px;
      8. }
      9. *>div{
      10.     font-size:12px
      11. }
      12. img{
      13.     vertical-align:middle
      14. }
    • there is a different approach: for the element within your DIV, set display:absolute and bottom:0px (or top:0px) to vertically align to bottom or top, respectively. Note that this approach doesn’t let aligning to “middle”, and that it works best when only one block-level element is aligned – otherwise elements will overlap at the bottom/top of container DIV. Container DIV should be set to position:relative.
    • another approach: we can set the container DIV to
      1. div {display:table-cell;vertical-align:middle}

      because for table cells vertical-align property works as one might expect from common sense and the text-align property. Basically, by doing so we ask the browser to treat our DIV as a table-cell, where vertical-align works just perfectly. However, this approach appears not to work on most IE browsers (probably except for IE7 only, but I didn’t try, as I need IE6 support as well).

    • one more table-cell-display-based solution by Nikola:
      1. .nav_next a {
      2. display: table-cell;
      3. width: 85px;
      4. text-align: center;
      5. padding-top: 60px;
      6. position: relative;
      7. top: 60px;
      8. margin-top: -60px;
      9. }

      This time, display:table-cell is applied to the immediate text container (anchor in the example), and then padding-top is added to push text to the bottom. Should work in FF3 and IE6; in FF3, this solution worked in a test setup without the last 3 CSS attributes, but YMMV.

    • vertical alignment can be simulated with margins, applied to the element(s) within the container DIV. This is a simple approach and I would recommend it, if the heights of the container and elements within it are known (otherwise, this method is of no help). Example application of this method: if you have a DIV container 200px high, and need to position some SPANed text within it; first, set SPAN to
      1. span {display:block; height:20px}

      (or whatever height value fits your requirements), and then set margins to vertically align the SPAN. To align your SPAN to top, you would apply

      1. span {display:block; height:20px;margin-bottom:180px}

      to your SPAN; to align to bottom –

      1. span {display:block; height:20px;margin-top:180px}

      to align in the middle –

      1. span {display:block; height:20px;margin:90px 0px}

    References:

    (The problem I have involves vertically aligning two DIVs within a container DIV so that DIV1 is aligned to top, and DIV2 is aligned to bottom, and their content is aligned appropriately to top/bottom, and that it works in at least IE6, IE7, FF2. If anyone has a ready solution – please comment. When I find mine, I’ll add it to the list above.)

    Share

    Posted in Programming, XHTML/CSS | 5 Comments »