Table alignment compensation

Forum Moderators: open

Message Too Old, No Replies

Table alignment compensation

But the logic is perfect.

music_man

1:34 am on Jan 17, 2006 (gmt 0)

I have tried to align two images on either side of a navigation table. For some obscure reason it puts them 10px below the navigation. I have had to add 10px compensation padding to the table to make it align properly.

I am sure the image does not have extra space on it. Another problem is that it does not align in Safari and the colour is different!

Thanks

[edited by: tedster at 3:00 am (utc) on Jan. 17, 2006]

tedster

3:01 am on Jan 17, 2006 (gmt 0)

This sounds like it may possibly be a quirks mode vs. standards mode issue. What is your DTD?

music_man

5:13 am on Jan 17, 2006 (gmt 0)

Here is the code snippets. Sorry it is long.

general.css

---------

body
{
margin: 75px 0px;
padding: 0px;
text-align: center;
background-image: url('/inc/img/bgyellow.jpg');
}

.hidden {

display: none;

}

h1, h2, h3, h4, h5, h6 {

font-weight: normal;
margin: 0px;
}

#container
{
width: 90%;
margin: 0px auto;
text-align: left;
background-color: #fff;
border: 1px dashed #000;
color: #000;
background-image: url('/inc/img/topleft.jpg');
background-position: top left;
background-repeat: no-repeat;
}

#header
{

text-align: center;
}

#title
{
font-family: "Curlz MT", Arial, Sans-Serif;
font-size: 5em;
color: #000;
}

#logoright
{
position: absolute;
top: 15px;
right: 35px;
}

#navigationtable
{
margin: 0 auto;
}

#navigation a
{
background-image: url('/inc/img/navbgmid.png');
color: white;
padding: 10px;
font-family: arial, Sans-Serif;
font-size: medium;
text-decoration: none;
}

#navigation a:hover
{
background-image: url('/inc/img/navbgmidselectover.png');
color: #000;
}

/* For some STUPID reason, the images won't align on the table, hence the workaround padding */

#stuffedup
{
padding-top: 10px;
}

#content
{
font-family: Arial, Sans-Serif;
color: #000;
font-size: 1.5em;
padding: 10px;
}

#content h1
{
font-size: 1em;
}

#content h2
{
font-size: .8em;
}

#content h3
{
font-size: .6em;
}

#footer h5
{
font-size: .6em;
text-align: center;
font-family: Arial, Sans-Serif;
}

#current
{
background-image: url('/inc/img/navbgmidover.png');
color: #000;
padding: 10px;
font-family: arial, Sans-Serif;
font-size: medium;
text-decoration: none;
}

-----------

header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title><?php echo $title?></title>
<link rel="stylesheet" href="inc/css/general.css" />

</head>
<body>

<div id="container">

<div id="header">

<span id="title">Lyn's Scrapbooking</span>

<br />
<br />

<div id="navigation">
<table cellpadding="0" cellspacing="0" id="navigationtable" summary="Navigation table with: Home, About, Shopping, Classes, Calendar">
<tr>
<td valign="top">
<img src="inc/img/navleft.png" alt="Left navigation image" /></td>
<td valign="top" id="stuffedup">

<?php if ($page!='index') { echo "<a href=\"index.php\" title=\"Home\">Home</a>";} else { echo"<span id=\"current\">Home</span>";}?><?php if ($page!='about') { echo "<a href=\"about.php\" title=\"About\">About</a>";} else { echo"<span id=\"current\">About</span>";}?><?php if ($page!='shopping') { echo "<a href=\"shopping.php\" title=\"Home\">Shopping</a>";} else { echo"<span id=\"current\">Shopping</span>";}?><?php if ($page!='classes') { echo "<a href=\"classes.php\" title=\"Classes\">Classes</a>";} else { echo"<span id=\"current\">Classes</span>";}?><?php if ($page!='events') { echo "<a href=\"events.php\" title=\"Events\">Events</a>";} else { echo"<span id=\"current\">Events</span>";}?><?php if ($page!='resources') { echo "<a href=\"resources.php\" title=\"Resources\">Resources</a>";} else { echo"<span id=\"current\">Resources</span>";}?><?php if ($page!='contact') { echo "<a href=\"contact.php\" title=\"Contact\">Contact</a>";} else { echo"<span id=\"current\">Contact</span>";}?>

</td>
<td valign="top">
<img src="inc/img/navright.png" alt="Right navigation image" /></td>
</table>
</div>


<span id="logoright">
<img src="inc/img/logo.png" alt="Lyn's Scrapbooking Studio Logo" /></span>

</div>