Solved

Faded Borders - Tables or CSS ?

Posted on 2006-07-23
4
1,268 Views
Last Modified: 2008-01-09
I'm trying to use tables (or DIVs) to create a faded border around my contents. The contents can have its size adjusted via JS from 100px x 100px or higher and 100% x 100%, and of course I would like the borders to properly match up.   More exactly, the contents is always set to 100% width/height and it is the outer container that has its size adjusted.  I then expect the inner contents (ie. the image.jpg in my example) to auto-stretch.

So far with tables I've had a tuff time using rowspan and so dropped it but now i have large gaps along the top horizontal and bottom horizontal (I want the contents to fit snuggly up against where the border fade starts and not have to see some open gap before the contents begins or after it ends). With exlcusive DIVs I cant even begin without FF or IE vomiting all over the place - it seems to move elements to new lines or plain disappear.

Here is my page: http://www.eyedef.net/help1/border.htm

Is it possible to have faded borders (PNG) viewable in FF and IE that can wrap around my contents which can be adjusted to various size within and yet have the borders properly match up?

Note: because Im trying to use PNG images, under IE i had to make use of the AlphaFilter to display the image.  I am unable to use background-image under IE since it cant view PNG properly.  And the AlphaFilter doesnt support repeating images.  Form the URL you will see the table view with the various images used to create the border.  Each area is unique and cant be repeated by a single image.
0
Comment
Question by:ljaques
4 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 63 total points
ID: 17163255
you can use the onion-skin technique:  http://alistapart.com/articles/onionskin/
use 8 nested divs: one for each border (repeating background) and one for each corner (non-repeating background).
that makes lots of additional markup, but it's the most reliable technique.
0
 
LVL 2

Assisted Solution

by:yyilmaz
yyilmaz earned 62 total points
ID: 17165195
Another solution from a list apart
http://alistapart.com/articles/cssdrop2/
it resizes well.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap 3 and Angular 2 12 55
Centering a nested div 16 59
Unwanted gap in IE11 between header and menu 9 20
Change javascript css 1 21
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now