Image in table refuses to align to top

  • Thread starter Jondot
  • 9 comments
  • 1,582 views
Jondot

Jondot

6,584
United Kingdom
Kent, UK
GTP_Jondot
Hello, i'm having great difficulty doing a relatively simple thing.

I have a table at the top of my page, 100% wide and 260px tall. I've then got that split into 2 cells. In the left cell, i have a transparent gif of a BMW 6 series headlight, and in the right cell i have a transparent png of my site's logo. Neither the GIF or the PNG will align to the top with anything i do. There's a 14px gap in the way.

I'm using Dreamweaver, and it appears to align fine when in there, but in my web browser it doesn't work. I've tried everything - splitting the cell into 2 rows, adding another table underneath, adding an extra transparent bit to my gif, and i'm now stuck...

It's basically a template for Joomla, so it should be something to do with the CSS (but i can't find anything whatsoever that might be doing it).

Source code:

Code: 
<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
    initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
//script to determine which div setup for layout to use based on module configuration
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;
// banner combos

//user1 combos
if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
    $user1 = 2;
    $user2 = 2;
    $colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
    $user1 = 1;
    $colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
    $user2 = 1;
    $colspan = 1;
}

//right based combos
if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
    $right = 1;
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css"/>
</head>

<body>
[B][COLOR=Red]<table width="100%" height="266"  border="0" style="background-image: url(http://thecarforum.net/images/three/topbg.png);background-position: top center;background-repeat: repeat-x">
  <tr>
    <td width="53%" height="262"><div id="maintitle">
        <p><img src="http://thecarforum.net/images/three/6series.gif" width="300" height="260" /></p>
      </div>
        </td>
    <td width="47%" height="262"><div align="right"><img src="http://thecarforum.net/images/three/updateglow.png" width="300" height="260" /></div></td>
  </tr>
</table>[/COLOR][/B]
<table width="90%"  border="0" align="center">
  <tr>
    <td height="72"><div id="left_outer">
                      <div id="left_inner">
                      <?php mosLoadModules ( 'left', -2 ); ?>
                      </div>
                  </div></td>
    <td><table width="100%"  border="0">
  <tr>
    <td><center><img src="http://thecarforum.net/images/three/ad.gif" width="25" height="60"> 
<script language='JavaScript' type='text/javascript' src='http://advertising.thecarforum.net/adx.js'></script>
<script language='JavaScript' type='text/javascript'>
<!--
   if (!document.phpAds_used) document.phpAds_used = ',';
   phpAds_random = new String (Math.random()); phpAds_random = phpAds_random.substring(2,11);
   
   document.write ("<" + "script language='JavaScript' type='text/javascript' src='");
   document.write ("http://advertising.thecarforum.net/adjs.php?n=" + phpAds_random);
   document.write ("&amp;what=zone:2&amp;target=_blank");
   document.write ("&amp;exclude=" + document.phpAds_used);
   if (document.referrer)
      document.write ("&amp;referer=" + escape(document.referrer));
   document.write ("'><" + "/script>");
//-->
</script><noscript><a href='http://advertising.thecarforum.net/adclick.php?n=a8979c91' target='_blank'><img src='http://advertising.thecarforum.net/adview.php?what=zone:2&amp;n=a8979c91' border='0' alt=''></a></noscript></center><br /></td>
  </tr>
</table>
<div id="content_outer">
                    <div id="content_inner"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table">

                                <?php
                                if ($colspan > 0) {
                                ?>
                                    <tr valign="top">
                                        <?php
                                      if ( $user1 > 0 ) {
                                          ?>
                                          <td width="50%">
                                              <div class="user1_inner">
                                              <?php mosLoadModules ( 'user1', -2 ); ?>
                                              </div>
                                          </td>
                                          <?php
                                      }
                                      if ( $colspan == 3) {
                                         ?>
                                            <td width="2">
                                                <img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="10" width="2"/>
                                            </td>
                                        <?php
                                        }
                                      if ( $user2 > 0 ) {
                                          ?>
                                          <td width="50%">
                                              <div class="user2_inner">
                                              <?php mosLoadModules ( 'user2', -2 ); ?>
                                              </div>
                                          </td>
                                          <?php
                                      }
                                        ?>
                                    </tr>
                                    <tr>
                                        <td colspan="<?php echo $colspan; ?>">
                                            <img src="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/spacer.png" alt="" title="spacer" border="0" height="2" width="100"/><br />
                                        </td>
                                    </tr>
                                    <?php
                                    }
                                ?>
                                <tr>
                                    <td colspan="<?php echo $colspan; ?>">
                                        <div id="pathway_text">
                                        <?php mosPathWay(); ?>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="<?php echo $colspan; ?>" class="body_outer">
                                       <?php mosMainBody(); ?>
                                    </td>
                                </tr>
                                </table></td>
    <td><img src="http://thecarforum.net/images/three/adskyscraper.gif" width="120" height="30" /><br /><script language='JavaScript' type='text/javascript' src='http://advertising.thecarforum.net/adx.js'></script>
