SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border on display: table-cell element

    I'm rewriting part of the CSS and xhtml for a site, switching tables for floats. However, I notice that the top border exceeds the height of my "maincontent" table cell and juts into the floated item above (h_linkbar). The maincontent float is nested within the table div, "tshell_1," while the h_linkbar is written above the tshell_1 element (in the xhtml and the css).

    I haven't been able to find a written reference to this problem and I don't have a solution. May I ask someone to point me in the right direction (towards an understanding of borders in CSS, which I can't seem to find in _Everything you know about CSS is Wrong_, an archived message, or elsewhere)? Thanks in advance.

    I'll post the two css codes.

    Old (with floats):
    ...
    Code CSS:
    #maincontent {
    	float: left;
    	width: 544px;
    	margin-bottom: 0px;
    	padding-bottom: 5px;
    	padding-right: 8px;
    	font: 85% verdana, arial, sans-serif;
    	color: #000033;
    	background-color: #FFF8DC;
    	border-top: solid 1px silver;
    	}
    New (with table properties)
    Code CSS:
    #maincontent {
    	display: table-cell;
    	border-collapse: collapse;
    	width: 544px;
    	margin-top: -1px;
    	margin-bottom: 0px;
    	padding-bottom: 5px;
    	padding-right: 8px;
    	font: 85% verdana, arial, sans-serif;
    	color: #000033;
    	background-color: #FFF8DC;
    	border-top: solid 1px silver;
    	}
    BTW, I've tried it with and without the border-collapse set to collapse and separate... and without a border-collapse statement.
    EDIT: Also, I've tried various combinations of border-collapse with margins, no margins, and negative margins. Thnks!!

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2008
    Location
    Bristol ,England
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry not sure if this is what your on about but if you float somethink like you have always be sure to clear the floated elements or you get some strange results, so under your last floated item use <br clear="all" />


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •