...

View Full Version : CSS table layout glitches



butlins
10-31-2008, 03:47 PM
Following the articles on Sitepoint (such as Table based layout is the next big thing) (http://www.sitepoint.com/blogs/2008/02/28/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 (http://www.contentwithstyle.co.uk/content/a-css-framework) 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:
http://i33.tinypic.com/4r7sit.png

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:
http://i35.tinypic.com/4r58w9.png

Firefox 3:
http://i35.tinypic.com/2lm40ty.png

Safari 3:
http://i35.tinypic.com/2ezjvwh.png

Opera 9:
http://i38.tinypic.com/2wcirmw.png

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.

effpeetee
11-01-2008, 09:29 PM
It may help to get a response if you post your code so far. Most of us will not download zip files.:D

Frank

butlins
11-05-2008, 11:56 AM
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...
http://i35.tinypic.com/sqkyms.png

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


<!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.


@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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum