Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorrambleon
    • CommentTimeJun 30th 2008
     permalink
    Hi,
    I have a web page where I was using "writing-mode: tb-rl" and a rotated background image
    for printing to emulate landscape mode, this worked fine in Explorer 6.
    In Explorer 7 the text is still ok, but the background image is squashed and streched out of
    all recognition, as if the writing-mode is causing the width and the height of the background
    image to be juxtaposed -that is height becomes the width and vice-versa.
    I've tried removing the writing-mode and and the background is fine but of course the text
    is not rotated.
    This is the css I'm using:

    @media print
    .printform {
    background-image: url("landscape form");
    width 500px;
    height: 1015px;
    position: relative;
    writing-mode: td-rl }

    Any help appriciated

    Thanks

    David
    • CommentAuthorrzea
    • CommentTimeJun 30th 2008
     permalink
    I haven't seen the "writing-mode: td-rl" declaration before, seems like that's a CSS3 rule. However, when I validate your declaration in the W3C CSS Validator site, it says that "td-rl is not a writing-mode value : td-rl".

    Anyway, to solve your problem: You're missing a semicolon on the width 500px;
    • CommentAuthorrzea
    • CommentTimeJun 30th 2008 edited
     permalink
    Mmm... looking around, isn't it writing-mode: tb-rl, with a b instead of writing-mode: td-rl with a 'd'?

    EDIT --
    Interesting, tb-lr is Top-Bottom and Left-Right...

    EDIT 2 --

    Not sure if something like this would work for you:

    <p style="DIRECTION: ltr; WRITING-MODE: tb-rl">rotated text</p>
    <div style="DIRECTION: ltr; WRITING-MODE: tb-rl">rotated text</div>


    This works for me in IE6/7, but not in Firefox 2.0.0.14
    • CommentAuthorrambleon
    • CommentTimeJul 1st 2008
     permalink
    hi rzea,
    Thanks for your comments, your right td-rl and the missing colon are a typos here, in the webpage its written correctly.
    My problem is not with rotating the text, "writing-mode: tb-rl;" rotates and positions the text correctley for printing
    both in Explorer 6 and Explorer 7.
    The problem is in Explorer 7 the same css corrupts the background-image(which is a pre printed form) .

    Using writing-mode: tb-rl; in Explorer 7 causes the height and width of the background-image to change orientation.

    any ideas appriciated
    • CommentAuthorrzea
    • CommentTimeJul 1st 2008 edited
     permalink
    Ohhhh! Got it. Well, that's because you're making .printform be written in writing-mode: tb-rl, hence, all elements inside will change orientation. You can not expect the text to change orientation and have the background stay the same, oh no, EVERYTHING inside .printform will change orientation.

    So I guess you're going to have to stack your layers one on top of the other via position: and z-index:

    BTW, do you have a link?
    • CommentAuthorrambleon
    • CommentTimeJul 2nd 2008
     permalink
    Hi rzea,
    Thanks for that, makes alot of sense. The thing is that wasn't the case in Explorer 6 only the text changed orientation and I thought writing-mode refered
    only to text like fonts or bold do. So what you're saying is if I put the background-image in another z-index it won't be affected by the writing-mode? I'd like to give you a couple of stars but that doesn't seem to be an option on this forum but please accept them anway - stick them in your resume.
    The web page we're talking about is workers pay-slips - I work for a service bureau doing company payrolls - so it's not for publishing on the internet - if you're really intrested I could email you an example.
    Once again thanks for your help.
    • CommentAuthorrambleon
    • CommentTimeJul 2nd 2008
     permalink
    BTW
    How do I give the bacground-image a different z-index in the above .printform
    • CommentAuthorrzea
    • CommentTimeJul 2nd 2008
     permalink
    "The thing is that wasn't the case in Explorer 6"--> Well, there are many other important browsers out there now, and although IE6 is still VERY HEAVILY used, there's a need to test in Firefox, Opera and Safari too.

    "So what you're saying is if I put the background-image in another z-index it won't be affected by the writing-mode?"--> Correct.

    "I'd like to give you a couple of stars but that doesn't seem to be an option on this forum"--> Yes, this forums lacks A LOT of features.

    "but please accept them anway - stick them in your resume."--> I will, LOL! :D Thanks though ^_^

    Yes, email me an example: rzea[a-t]rocketmail-dot-c-o-m
    • CommentAuthorrzea
    • CommentTimeJul 2nd 2008
     permalink
    To answer your second post, what you need to do is create 2 layers/DIVs, and stack them one on top of the other.

    This is the code:

    HTML:
    <div id="top">top</div>
    <div id="bottom">bottom</div>


    CSS:
    #top, #bottom {
    width:300px;
    height:300px;
    color:#fff;
    }
    #top {
    position:absolute;
    z-index:0;
    background:#000;
    }
    #bottom {
    position:relative;
    top:20px;
    left:20px;
    z-index:1;
    background:#f00;
    }


    With this code, the #bottom DIV will appear above the #top DIV.
Add your comments
    Username Password
  • Format comments as (Help)