<script language='JavaScript' type='text/javascript'>
<!--
   if (!document.phpAds_used) document.phpAds_used = ',';
   phpAds_random = new String (Math.random()); phpAds_random = phpAds_random.substring(2,11);
   
   document.write ("<" + "script language='JavaScript' type='text/javascript' src='");
   document.write ("http://advertising.thecarforum.net/adjs.php?n=" + phpAds_random);
   document.write ("&amp;what=zone:3&amp;target=_blank");
   document.write ("&amp;exclude=" + document.phpAds_used);
   if (document.referrer)
      document.write ("&amp;referer=" + escape(document.referrer));
   document.write ("'><" + "/script>");
//-->
</script><noscript><a href='http://advertising.thecarforum.net/adclick.php?n=a0edac03' target='_blank'><img src='http://advertising.thecarforum.net/adview.php?what=zone:3&amp;n=a0edac03' border='0' alt=''></a></noscript>
</td>
  </tr>
</table>
</body>
</html>
(In bold red is the table i'm having problems with)

CSS:
Code: 
/* CSS Document */

html {
    height: 100%;
}

body {
    height: 100%;
    margin-bottom: 1px;
}

.clr {
    clear: both;
}

.outline {
  border: 1px solid #cccccc;
  background: #ffffff;
    padding: 2px;
}

#buttons_outer {
    width: 635px;
      margin-bottom: 2px;
    margin-right: 2px;
    float: left;

}

#buttons_inner {
    border: 1px solid #cccccc;
    height: 21px;
}

#pathway_text {
  overflow: hidden;
    display: block;
    height: 25px;
    line-height: 25px !important;
    line-height: 22px;
    padding-left: 4px;
    border: 1px solid #ccc;
    margin-bottom: 2px;
}

#pathway_text img {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 6px;
}

#buttons {
    float: left;
    margin: 0px;
    padding: 0px;
    width: auto;
}


ul#mainlevel-nav
{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
}

ul#mainlevel-nav li
{
    background-image: none;
    padding-left: 0px;
    padding-right: 0px;
    float: left;
    margin: 0;
    font-size: 11px;
    line-height: 21px;
    white-space: nowrap;
    border-right: 1px solid #cccccc;
}

ul#mainlevel-nav li a
{
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    color: #333333;
    background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

    ul#mainlevel-nav li a:hover
{
    color: #fff;
    background: #04125A;
}


#search_outer {
    float: left;
    width: 165px;
}

#search_inner {
  border: 1px solid #cccccc;
    padding: 0px;
  height: 21px !important;
  height: 23px;
  overflow: hidden;
}

#search_inner form {
  padding: 0;
  margin: 0;
}

#search_inner .inputbox {
    border: 0px;
    padding: 3px 3px 3px 5px;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    color: #04125A;
}

#header_outer {
    text-align: left;
    border: 0px;
    margin: 0px;
}

#header {
    float: left;
    padding: 0px;
    margin-right: 2px;
    width: 635px;
    height: 150px;
    background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
    float: left;
    width: 165px;
}

#top_inner {
  border: 1px solid #cccccc;
    padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#left_outer {
  float: left;
    margin-top: 2px;
    width: 165px;
}

#left_inner {
  border: 1px solid #cccccc;
    padding: 2px;
  float: none !important;
  float: left;
}

#content_outer {
    padding: 0px;
    margin-top: 0px;
    margin-left: 2px;
    /** border: 1px solid #cccccc; **/
    float: left;
    width: 635px;
}

#content_inner{
  float: none !important;
  float: left;
  padding: 0;
  padding-top: 2px;
  margin: 0;
}

table.content_table {
  width: 100%;
    padding: 0px;
    margin: 0px;
}

table.content_table td {
    padding: 0px;
    margin: 0px;
}


#banner_inner {
    float: left;
    padding: 0px;
    height: 70px;
}

#poweredby_inner {
    float: right;
    padding: 0px;
    margin-left: 0px;
    height: 70px;
}

#right_outer {
    margin-left: 2px;
    width: 165px;
}

#right_inner {
  float: none !important;
  float: left;
  border: 1px solid #cccccc;
  padding: 2px;
}


.user1_inner {
    border: 1px solid #cccccc;
  float: none !important;
  float: left;
    margin: 0px;
    padding: 2px;
}

.user2_inner {
    border: 1px solid #cccccc;
  float: none !important;
  float: left;
    margin: 0px;
    padding: 2px;
}

table td.body_outer {
    padding: 0px;
    border: 1px solid #cccccc;
}

