Cell height grows because of overlapping nested DIVs, but it shouldn't

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • estragon
    New Member
    • Dec 2006
    • 3
    #1

    Cell height grows because of overlapping nested DIVs, but it shouldn't

    I am trying to put a transparent gif on top of a jpg, both inside a table cell. Here is the code:

    Code:
    <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#121663">
    <tr> 
      <td height="80">
      	<div style="z-index:0; position:relative; left:27; top:0; width: 545px; height: 80px">
      		<img src="img/logobottom.jpg" width="545" height="80" border="0" usemap="#MapMap" alt="a_map">
      	<span style="z-index:1; position:relative; left:44; top:-80; width: 457px;">
      		<img src="img/lights.gif" width="457" height="32" border="0" alt="lightsp"></span></div>
      </td>
    </tr>
  </table>
    The gif does go on top of the jpeg indeed at the top of the cell, the cell and outer box remains 80 pixel high, everything is ok with Firefox.
    In IE and Opera though, the cell/box grows from 80 pixels to 112 pixels high, i.e. it looks like first it expands to fit the 80+32 px, then the inner box moves to the top as it ought to, but the outer one remains at 112 pixels high, resulting with a big space under the bottom image...

    What is going wrong? How can I fix it? I cannot change the cell dimensions...
    Tags: None
    • estragon
      New Member
      • Dec 2006
      • 3
      #2
      Originally posted by estragon
      I...on top of...
      I am not sure if I should say "over", instead What I mean is that the gif (which is smaller in dimensions) needs to cover/overlap the jpg, starting from the top (the latter being bigger, will remain visible)

        Comment

        • AricC
          Recognized Expert Top Contributor
          • Oct 2006
          • 1885
          #3
          So you are trying to put part of a picture on top of another? I did a small test is this the kind of effect your looking for:
          [html]<html>
          <head><title>Te st Layering</title>
          </head>
          <body style="backgrou nd-color: #000;color: #fff">

          <span style="position : relative; left: 0px; top: 0px"> <img src="SomeImage. gif"> </span>
          <br>
          <span style="position : relative; left: 10px; top: -15px"> Woooohooooooooo ooooooooooooooo ooooooooooooooo </span>
          <br>
          <span style="position : relative; left: 50px; top: -140px"> <img src="SomeImage. gif"> </span>
          </body>
          <html>[/html]

          Image used was 300pxx225px.

          HTH,
          Aric

            Comment

            • estragon
              New Member
              • Dec 2006
              • 3
              #4
              Originally posted by AricC
              So you are trying to put part of a picture on top of another? I did a small test is this the kind of effect your looking for
              Thany you but you are not answering to my problem... Which stays the same, even if I remove the table.

              I will try to rephrase what I need:

              a. Picture A needs to be positioned horizontally-centered on the top of a page.

              b. Transparent Picture B which is smaller than A, both in width and in height, again needs to be positioned horizontally-centered on the top of a page.
              Thus, B will ovelpap with the top centerpart of A

              My problems are:

              1. How to center the pictures; I was using a <div align=center> and a single cell table to achieve this so far.

              2. When I put the two <divs> <spans> for the image directing them to start from the top (as in the code I have provided) the width of the second box expands the width of the container -be it a cell or a box, despite "moving up where it is instructed.

              So I have the container C with a width of 80 px, or unspecified
              A first box A in it with width 80 px aligned top center in C
              A second box B with width 32 px aligned top center in C

              Result: overlapping is OK, but the container expands to 112 px wide.

              HELP, please.
              Thank you in advance

                Comment

                • AricC
                  Recognized Expert Top Contributor
                  • Oct 2006
                  • 1885
                  #5
                  To center your image:
                  Code:
                  <html>
<head>
<title>
Test
</title>
</head>
<body>
<div style="text-align: center">
<img src="testimage.jpg" />
</div>
                  Give me a bit to test the other issue.

                  Aric

                    Comment

                    Previous template Next
                    Working...