Template modding with CSS rounded boxes/borders. How To?

[SeánT]

OK so with the help of a few decent helpful people, namely kobra, stevesh, and swguy I managed to get the Future Zen template installed and configured a good bit of the backend of my store. I then set about the aesthetic appearance of things and was trying to get a rounded box to sit around/behind the center of the page. This took me a long time and there was great wailing and gnashing of teeth. However using Snazzy Borders I finally got the sort of the layout I wanted, and was just about to go and make some decent images to replace the ones on the site, when I thought I'd better just give it all a check in IE and Chrome.

Oh dear. My rounded box courtesy of Snazzy Borders works properly in neither of the other browsers. Rather than try to fix this problem I'm wondering if there is anybody out there who would be able to hazard a guess how to integrate the following with Zen Cart? because not only is it better looking on the page but it appears to be perhaps more simple than the code that is used in Snazzy Borders. I tried positioning the DIV tag in the same place as the first Snazzy Borders <DIV> tag in tpl_main_page.php and the </DIV> where the last Snazzy Borders </DIV> tag was but that hasn't worked. I'm wondering really if anybody can explain why it hasn't worked or even tell me if what I am trying to do is possible given the code below.


TL;DR : How can I get these types of rounded borders working in Zen Cart?

the css

#border-radius {
		  	display:inline-block;
		  	padding:1em;
		  	border:3px solid #999;
		  	-moz-border-radius:8px;
		  	-webkit-border-radius:8px;
		  	-opera-border-radius:8px;
		  	-khtml-border-radius:8px;
		  	border-radius:8px;
		}

		#border-radius2 {
			display:inline-block;
			border:3px solid #999;
			padding:1em;
			-moz-border-radius:32px;
			-webkit-border-radius:32px;
			-opera-border-radius:32px;
			-khtml-border-radius:32px;
			border-radius:32px;
			text-align:center;
			width:13em;
			margin-left:1em;
			background:#eee;
		}

		#border-radius2 pre {
			background:transparent;
		}

		.css-demo {
		  	margin-bottom:1em;
		}

		.css-demo pre {
		  	background:transparent;
		  	margin:0px;
		  	padding:0px;
		  	border:none;
		}

XHTML

<!--example 1
<div id="border-radius" class="css-demo"></div>
	
<!----example 2
<div id="border-radius2" class="css-demo"></div>

also while I was on my travels I found this site which has a collection of different CSS rounded box styles some using images and some without. Some of them are very pleasing on the eye.

Also this is my potential store here

[EDIT]
Actually here is the place that css up above came from, there's code for nifty drop shadows as well.

[gjh42]

#navBreadCrumb {
    margin: 0;
    padding: 1em;
    border: 3px solid #999;
    border-bottom: none;
    -moz-border-radius: 8px 8px 0 0 ;
    -webkit-border-radius: 8px 8px 0 0 ;
    -opera-border-radius: 8px 8px 0 0 ;
    -khtml-border-radius: 8px 8px 0 0 ;
    border-radius: 8px 8px 0 0 ;
    }

.centerColumn {
    margin: 0;
    padding: 1em;
    border: 3px solid #999;
    border-top: none;
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    -opera-border-radius: 0 0 8px 8px;
    -khtml-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    }

#indexHomeBody .centerColumn {
    border: 3px solid #999;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -opera-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius:8px;
    }

[SeánT]

Thanks Glenn that was very good of you but unfortunately in my ignorance I still can't get it working. Tried just inserting it 'as is' in stylesheet.css but it appeared to do nothing so I removed other references to #navBreadCrumb and .centerColumn (there was no other reference to #indexHomeBody, I don't know why that might be) Anyway that didn't work either. Presumably this should have done the trick without having to insert any div tags in tpl_main_page.php? I tried doing that just in case but still no joy.

With the original code up above it works a treat with a stylesheet and HTML, it's even possible to nest the style from example 2 within the style of example 1. I'm guessing from the fact that a man with over 13,000 posts under his belt thinks it can be got working in Zen Cart that it can indeed be got working. Please if anybody has any ideas or suggestion as to how to do this they'd be extremely welcome. Cheers!

[SeánT]

OK after some more messing around I got the original code working simply by inserting it between <style> tags in tpl_main_page.php

I really wonder why it doesn't work from the stylesheet?

Can anybody say why? I'd love to understand.

[gjh42]

It works when I paste it into my test site's stylesheet, in Firefox. It will not work in IE before IE9, because the 800 pound gorilla never bothered to implement this often-requested feature until now, making it essentially useless while the vast majority of users were on IE. Now that IE's market share is declining and they are about to introduce a version that has most of the CSS functions other browsers have had for a while, it is time to start using the modern versions of things like CSS rounded corners.

Rounded corners are not necessary to any kind of website function, and those that don't support it will just get square corners while everyone else gets easy rounded corners. This is called "progressive enhancement", meaning that modern browsers get fancier effects, while older ones are square... er, get standard appearance. If you can deal with some users seeing a less fancy version, it will be an incentive to them to upgrade to browsers that deliver the bells and whistles.

If you feel it necessary to jump through the hoops to give less-capable browsers the identical appearance of modern browsers, then that's what you need to do.

[gjh42]

The style rules above also work on your site when I add them to the end of your stylesheet in Firebug - adding an inner border because you have the wrapper divs styled for the same effect.

[SeánT]

Glenn thanks very much for what you've done, I'm going to go and have a play with this new knowledge, I didn't even know I could use firebug to edit until now. This is all fairly new to me and there's huge amounts to take in, what you've said and done has probably saved me days of stabbing around in the dark, cheers!