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.
-
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 -
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; -
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 -
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 -
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? -
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. -
BTW
How do I give the bacground-image a different z-index in the above .printform -
"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 -
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.
1 to 9 of 9