View Full Version : Table spacing

01-04-2008, 01:20 PM
I am creatng a website using both html tables and css.

Please see my website here (http://www.w-co.co.uk/Group/index.php).

I am having trouble keeping the buttons on the right in a fixed place.

When i add new content spaces form in between the buttons when i dont want them to.

Please note the text is just for an example and is actualy been put there using a php include.

I have tried speacifying the tr and td height but this does not help.

Please help me with any suggestions.

01-04-2008, 02:00 PM
I have a suggestion for you: Don’t use tables for layout! They are not meant for what you are (mis-)using them. Use a list to mark up your list of links (i.e. navigation) and float that to the left or right, wherever you want it to appear.

Or even better would be to have the content first and float that to the left so that your navigation moves up.
A very simple example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
margin: 0;
padding: 0;
background-color: white;
color: black;
font: 62.5&#37; Verdana, Arial, Helvetica, sans-serif;
#container {
font-size: 1.4em;
width: 55em;
margin: auto;
.skip, hr {
display: none;
#content hr {
display: block;
#header {
border: 1px solid green;
position: relative;
#header ul {
margin: 0;
padding: 0;
list-style: none;
#header li {
display: inline;
#topnav {
position: absolute;
right: 20px;
bottom: 20px;
#topnav .skip {
display: none;
#mainnav {
background: #1A5694;
#mainnav a {
color: #D9BD14;
#content div {
border: 1px solid aqua;
#nav {
float: right;
width: 20%;
border: 1px solid maroon;
#main {
float: left;
width: 75%;
border: 1px dashed maroon !important;
#footer {
border: 1px solid blue;
clear: both;
<div id="container">
<div id="header">
<div>more header stuff&hellip;</div>
<hr />
<div id="content">
<div id="main">
<p>Donec sit amet augue et tellus ornare vulputate. Quisque hendrerit cursus justo. Morbi tellus
ligula, tristique eu, egestas vitae, venenatis nec, dui. Cras porta imperdiet velit. In metus
lectus, fringilla ornare, viverra ac, sodales vel, felis. Maecenas sed nibh ac justo commodo vulputate.
Donec in risus eu neque mollis varius. Integer pellentesque. In eget augue. Mauris sed ligula
quis velit mattis consectetuer. Donec vehicula nisi a leo. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Vestibulum cursus.</p>
<p>Nunc in sapien. Nulla in lacus nec augue interdum tempor. Curabitur rutrum dignissim lacus. Pellentesque
ac enim in orci dignissim tempor. Integer ac tortor. In adipiscing, lorem ut accumsan tincidunt,
metus dui porttitor enim, id fringilla nulla lorem nec orci. Phasellus sem sem, tempor eget, rhoncus
quis, scelerisque et, nunc. Mauris venenatis dapibus diam. Aliquam mi odio, commodo sit amet,
sagittis in, euismod in, quam. Maecenas mollis nisi vitae nunc tempus ultrices. Nullam est. Donec
tellus nibh, pharetra eget, malesuada eu, lacinia a, lectus. Duis et arcu feugiat lorem euismod
sollicitudin. Nulla felis urna, ultrices a, mollis quis, imperdiet ut, neque. Suspendisse sollicitudin
nunc non dui. Nulla convallis mi quis justo. Phasellus nec risus eu dui dapibus dignissim.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Pellentesque diam metus, sollicitudin varius, facilisis
at, placerat feugiat, est. Donec eget lectus. Donec elementum. Quisque condimentum imperdiet elit.
Vivamus vestibulum dignissim arcu. Pellentesque in justo sit amet eros pellentesque posuere. Nunc
nunc lectus, lobortis ut, sollicitudin non, cursus vitae, augue. Donec leo sapien, laoreet quis,
molestie molestie, sagittis eu, nibh. Aliquam erat volutpat. Morbi sed mi ut risus hendrerit luctus.
Nulla imperdiet sodales mauris. Praesent mauris nunc, auctor ut, elementum eu, vehicula ac, purus.
Quisque sit amet eros at pede dapibus egestas. Suspendisse volutpat tellus ut ligula. Mauris arcu
justo, lobortis a, tristique non, aliquet nec, velit. Aenean lobortis nisi ut sem. Duis eu magna
in odio molestie elementum.</p>
<ul id="nav">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<hr />
<div id="footer">
<li class="skip"><a href="#container">Skip to top</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<div id="copyright">&copy; 2007 Company, Inc. All rights reserved.</div>

Note: Styles are in the head for demonstration only. In real life they should be put in an external stylesheet.

01-04-2008, 02:09 PM
Thanks VIPStephan :thumbsup:

I have used css positioning in the passed to create xhtml strict web pages. for this instance though when i was trying certain things in IE and FFwernt in the correct place. I am talking like a couple of pixels out.

Have you any suggestions when postioning in css if something is going how you would like?

01-04-2008, 02:26 PM
The absolute position of an element is relative to the next relatively or absolutely positioned ancestor element. It’s complicated to explain and I’ve found that most sources don’t explain it properly (which leads to all the misconceptions and problems that unexperienced people often have) but I’ll make it short anyway:

If you position a span within a div absolutely the span’s point of reference will probably be the edge of the viewport (browser window). However, if you position that parent div of the span absolutely or relatively the span’s point of reference will be the edge of the div, not the viewport anymore. So if the div is moved the span will move with it (while this won’t happen if the div is moved without being specifically positioned).

So, in a nutshell: cross browser positioning is best achieved if you know what it does and if you keep IE’s proprietary layout model (http://www.satzansatz.de/cssd/onhavinglayout.html) and the dependencies of positioned anchestors and child elements in mind.

01-04-2008, 03:08 PM
Thanks for the quick response.

I have decided to try again with creating this website using only css and not tables like you have suggested.

I have a quick question regarding my buttons that i wish to have on the right hand side.

Do all of the buttons need there own css positioning attribute or can i use one for all?

I do not want them over lapping and directly under each other.

Sorry for all the n00by questions.

I am learning though :)

01-04-2008, 03:50 PM
Did you check out my code thoroughly? We have this here:

<ul id="nav">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>

…which is a list of links. And as such they will be displayed under each other by default. You can now use some CSS image replacement (http://www.mezzoblue.com/tests/revised-image-replacement/) technique to replace the plain text of the links with images, or you can put the images into the links directly instead of the text that is there now. No positioning is needed at all in any case.

01-04-2008, 04:36 PM
I didnt even think of that.

It works great in IE but in FF it has the bullets showing. How do i get rid of them?

01-04-2008, 05:10 PM
#nav {list-style: none;}

I’d also recommend that you set margins and paddings for lists as they have a different default in different browsers. by setting them you make them the same across all browsers:

#nav {
margin: 0;
padding: 0;
list-style: none;

01-04-2008, 05:54 PM
I am nearly there with the positioning!

Its perfect in IE 7 but the buttons are slightly out in FF!:mad:

Link (http://www.w-co.co.uk/Group/index.php)

I have tried changing margins, padding everything.

Any fianl tips how to set this right. I dot not want to give up now after all of this!

01-04-2008, 05:59 PM
The explanation of the gaps between the images can be found on Images, Tables, and Myterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps)

Basically what you need to do is make the images display like block elements:

#nav img {display: block;}

01-04-2008, 06:07 PM
Its not the gaps in between the buttons that is the problem.

Is the actual postioning of the list.

If you view my site (http://www.w-co.co.uk/Group/index.php) in IE 7 and then FF you will see what i mean by its perfect in IE but not FF

01-04-2008, 07:24 PM
I ain’t go no IE7 at the moment. All I can say is that Firefox and any other mostly standards compliant browsers (to which no version of IE currently can be counted) show what you have coded while IE makes something out if your stuff because it thinks you could have meant that.

According to your source code I see that the list is exactly where it’s supposed to be. I barely see any CSS that tells it to be elsewhere. If you want to get it up next to the text I’d suggest to float the element #main to the left and give it some width, and float the navigation list to the right.

01-04-2008, 08:08 PM
Looking at the site, it looks like that the width of that header image is 990px. Whereas the width of #container is set to 100em. Change the width of #container to 990px and the width #main to 712px (may need slight adjustment depending on the width of #nav).

As a side note, I suggest when you cut your graphics up, that you don't put whitespace in them at all. It looks like all your nav images have about 10+ pixels of whitespace in them on the left. Not having the whitespace will give you more control.