PDA

View Full Version : Issue with creating images borders (Left & Right side)


NastyAccident
08-30-2007, 09:49 AM
Hello,

I've been working on converting a pure table based website layout to a CSS driven layout, so far it has been rather successful. However, I'm having an issue with applying a border image that gives depth to the main content area.

The site (http://www.nastyaccident.com/testpage.html)'s code is valid (by W3C standards) and so is the site's CSS sheet (http://www.nastyaccident.com/yorkhi.css).

The images that are suppose to provide this depth on the 'ideal template' (http://www.nastyaccident.com/yorkhi/IdealTemplate.jpg) are located here:Right Border (http://nastyaccident.com/yorkhi/img/rightborder.gif) and Left Border (http://nastyaccident.com/yorkhi/img/leftborder.gif). I've looked at W3C specification sheet for any hints on doing this, all they return is a simplistic border-left-image property which is only CSS3 and, thus, not usable since no browser has support for CSS3... Well, the big name browsers Fire Fox and IE7.

The solutions and/or tutorials that I've looked at haven't helped me out at all:http://www.heavenlysocial.net/html-tutorials/liquid-dropshadows-and-curved-borders-4.html, http://www.alistapart.com/articles/cssdropshadows/, and http://www.codingforums.com/showthread.php?t=122576.

Would I have to create two columns along side the content container to create the correct border? Is there something that I'm doing improperly since the header content and border content is extending onto the border image, whenever I attempt to apply a possible solution? Or, is something amiss with my knowledge of CSS?

Any help, advice, or suggestions are welcomed heartily.

Thank you for reading.

Actinia
08-30-2007, 11:06 AM
Could you not provide a background image to provide the borders, and then center your image within that?

John Rostron

ahallicks
08-30-2007, 11:17 AM
How about creating a background image for your container that is about 10px wider than your intended page with the borders on either side exactly how you want them. Then all you need to do is pad the container on the left and right however wide you want the border to be? Same as above kind of, but with a little more detail ;)

NastyAccident
08-30-2007, 10:29 PM
Hmm, I've resolved the issue myself by switching the container width, which was sixty five percent at the time, to a fixed amount.

However, I do appreciate the assistance you folks gave to me. Many thanks, the site looks great with the shadow effect.