overlay image resizes table cell - but why?

Discussion in 'CSS' started by Haric, Jul 22, 2008.

  1. #1
    Hi !

    http://www.westerlyestates.co.uk/new/welcome/accomodation.asp (scroll down for the images in question)

    I am using a layer for an overlay to an image "Let Agreed".

    The image is in a table and the overlay is placed at left: 0px; top: -160px, somehow though it is expanding the table cell downwards and ruining the layout.

    I can't fix the height of the cell as sometimes the images are taller than others.

    Anyone know what I can do please?...
     
    Haric, Jul 22, 2008 IP
  2. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    why don't you try absolute positioning for the LET AGREED image?

    
    style='position:absolute; z-index:7;'  
    
    Code (markup):
    I'm guessing the negative top position is what's causing the problem
     
    glorie, Jul 22, 2008 IP
  3. Haric

    Haric Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks glorie,

    You are quite right - I had been thinking along these lines but when I'd tried it it hadn't worked because my container wasn't set to relative positioning. Well it was but the whole page section was the container, I've now put each record in it's own table, set them to relative and it works a treat

    I spoke too soon, this is only working in IE7 not in Firefox, the overlay stays at the top.
     
    Haric, Jul 22, 2008 IP
  4. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The overlay is staying on top because you indicated top:80px;

    Okay so I gave this a shot but I'm only able to test on Firefox 2.0 and IE6. Please test this further on mac ff, safari and opera.

    Here's how your code should be (with the exact order, letagreed.gif must come before the accomodation images).

    Do not use top:; or left:; if you want to move the image, tweak the margin

    I would suggest assigning a class to letagreed.gif

    
     <td>
    
    <a href="javascript:popUp('view.asp?key=98')">
    
    [B]<img src="accomodation.asp_files/letagreed.gif" alt="Let Agreed" style="border:0;position: absolute; margin:15px 0 0 0;" />[/B]
    
    <img src="accomodation.asp_files/TH_Rmellin.jpg" class="image" alt="link to Rmellin.jpg"></a><br><br>&nbsp;
    </td>
    
    Code (markup):
     
    glorie, Jul 22, 2008 IP
  5. Haric

    Haric Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That's amazing, thanks again.

    I didn't know that could work without specifying layers. You've made my code much simpler and lighter. Thank you very much for your help.

    I'll test on the mac another day as I have to run a patch lead across 2 rooms to get it online! (is windows Safari the same as testing on Mac Safari? I'm guessing not as you specify Ff for Mac)
     
    Haric, Jul 23, 2008 IP
  6. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I've tested it in mac FF and safari, looks fine on both. I'm not sure about windows safari, from my experience, so far, I've never had problems with windows safari when it's okay in mac safari. But its always nice to just see for yourself just to be sure.
     
    glorie, Jul 23, 2008 IP