Jump to content

Margins not applying


Guest FirefoxRocks
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...