Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1125
  • Last Modified:

Firefox CSS: TD height

I have a tabled with in them three rows which have a TD:

<TABLE cellpadding=0 cellspacing=0>
      <TR>
            <TD><IMG id="latestImage" class="Thumb" runat="server"></TD>
            <TD>
                  <TABLE cellpadding=0 cellspacing=0>
                        <TR><TD class="ThumbRightTop"><IMG src="Images/Null.gif"></TD></TR>
                        <TR><TD class="ThumbRight"><IMG src="Images/Null.gif"></TD></TR>
                  </TABLE>
            </TD>
      </TR>
      <TR>
            <TD class="ThumbBottom"><IMG src="Images/Null.gif"></TD>
            <TD class="ThumbBottomRight"><IMG src="Images/Null.gif"></TD>
      </TR>
</TABLE>

with the following styles:

TD.ThumbRight
{
      height: 100%;
      background-color: #FF0000;

}

TD.ThumbRight IMG
{
      width: 8px;
}

Somehow the first ThumbRight class gives a good 100% height in Firefox/Netscape, but the following don't.  You can see an example at http://www.gm-productions.biz

In IE it looks just fine.
How can I make this working in all three browsers ?
0
Anne CH Postma
Asked:
Anne CH Postma
  • 4
  • 2
1 Solution
 
ARCglideCommented:
... alittle confused - but the URL "in-action" helped clarify to something like this?
(I've added 100px height to the 'thumb' to add visible clarity)

<style>
TD.ThumbRight{
     height: 100%;
     background-color: #FF0000;
}
TD.ThumbRight IMG{
     width: 8px;
}
</style>

<table cellpadding="0" cellspacing="0">
     <tr>
          <td><img id="latestImage" class="Thumb" runat="server" height="100px" alt=""/></td>
          <td valign="top" class="ThumbRight"><img src="Images/Null.gif" alt=""/></td>
     </tr>
     <tr>
          <td class="ThumbBottom"><img src="Images/Null.gif" alt=""/></td>
          <td class="ThumbBottomRight"><img src="Images/Null.gif" alt=""/></td>
     </tr>
</table>
0
 
ARCglideCommented:
Tested in: Opera 8, Firefox 1.0.3, IE 6

--ARCg|ide :-)
0
 
ARCglideCommented:
... also a quickie scrolling div example (tested as above)

<style>
.scrollingdiv{
     overflow:auto;
     height:50px;
     width:250px;
}
</style>

<div class="scrollingdiv">
.....<br/>
.....<br/>
.....<br/>
.....<br/>
.....<br/>
.....<br/>
.....<br/>
.....<br/>
.....<br/>
..... scrolling<br/>
..... scrolling<br/>
..... scrolling<br/>
..... scrolling<br/>
..... scrolling DIV</div>
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Anne CH PostmaUnity, iOS and Front-End Web DeveloperAuthor Commented:
The problem is that the images will have a varying height, therefor I can't set a certain height.
0
 
ARCglideCommented:
I only added the height attribute to the 'latestImage' IMG in order to clearly ilustrate how the code works (with obly image placholders) - it can be simply ommited, like the below code.

This is line (see above) is the solution:
          <td valign="top" class="ThumbRight"><img src="Images/Null.gif" alt=""/></td>

..adding valign="top" makes the Null.gif image display at the top (say a top right corner img) and the 'ThumbRight' class gives the cell a red background-color. I have removed the height attribute - just for you ....
-----------------
<style>
TD.ThumbRight{ height: 100%; background-color: #FF0000; }
TD.ThumbRight IMG{ width: 8px; }
</style>

<table cellpadding="0" cellspacing="0">
     <tr>
          <td><img id="latestImage" class="Thumb" runat="server" alt=""/></td>
          <td valign="top" class="ThumbRight"><img src="Images/Null.gif" alt=""/></td>
     </tr>
     <tr>
          <td class="ThumbBottom"><img src="Images/Null.gif" alt=""/></td>
          <td class="ThumbBottomRight"><img src="Images/Null.gif" alt=""/></td>
     </tr>
</table>
-----------------

--ARCglide   :-)
0
 
Anne CH PostmaUnity, iOS and Front-End Web DeveloperAuthor Commented:
The solution you presented remove the TD with class 'ThumbRightTop', which should not be removed. Adding this again delivered the same problem.

I redesigned the block myself and found a solution, like this:

<TABLE cellpadding=0 cellspacing=0 class="Thumb">
      <TR>
            <TD><IMG id="latestImage" class="Thumb" runat="server"></TD>
            <TD class="ThumbRightTop"><DIV class="ThumbRightTop"><IMG src="Images/Null.gif"></DIV></TD>
      </TR>
      <TR>
            <TD class="ThumbBottom"><IMG src="Images/Null.gif"></TD>
            <TD class="ThumbBottomRight"><IMG src="Images/Null.gif"></TD>
      </TR>
</TABLE>

using the following stylesheets:

TABLE.Thumb
{
      background-image: url(Images/ThumbShadowRight.gif);
      background-repeat: repeat-y;
}

IMG.Thumb
{
      border: solid 1px #102040;
      cursor: pointer;
}

TD.ThumbRightTop
{
      width: 8px;
      vertical-align: top;
}

DIV.ThumbRightTop
{
      background-image: url(Images/ThumbShadowTopRight.gif);
}

TD.ThumbBottom
{
      background-image: url(Images/ThumbShadowBottom.gif);
}

TD.ThumbBottom IMG
{
      height: 8px;
}

TD.ThumbBottomRight
{
      background-image: url(Images/ThumbShadowBottomRight.gif);
}

TD.ThumbBottom IMG
{
      width: 8px;
      height: 8px;
}

Tested it on IE, Firefox and NS

Thanks for replying though.
0
 
moduloCommented:
PAQed with points refunded (125)

modulo
Community Support Moderator
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now