Don’t know if anyone can help with this, but I thought I’d give it a try anyway ;-) The challenge I’m facing stretching a vertical image in div, with dynamic content in front of it (with z-index). The div surrounding the text contains an image (<img>) that stretches according to the amount of content. There is more explanation on the linked page. (Sorry admin, but I don't know how to explain this without a link) See example: jeurisseninvestigations.be/test.html The page works perfectly in Firefox and IE8, but fails to comply in Safari. Grrr ;-) I have worked on this for some days and came up with the solution to add overflow:hidden to this div, which at least is a solution to use the code without having to worry if the user can still read the text. The reason I’m trying to find a solution for this is because I believe there are a lot of designers looking to find a solution to this. It creates a lot of new possibilities when this would work. Do you think you can help me or do you know a way to accomplish the exact same thing? Please let me know if you need more information… Thanks in advance!
1) You are nesting too deep. Aka you've got some extra DIV that you shouldn't be needing. 2) while it's a cute technique, I advise against doing it since you'd need javascript (well, a behavior file) to get it working in IE6, and CSS off/small screen users will have the content pushed clean off the page by your image. If I were to absolutely desire this approach, I'd suggest using a handheld.css to make certain that image is set to display:none; (still doesn't fix the CSS off issue, but at least less handheld users won't want to rip you a new hole) 3) You really want to do that, get rid of the 'stretch' div as that could be causing problems, declare width="1" height="1" in the markup, then set the height and width to 100% in the CSS. If that wrapping DIV #content is set to position:relative it should work in Safari. 4) you cannot rely on z-index:-1; - given what you are doing you might not even NEED z-index, but if you were to everything to go on top should be given something like 2 while the background get's 1. Negative z-index is very unreliable... 5) You've got a heading inside an anchor (invalid markup) that could be causing issues too. Remember, inline-level goes INSIDE block-level, not the other way around. When I'm back at my workstation later today I'll toss together how I'd code that... Which would probably end up a bit less code.
... and here it is. http://www.cutcodedown.com/for_others/indeo/bareTemplate.html as with all my examples the directory: http://www.cutcodedown.com/for_others/indeo is unlocked for ease of access to the gooey bits and pieces. Tested working 100% in Opera 9.6 and 10, FF 2 and 3.5, IE 7 & 8, and the latest versions of both safari and chrome. The actual layout/stretch also functions in IE6, the only thing being 'broken' there is of course the alpha transparency .png (which as a rule I refuse to use on my own sites!). Valid XHTML 1.0 Strict, would be valid CSS if not for the IE hacks/workarounds. There are a LOT of issues to work around for cross-browser. Unreliable position fixed meaning we need emulation (and #scrollWrapper) for that, I nuetered down the javascript a bit so it wasn't making wasteful (and slow) lookup calls more than it needed to. The 'technique' to fake position fixed is simple, lock html/body to the viewport size, tell them overflow:hidden so they don't make scrollbars, then absolute position a 100% width/100% height overflow:hidden div#scrollwrapper. Anything inside #scrollwrapper will scroll, anything outside it will not. I used the H1 for that top border container, using a negative margin instead of positioning to remove it from flow. A few spans allow for easy positioning. Being it's outside #scrollwrapper it's position is fixed. I don't need a div for the top image, we can just use the outer wrapping #content for that, though we do need one for .borderBottom. our .borderMiddle class is set to position:relative and haslayout, so when we say height:100% inside it the browsers don't ignore that. The image doesn't need any extra wrapping nonsense. Again, I set it to 1x1 in the html so that CSS off/handheld you don't have this giant pointless image in the middle of the page. I then override it's size using the CSS. A * html hack hides and expression from newer browsers that lets even IE 5.x work with this technique if scripting is enabled. (while newer browsers just use the CSS) From there it's just a matter of setting .borderContent with it's proper padding to place the text.... That's how I'd go about it... turns out I used about the same number of DIV, just in different places. Still pretty simple. For further expansion I'd find a way to NOT use alpha transparency at all (fixing any IE issues), to set a darker background-color behind the content area so images off isn't so hard to read, and see if there is some way to make the text overlap the top/bottom image so you can narrow the borders if need be without changing the image effect. Hope this helps -- Jason
So you are a real guru ;-) I have learned everything by trial and error, I'm really glad with all the tips you gave me, and I think a lot of people will benefit from this one ;-) for the png problem I use the following javascript which seems to do the trick in almost all browsers I have tested: jquery-1.3.2.min.js and jquery.pngFix.js I also intend to use more of the jquery code in the future for my projects. It simplifies things a bit for me. I'm more a designer than a coder, and sometimes I find these things that no one seems to have found a solution for ;-) But what now! Problem solved really cool!! Thanks a million deathshadow!!!
See, I would never... EVER use Jquery or anything that relies upon it - if nothing else than as a tribute to a departed friend, but also because it's true. The only thing jquery teaches is how not to program javascript. Jquery just results in bloated and slow code, usually with so many files linked into the final page you end up with tens of seconds of overhead JUST from handshaking. ... and I really don't consider the effects provided by alpha .png to be worth the bandwidth, or effort of most techniques for using them... though I am looking at the newest pngfix linked to by Rochow in another thread and saying that's ALMOST worth trying - at least it's a .htc so it won't get sent to every browser, just to the ones that need it. The majority of jquery itself is nothing more than **** that should be done in the CSS, not in the scripting, replicating existing objects in a cryptic manner, a handful of it is ajax handlers which while handy, are slow as molassas thanks to a half-assed object oriented layout in an INTERPRETED language... and anything written using jquery suffers as a result from bloat, speed issues, and pretty much flushing the codebase of anything that uses it down the toilet. It gets worse when the majority of the stuff people write with jquery makes the old-school crap on Dynamic Drive look good. (Which is a bit like making a 1985 Yugo GV look like a quality automobile!) But then, there's a whole bunch of bullshit technologies I see people using... or should I say attempting to use, that IMHO flush any website built with them down the crapper. jquery, mootools, prototype, grid, YUI, dreamweaver... or gee aint it neat bullshit with no graceful fallbacks for those of us who don't want CRAP like Flash, AJAX or other bandwidth WASTING malarkey, or even this nutjob approach of starting out drawing a pretty picture in photoshop instead of starting out with actual content and semantic markup. Mark up the content semanticallly, bend that markup to your will with CSS to create the layout, THEN go back through, add your presentational hooks as needed to create images to hang on the layout... Starting out drawing some stupid pretty picture == /FAIL/ hard since such designs rarely take into consideration dynamic fonts, dynamic layouts, dynamic content, or graceful degradation - Much less important things like accessibility.