Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts

    CSS table layout glitches

    Following the articles on Sitepoint (such as Table based layout is the next big thing), I've been playing about with using the CSS display:table property for layout, and trying to combine it with the CSS Framework developed by Mike Stenhouse of Content with Style and Suckerfish dropdown menus.

    I'm pretty much there with the layouts that have a navigation bar across the top, but have hit a snag with layouts that feature a navigation bar running in a column alongside the main content.

    This is the layout I'm aiming for:


    But, so far I've not been able to get a consistent display in Firefox 2 and 3, Safari 3 or Opera 9.

    Firefox 2 shows:


    Firefox 3:


    Safari 3:


    Opera 9:


    The problems with Safari and Firefox seems smaller, but there's still an annoying sliver of grey above the navigation bar, which I don't seem to be able to get rid of.

    The display:table technique is new to me, so I'm a bit stumped as to why the wide variation in display. A standard framework would be nice, but I'm not sure where to go next, as nothing I've tried so far seems to have much of an effect. I've zipped up a minimal version of the HTML and CSS if anyone else fancies something new to stretch the old grey matter.
    Attached Files Attached Files
    If anyone asks my boss, this counts as work, okay?

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It may help to get a response if you post your code so far. Most of us will not download zip files.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    I don't like being defeated, so I gave it another go, but I've still come up short. I've condensed the CSS into a single file (it's in various files which control different aspects of the site's presentation as per the CSS Framework I started with).

    The whole point of this was that, when IE8 is out and widely adopted, then display:table based layout will make constructing the basic grid for a site much easier. But instead I think I'm discovering behaviours in browsers that I'd never ordinarily come across and so have no idea how to crack.

    IE8 has the same annoying sliver of grey above the menu too...


    Anyway, as requested, here's the HTML and CSS.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Framework for CSS Table layout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css" media="screen">
    @import url("css/screen.css");
    </style>
    </head>
    <body id="index">
    <div id="page">
      <div id="header" class="clearfix"><h1>Header</h1>
        <hr />
      </div>
      <!-- end header -->
      <div id="content" class="clearfix">
        <div id="contentinnerwrapper">
          <div id="nav">
            <div id="navinnerwrapper">
              <ul class="clearfix">
                <li><strong><a href="home.html">Home</a></strong></li>
                <li><a href="articles.html">Articles</a></li>
                <li><a href="archive.html">Archive</a></li>
                <li><a href="photos.html">Photos</a></li>
                <li><a href="about.html">About</a></li>
                <li class="last"><a href="contact.html">Contact</a></li>
              </ul>
            </div>
          </div>
          <!-- end nav -->
          <div id="contentwrapper">
            <div id="main">
              <h1>Main</h1>
              <h2>Subheading</h2>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut ac leo in lorem ultricies sollicitudin. Vivamus molestie elit nec nulla. Suspendisse potenti. Suspendisse at lorem. Donec pulvinar, magna eget molestie pretium, justo sem iaculis urna, eget condimentum nibh augue pellentesque arcu. Integer tristique tempor mauris. Sed justo orci, commodo volutpat, sagittis vitae, varius vitae, massa. Maecenas pede ligula, iaculis sit amet, pharetra eu, adipiscing consectetuer, eros. Duis ullamcorper nisl ac magna. Nunc neque dolor, posuere dapibus, convallis non, tristique sed, nibh. Suspendisse quis leo. Phasellus pretium erat ut purus. Duis facilisis consectetuer sapien. Nulla eget pede ut nisl faucibus consequat. Quisque erat lectus, luctus in, pellentesque ac, adipiscing eu, enim. Donec ultrices laoreet urna.</p>
              <hr />
            </div>
            <!-- end main -->
          </div>
          <!-- end contentwrapper -->
        </div>
        <!-- end wrapper -->
      </div>
      <!-- end content -->
    </div>
    <!-- end page -->
    <div id="extra1">&nbsp;</div>
    <div id="extra2">&nbsp;</div>
    </body>
    </html>
    I've split up the CSS into the sections as they would be imported into the HTML file, and marked them. The bit that's relevant to the layout is from lines 300 to 324.

    Code:
    @charset "UTF-8";
    /* 
    A CSS Framework by Mike Stenhouse of Content with Style 
    -------------------------------------------------------
    
    Copyright (c) 2005, Mike Stenhouse of Content with Style
    
    All rights reserved.
    
    Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
    
        * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
        * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
        * Neither the name of CSS Framework nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
    
    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
    "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
    LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
    A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
    CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
    EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
    PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
    PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
    LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
    NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
    SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
    */
    
    /* Content of 'tools.css' */
    
    /* clearing */
    .stretch,  .clear {
    	clear: both;
    	font-size: 1em;
    	height: 1px;
    	line-height: 1px;
    	margin: 0;
    	padding: 0;
    }
    .clearfix:after {
    	clear: both;
    	content: ".";
    	display: block;
    	height: 0;
    	visibility: hidden;
    }
    .clearfix {
    	display:block;
    }
    /* end clearing */
    
    /* Content of 'typo.css' */
    
    
    /* TYPOGRAPHY */
    * {
    	margin: 0;
    	padding: 0;
    }
    html {
    	border: none;
    	font: normal normal normal 0.625em/100% "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
    	text-align: left;
    }
    body {
    	font-size:1em;
    	line-height: 1em;
    	word-wrap: break-word; /* Doesn't work for FF3 as yet - see http://blog.stchur.com/2007/03/01/word-wrap-for-mozilla-take-2/ */
    }
    div {
    	font-size: 1em;
    }
    img {
    	border: 0;
    }
    h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, li, dt, dd, caption, table, thead, tbody, tfoot, tr, th, td, legend, pre, address, del, ins { /* Block elements */
    	border: none;
    	font-size: 1em;
    	line-height: 1.4em;
    	margin: 0;
    	padding: 0;
    	text-decoration: none;
    	text-indent: 0;
    	text-transform: none;
    }
    a, abbr, acronym, strong, em, b, i, code, tt, q, cite, label, samp, dfn { /* Inline elements */
    	border: none;
    	font-size: 1em;
    	margin: 0;
    	padding: 0;
    	text-decoration: none;
    	text-transform: none;
    }
    /* LINKS */
    a, a:link, a:active {
    	text-decoration: underline;
    }
    a:visited {
    }
    a:hover {
    	text-decoration: none;
    }
    /* END LINKS */
        
    /* HEADINGS */
    h1, h2, h3, h4, h5, h6, strong, b {
    	font-weight:bold;
    }
    h1 {
    	font-size: 2em;
    	line-height: 1.5em;
    	margin: 0 0 0.5em 0;
    	padding: 0;
    }
    h2 {
    	font-size: 1.5em;
    	line-height: 1.5em;
    	margin: 0 0 0.5em 0;
    	padding: 0;
    }
    h3 {
    	font-size: 1.3em;
    	line-height: 1.3em;
    	margin: 0 0 0.5em 0;
    	padding:0;
    }
    h4 {
    	font-size: 1.2em;
    	line-height: 1.3em;
    	margin: 0 0 0.25em 0;
    	padding: 0;
    }
    h5 {
    	font-size: 1.1em;
    	line-height: 1.3em;
    	margin: 0 0 0.25em 0;
    	padding: 0;
    }
    h6 {
    	font-size: 1em;
    	line-height: 1.3em;
    	margin: 0 0 0.25em 0;
    	padding: 0;
    }
    /* END HEADINGS */
    
    /* TEXT */
    p {
    	font-size: 1em;
    	line-height:1.4em;
    	margin: 0 0 1.5em 0;
    	padding: 0;
    }
    blockquote {
    	border-left: 1em solid;
    	margin-left: 1em;
    }
    strong, b {
    	font-weight: bold;
    }
    em, i, dfn, q, cite {
    	font-style: italic;
    }
    q { /* Default (UK) quote marks */
    	quotes: '\201C' '\201D' '\2018' '\2019';
    }
    q:lang(en) { /* Add in languages and quote marks as necessary*/
     quotes: '\201C' '\201D' '\2018' '\2019';
    }
    code {
    	font-family: "Courier New", Courier, monospace;
    	font-size: 1em;
    	white-space: pre;
    }
    pre, code, tt {
    	font-family: "Courier New", Courier, monospace;
    }
    pre {
    	white-space: pre;
    }
    samp {
    	font-family: "Lucida Console", Monaco, monospace;
    }
    abbr, acronym {
    	border-bottom: 0.1em dotted;
    	cursor: help;
    }
    del {
    	text-decoration: line-through;
    }
    ins {
    	color: #f00;
    }
    /* END TEXT */
        
    /* LISTS */
    ul {
    	font-size: 1em;
    	line-height: 1.4em;
    	list-style: outside disc;
    }
    ol {
    	font-size: 1em;
    	line-height: 1.4em;
    	list-style: outside decimal;
    }
    dl {
    	font-size: 1em;
    	line-height: 1.4em;
    }
    dt {
    	font-weight: bold;
    }
    li, dd {
    	margin-left: 1.5em;
    }
    /* END LISTS */
        
        
    /* TABLE */
    table {
    	border-collapse: collapse;
    	font-size: 1em;
    	margin: 0 0 1.5em 0;
    	padding: 0;
    }
    table caption {
    	font-weight: bold;
    	margin: 0;
    	padding: 0 0 1.5em 0;
    }
    th {
    	font-weight: bold;
    	text-align: left;
    }
    td {
    }
    /* END TABLE */
    
    
    
    /* ODDS AND ENDS */    
    hr {
    	display: none;
    }
    div.hr {
    	border-bottom: 0.1em dotted;
    	height: 0.1em;
    	margin: 1.5em 1em;
    }
    img, a img, iframe {
    	border: none;
    }
    /* END ODDS AND ENDS */    
    
    
    /* END TYPOGRAPHY */
    
    /* Content of 'nav-vertical.css' */
    
    /* NAV BAR */
    div#nav, div#nav ul { /* all lists */
    	margin: 0;
    	padding: 0;
    }
    
    div#nav > div.wrapper {
    }
    
    div#nav ul {
    	font-size: 1em;
    	line-height: 1em;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 100%;
    }
    div#nav ul li { /* all list items */
    	display: block;
    	float: left;
    	list-style: none;
    	line-height: 1em;
    	margin: 0;
    	padding: 0;
    	position: relative;
    	width: 100%;
    }
    
    div#nav ul li a {
    	border-bottom: 1px solid;
    	display: block;
    	font-size: 1.2em;
    	font-weight: bold;
    	padding: 0.5em 0.83em;
    	text-decoration: none;
    }
    
    /* Content of 'layout-navleft-1col.css' */
    
    
    /* CONTENT LAYOUT - NAV BAR ON THE LEFT AND ONE COLUMN OF CONTENT */
    div#content {
    	border-collapse: collapse;
    	display: table;
    	margin: -3.5em 0 0;
    	width: 78em;
    }
    div#content > div#contentinnerwrapper {
    	display:table-row;
    }
    div#nav {
    	display: table-cell;
    	width: 20em;
    }
    div#nav > div#navinnerwrapper {
    }
    div#content div#contentwrapper {
    	display: table-cell;
    }
    div#main {
    	display: table-cell;
    	width: 54em;
    	margin:0;
    	padding:0 2em;
    }
    /* END CONTENT */
    
    /* Content of 'layout.css' */
    
    
    /* SITE SPECIFIC LAYOUT */
    body {
    	margin: 0;
    	padding: 0;
    }
    div#page {
    	margin:  0 auto;
    	padding: 0;
    	width: 78em;
    }
    /* HEADER */
    div#header {
    	margin: 0 0 5em 0;
    	padding: 1em;
    }
    /* END HEADER */
        
        
    /* CONTENT */
    div#content {
    }
    /* MAIN */
    div#main {
    }
    /* END MAIN */
                    
    /* END CONTENT */
        
    /* END LAYOUT */
    
    
    /* Content of 'colours.css' */
    
    /* BACKGROUNDS */
    
    body, fieldset legend,
    div#page {
    	background-color: #fff;
    }
    
    html,
    div#header,
    div#nav, 
    div#nav ul, 
    div#nav ul li a,
    div#nav div.wrapper,
    div#nav a, div#nav a:link, div#nav a:visited, div#nav a:active {
    	background-color:#ddd;
    }
    
    div#footer,
    div#nav ul li strong a, div#nav ul li strong a:link, div#nav ul li strong a:visited, div#nav ul li strong a:hover, div#nav ul li strong a:active, 
    div#nav ul li a:hover {
    	background-color: #000;
    }
    
    h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, li, dt, dd, caption, table, thead, tbody, tfoot, tr, th, td, legend, pre, address, del, ins, a, abbr, acronym, strong, em, b, i, code, tt, q, cite, label, samp, dfn, a:link, a:active {
    	background-color: transparent;
    }
    
    
    /* COLOURS */
    
    p {
    	color: #333;
    }
    
    a, a:link, a:active {
    	color: #00f;
    }
    
    a:hover {
    	color: #f00;
    }
    
    a:visited {
    	color: #60f;
    }
    
    html, body, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, dl, li, dt, dd, caption, table, thead, tbody, tfoot, tr, th, td, legend, pre, address, del, ins, abbr, acronym, strong, em, b, i, code, tt, q, cite, label, samp, dfn, 
    div#nav ul li a, div#nav ul li a:link, div#nav ul li a:visited, div#nav ul li a:active {
    	color: #000;
    }
    
    div#header,
    div#nav ul li a:hover,
    div#nav ul li strong a, div#nav ul li strong a:link,  div#nav ul li strong a:visited, div#nav ul li strong a:hover, div#nav ul li strong a:active {
    	color: #fff;
    }
    
    
    /* BORDERS */
    
    div#nav ul li, div#nav ul li a { 
    	border-color: #aaa;
    }
    It might be that what I'm trying to do, in creating a similar CSS framework to the one that Mike Stenhouse created, but for display:table layouts isn't possible (although I feel quite close, so that would be quite disappointing to find out).

    Any help will be very gratefully received!
    If anyone asks my boss, this counts as work, okay?


  •  

    Tags for this Thread

    Posting Permissions

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