.maintitle {
    color: #ffffff;
    font-size: 40px;
    padding-left: 0px;
    padding-top: 0px;
}

.error {
  font-style: italic;
  text-transform: uppercase;
  padding: 5px;
  color: #cccccc;
  font-size: 14px;
  font-weight: bold;
}

/** old stuff **/

.back_button {
    float: left;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenav {
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 10px;
  line-height: 20px;
  margin: 1px;
}

.pagenavbar {
    margin-right: 10px;
    float: right;
}

#footer {
    text-align: center;
    padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
    text-align: left;
    font-size: 11px;
}



body {
    margin: 0px;
    height: 100%;
    padding: 0px;
    font-family: Arial, Helvetica, Sans Serif;
    line-height: 120%;
    font-size: 11px;
    color: #333333;
    background: #ffffff;
}

/* Joomla core stuff */
a:link, a:visited {
    color: #04125A; text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #900;    text-decoration: none;
    font-weight: bold;
}

table.contentpaneopen {
  width: 100%;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
}

table.contentpaneopen td {
   padding-right: 5px;
}

table.contentpaneopen td.componentheading {
    padding-left: 4px;
}



table.contentpane {
  width: 100%;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0px;
    margin: 0px;
}

table.contentpane td {
    margin: 0px;
    padding: 0px;
}

table.contentpane td.componentheading {
    padding-left: 4px;
}

table.contentpaneopen fieldset {
    border: 0px;
    border-bottom: 1px solid #eee;
}

.button {
  color: #04125A;
  font-family: Arial, Hevlvetica, sans-serif;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  border: 3px double #cccccc;
  width: auto;
  background: url(../images/button_bg.png) repeat-x;
  padding: 0px 5px;
  line-height: 18px !important;
  line-height: 16px;
  height: 26px !important;
  height: 24px;
  margin: 1px;
}

.inputbox {
    padding: 2px;
    border:solid 1px #cccccc;
    background-color: #ffffff;
}

.componentheading {
    background: url(../images/subhead_bg.png) repeat-x;
    color: #ffffff;
    text-align: left;
    padding-top: 4px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;

}

.contentcolumn {
    padding-right: 5px;
}

.contentheading {
    height: 30px;

    color: #04125A;
    font-weight: bold;
    font-size: 14px;
    white-space: nowrap;
}



.contentpagetitle {
    font-size: 13px;
    font-weight: bold;
    color: #cccccc;
    text-align:left;
}

table.searchinto {
    width: 100%;
}

table.searchintro td {
    font-weight: bold;
}

table.moduletable {
    width: 100%;
    margin-bottom: 5px;
    padding: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
}

div.moduletable {
    padding: 0;
    margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
    background: url(../images/subhead_bg.png) repeat-x;
    color: #ffffff;
    text-align: left;
    padding-left: 4px;
    height: 21px;
    line-height: 21px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    margin: 0 0 2px 0;
}

table.moduletable td {
    font-size: 11px;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
}

table.pollstableborder td {
  padding: 2px;
}

.sectiontableheader {
  font-weight: bold;
  background: #f0f0f0;
  padding: 4px;
}

.sectiontablefooter {

}

.sectiontableentry1 {
    background-color : #ffffff;
}

.sectiontableentry2 {
    background-color : #f9f9f9;
}

.small {
    color: #999999;
    font-size: 11px;
}

.createdate {
    height: 15px;
    padding-bottom: 10px;
    color: #999999;
    font-size: 11px;
}

.modifydate {
    height: 15px;
    padding-top: 10px;
    color: #999999;
    font-size: 11px;
}

table.contenttoc {
  border: 1px solid #cccccc;
  padding: 2px;
  margin-left: 2px;
  margin-bottom: 2px;
}

table.contenttoc td {
  padding: 2px;
}

table.contenttoc th {
  background: url(../images/subhead_bg.png) repeat-x;
  color: #ffffff;
    text-align: left;
    padding-top: 2px;
    padding-left: 4px;
    height: 21px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
    display: block;
    background: url(../images/menu_bg.png) no-repeat;
    vertical-align: middle;
    font-size: 11px;
    font-weight: bold;
    color: #ccc;
    text-align: left;
    padding-top: 5px;
    padding-left: 18px;
    height: 20px !important;
    height: 25px;
    width: 100%;
    text-decoration: none;
}

a.mainlevel:hover {
    background-position: 0px -25px;
    text-decoration: none;
    color: #fff;
}

a.mainlevel#active_menu {
    color:#fff;
    font-weight: bold;
}

a.mainlevel#active_menu:hover {
    color: #fff;
}

a.sublevel:link, a.sublevel:visited {
    padding-left: 1px;
    vertical-align: middle;
    font-size: 11px;
    font-weight: bold;
    color: #04125A;
    text-align: left;
}

