Margins not applying

[Guest FirefoxRocks]

I'm designing a client-side "web application" for Firefox, Opera and Safari users. This problem does not apply to IE as the page isn't even targeted at IE users (IE users get a different, older version).Tables are to be used for tabular data, so I'm emulating a table using CSS display properties table, table-row and table-cell. As seen in the CSS code, the main div is displayed as a table, child divs are displayed as table rows and each <a> tag is a table cell. Here is my CSS code:

div#properties_list {	text-align: center;	display: table;}div#properties_list div.properties_list_group {	display: table-row;}div#properties_list div.properties_list_group a {	display: table-cell;	width: 33%;	height: 3em;	border: .5ex double #fd0;	padding: .5ex;	background-color: #006;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;	color: #fd0;	margin: 8px;	vertical-align: middle;	text-decoration: none;	font-size: 0.9em;}div#properties_list div.properties_list_group a:hover {	background-color: #fd0;	border-color: #006;	color: #006;}

Problem: See that margin: 8px; rule on the <a>? That isn't applying for some reason.I've also tried position: relative; left: 8px; top: 8px but that doesn't work either.How come margin and positioning properties aren't applying?The style sheet can be found here at cssBuilderStyles.php with the HTML code at cssBuilder.phpThe applied styles are under the Basic Styles tab in the application. As you can see, the link "cells" are really close together, obviously not 8 pixels apart.

[Ingolme]

Try changing display: table-cell; for display: block;. I've heard table cells don't actually work with margin and padding well, you need to use the cellspacing and cellpadding attributes for them.

[Guest FirefoxRocks]

Ok that took a lot of experimenting because it kept appearing as 1 long column of "blocks" but I finally got it with this code:

div#properties_list div.properties_list_group a {	display: block;	float: left;	height: 3em;	border: .5ex double #fd0;	padding: .5ex;	background-color: #006;	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;	color: #fd0;	margin: .4ex .2ex;	vertical-align: middle;	text-decoration: none;	font-size: 0.9em;	width: 28.5%;}

A minor issue is that vertical-align doesn't apply anymore, but that isn't a huge issue.

[rzea]

   -webkit-border-radius: 10px;   -moz-border-radius: 10px;

I guess you're not validating...?

[Guest FirefoxRocks]

I didn't say the style sheet validated...

[rzea]

You're welcome.