Hi Chris
Whilst I cannot tell exactly what you have done without seeing your
markup, I would expect the problems you are experiencing could be
overcome by using another strategy.
This article is terrific on achieving drop shadows ...
http://alistapart.com/articles/onionskin/
... but for those out there that like to remain 100% semantic (I
respect you all!), it might raise eyebrows through its use of
additional <div></div>'s ... or "divitis" as some call it.
As an alternative, this article offers an additional solution:
http://alistapart.com/articles/cssdropshadows/
... whereby offsetting negative margins and padding allow you to
offset your shadow from your box outline.
You can also make use of pngs instead of jpegs for true
transparency ... and you can make them work on ALL browsers, even
IE5.5 and IE6. I came across this article recently, and have
implemented its technique on a site with success across all non-png
friendly browsers ...
http://homepage.ntlworld.com/bobosola/
Please note, this does require Javascript to be operational in the
browser.
Hope this helps.
Regards,
Peter
On 27/07/2006, at 12:12 AM, Christian Fagan wrote:
Hello all,
I am about to go insane....
I am creating a website for a client that has, as its main visual
impact feature, a drop-shadowed background. This background was
originally designed to dynamically resize to accomodate all text-
sizes (I've attached a small screen shot).
ie. using the 'background-image: url('1pxTall.jpg ')' and
'background-repeat: y' attributes the background would repeat as
many of these 1px tall images as it would need to perfectly contain
the page content.
My problem now is that I have had to give the <div id="container">
of this background-image a*height - because without it, the it
automatically sets to 0....the content stays in the same spot on
the page but the background-image shoots upwards - like a vertical
blind that has been yanked too hard and just flies up.
Now, before you suggest something like giving the container a value
for height based on text-size: like 38em, I tried this exact value
for the container and it looks fine for the normal text size on FF
and IE but if you increase the text size, some of the page material
falls outside the designated area - doesn't look very good. And, in
general, I'd like the background-image to perfectly complement the
page material no matter what size...
Is there a way I can either give the container a height value or
not so that it will 'contain' all content within AND apply the
proper background effect? And...what is making this container
appear empty, without a height value, when it contains all page
content???
--
Christian Fagan
Fagan Design
0432 220 579
[EMAIL PROTECTED]
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
<screenshot.jpg>
--
Peter Dominic Ryan | raycity* : new media solutions : proven
[EMAIL PROTECTED] | http://raycity.com | mb: 0419 229 738
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