a.sublevel:hover {
    color: #900;
    text-decoration: none;
}

a.sublevel#active_menu {
    color: #333;
    text-decoration: bold;
}

.highlight {
    background-color: Yellow;
    color: Blue;
    padding: 0;
}
.code {
    background-color: #ddd;
    border: 1px solid #bbb;
}

form {
/* removes space below form elements */
    margin: 0;
     padding: 0;
}

div.mosimage {
  border: 1px solid #ccc;
}

.mosimage {
  border: 1px solid #cccccc;
  margin: 5px
}

.mosimage_caption {
  margin-top: 2px;
  background: #efefef;
  padding: 1px 2px;
  color: #666;
  text-transform: normal;
  font-size: 10px;
  border-top: 1px solid #cccccc;
}

Help is much appreciated!
 
&#946;en;2404622
You use Firefox don't you? Have you tried viewing the page in IE or Opera? Just an idea, because sometimes programs optimise for a certain browser.
Click to expand...

It doesn't happen in IE, no, but i don't want to leave it with Firefox not working. Firefox is the one browser that i want it to work with perfectly.

Perhaps try validating your page and validating your CSS to see what that turns up.
Click to expand...

I can't validate the page any more than i have already. As i mentioned, it's full of Joomla code which i can't change.
 
That wasn't what I was saying, everyone wants a page to work in all browsers. With regard to the Joomla! code, I'm unable to help there.
There are a few errors in the actual table part of the code looking at the validators results.

This isn't related to the table problem you are having, but the CSS does have 3 errors, minor ones at that.

EDIT: That sounded harsh, I didn't mean it nastily so you know.
 
&#946;en;2404634
That wasn't what I was saying, everyone wants a page to work in all browsers. With regard to the Joomla! code, I'm unable to help there.
There are a few errors in the actual table part of the code looking at the validators results.

This isn't related to the table problem you are having, but the CSS does have 3 errors, minor ones at that.
Click to expand...

Again, can't help the validity because of Joomla. I was just saying, i know that it's not going to be 100% IE friendly because of the transparent PNG.

I don't think it is a Joomla problem, as the raw html page there does it without me even sticking it into Joomla in the first place.
 
Been a long time since I&#8217;ve worked with tables, but this should work&#8230;
HTML: 
<table width="100%" height="266"  border="0" style="background: url(http://thecarforum.net/images/three/topbg.png) center top repeat-x">
  <tr valign="top">
    <td width="53%" height="262">
      <div id="maintitle">
        <img src="http://thecarforum.net/images/three/6series.gif" width="300" height="260" />
      </div>
    </td>
    <td width="47%" height="262">
      <div align="right">
        <img src="http://thecarforum.net/images/three/updateglow.png" width="300" height="260" />
      </div>
    </td>
  </tr>
</table>
 
Blake
Been a long time since I’ve worked with tables, but this should work…
HTML: 
<table width="100%" height="266"  border="0" style="background: url(http://thecarforum.net/images/three/topbg.png) center top repeat-x">
  <tr valign="top">
    <td width="53%" height="262">
      <div id="maintitle">
        <img src="http://thecarforum.net/images/three/6series.gif" width="300" height="260" />
      </div>
    </td>
    <td width="47%" height="262">
      <div align="right">
        <img src="http://thecarforum.net/images/three/updateglow.png" width="300" height="260" />
      </div>
    </td>
  </tr>
</table>
Click to expand...

I'm no HTML expert, but isn't it best practice to have all variables declared in CSS (through class and ID tags) - either inline or linked rather than within each selector separately? I'm almost certain that XHTML forbids that kind of formatting. I noticed that you escaped the <img> tag, so that would indicate to me that this code is supposed to be valid XHTML, but you have used height, width, and align tags. On top of that, there are no 'alt' attributes for any of the images in the code, this makes the XHTML not valid.

Also, The design of this table will have to be altered on every single HTML page it is displayed on as opposed to altering the CSS code once if it was linked. 👍
 
maybe better if you save the generated page and playing around with it. maybe because your table got conflicted with default joomla table.
do 100% thing neccesary?

What if you hack the css file instead of using direct code.
 

Similar threads

Grayfox
Trouble getting a CSS switch to work.
Replies
3
Views
602
TenEightyOne
TenEightyOne
Grayfox
Adding Search bar to HTML Table
Replies
4
Views
968
Grayfox
Grayfox
the_cobbinator
Wrapper not wrapping
Replies
4
Views
738
the_cobbinator
the_cobbinator
L
PHP assistance
Replies
6
Views
872
GilesGuthrie
GilesGuthrie
S
Table bg colour problem with Mozilla.
Replies
3
Views
296
Sage
Sage

Latest Posts

Back