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.
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.