CSS Textarea Background Conflict (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

FallenZen -> CSS Textarea Background Conflict (8/31/2005 12:29:15)

Hey folks. The problem is best viewed, rather than simply explained.
http://www.myspace.com/agnostischizm

There is a conflict between MoZilla and IE6 in the text-input field. If you view it in IE, you will notice a rose on the righthand side of the textarea, non-repeating and text doesn't overlap the image. Perfect, right?
Now, view it in MoZilla. The rose is suddenly gone, isn't it? Try resizing your browser window. You'll find, as I found, that the rose is anchored to the browser's edge - not the textarea's edge.

How might I sort that out so that I can render the effect I've achieved in IE (which, was admittedly an accidental discovery) in MoZilla? Also, could someone with Opera installed please tell me what it looks like for Opera users?

I've never seen this sort of thing done before, and googling it has brought me either too many links that don't have the right information, or no links at all. So I assume it's either undocumented or I'm simply asking the wrong questions.

Any and all help will be greatly appreciated. Thanks for reading. I've attached a document containing the CSS I'm presently using as a plaintext document to this post. If you're uncomfortable with attachments, you can always view the full source of the MySpace page, and pick at the CSS from there.



Tailslide -> RE: CSS Textarea Background Conflict (8/31/2005 13:26:51)

I think the problem is with IE incorrectly (oh suprise!) interpreting the positon:fixed "rules" - the W3C regulations state that items that have a position:fixed should be in relation to the viewport and not any element that you try to fix it in - which is why you can only see it in Moz/FF/Opera when you resize the screen so that the image happens to be under the element you want it to be under. It just happens that IE's mistake was the effect you were looking for.

I did some minor fiddling (not tested widely) but it looks as though if you do away with the position:fixed you get the rose in the right place on FF too. It looks like a case of either stick with the IE mistake or do away with the fixed look. I don't think it needs to be fixed to be honest - looks ok just sitting there.



FallenZen -> RE: CSS Textarea Background Conflict (8/31/2005 14:05:43)

Thanks for the swift response.

It seems that, if I do away with background-attachment:fixed, I do indeed get something closer to the desired result acrossed multiple platforms.

But now, the scrollbar in MoZilla makes the rose seem as though it's in its own table cell instead of in the textarea, and doesn't scroll.
Exactly the opposite is true for IE, the rose scrolls, but the scrollbar is properly placed and the rose appears to be inside the textarea.

Any further advice is definitely welcomed. I'd like to accomplish the "accident" effect (for lack of a better term) acrossed multiple browsers... But for now, this suffices.

A thought: Would there be an option such as background-anchor (made-up term, but you get the idea) which I can use to anchor it to the textarea instead of the viewport area? If so, that would be perfect for this scenario.

Thanks.

Oh, addendum: The CSS attachment earlier is now as outdated as a Dell, 10 seconds out of the box. I decided it was too ugly for even my hideous coding, so I'm overhauling it. :-D

~Zen



Tailslide -> RE: CSS Textarea Background Conflict (8/31/2005 16:18:18)

Hi again

Fiddling again and found that if you got rid of the padding-right the scrollbar was in the right place in FF - don't know what that did to IE though.

I've been researching a bit about fixed backgrounds recently because I'm in the process of using one on a site I'm doing. What I found seemed to add up to:

Yes you can put a fixed background on anything but don't expect it to work well in all browsers and expect Opera to choke on anything that isn't fixed to the body itself.

The basic feeling I got was that it was a "Bad Idea" to use fixed background images on anything except the main body of the page. I'm open to people telling me different though!

Good luck with the code overhaul - we've all been there (I've got a season ticket!)



FallenZen -> RE: CSS Textarea Background Conflict (8/31/2005 16:22:59)

Aye, I'd found that if I eliminated the padding-right things were okay, but then the text overlaps the rose. That renders some of the text hard to see, and I'm already abusing opacity filters about as much as I dare. The whole goal of the padding was to keep the text from overlapping a watermarked rose.

You've been incredibly helpful, thank you. I'm still on the drawing board, though. Any further thoughts you may have, please don't hesitate to let me have 'em. :-D

Thanks again, Tailslide.

~Zen



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625