0

I want to fill table cell with an image and then add smaller, overlayed image to this cell.
Here's a part of html code:

<tr>
    <td width="20%" height="15%"></td>
    <td id="upper_logo" width="60%" height="15%">
    </td>
    <td width="20%" height="15%"></td>
</tr>

CSS:

html, body {
margin:0px auto; padding:0;
height:100%;
}

body{
    height: 100%;
}
#upper_logo{
    position: relative;
}

#fff{
    position: absolute;
    right: 0;
    top: 0;
}

And JS:

function draw() {
    $('#upper_logo').empty();
    var height = $('#upper_logo').height();
    var width = $('#upper_logo').width();
    var src = "http://i.imgur.com/5t1VyaQ.png";
    var src_fb = "http://i.imgur.com/cVUcmwx.png";

    var ob = document.createElement("img");
    ob.setAttribute("src", src);
    ob.setAttribute("id", "ob");
    ob.setAttribute("height", height);
    ob.setAttribute("width", width);
    document.getElementById("upper_logo").appendChild(ob);

    var ob_fb = document.createElement("img");
    ob_fb.setAttribute("src", src_fb);
    ob_fb.setAttribute("id", "fff");
    ob_fb.setAttribute("height", height);
    ob_fb.setAttribute("width", height * 0.376);
    document.getElementById("upper_logo").appendChild(ob_fb);
}

draw()

$(window).resize(function () {
    draw();
});

Here's the problem. In Chrome, facebook image is aligned in the cell, but in Firefox this image is aligned in the whole window.
Chrome: chrome
Firefox: ff Jsfiddle: click

Note that my web dev skills are poor. If there are other ways to do it (I suppose there are), please let me know about them.

macfij
  • 3,093
  • 1
  • 19
  • 24
  • 4
    Correct solution here would likely be to not use tables. – Kevin B Jan 10 '14 at 22:54
  • 1
    is there a specific reason you are using the scripting to populate that cell with the code as opposed to just marking it up? Is this a dynamic tool? – Phlume Jan 10 '14 at 22:55
  • I wanted to make that image dependent on window size. I don't have any experience in web dev, so if there are some other options, I'll be glad to read about them. – macfij Jan 10 '14 at 22:59
  • 1
    Preach @KevinB, Preach! – BuddhistBeast Jan 10 '14 at 23:00
  • 2
    Here's the non-table version, :) http://jsfiddle.net/SchJF/7/ with your percentage heights/widths – Kevin B Jan 10 '14 at 23:00
  • 1
    To help with some fuel for your thoughts, give this a read, it's pretty interesting: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – BuddhistBeast Jan 10 '14 at 23:03
  • @Kevin B, many thanks. Your version was a great start for me, I made whole page in non-table version. – macfij Jan 11 '14 at 03:06

1 Answers1

1

You have multiple problems going on:

Making a dynamic array inside of a table is a perfectly feasible option, but the way you are doing it (#id for your image) is going to ensure that only one of these items actually gets rendered.

What you need to do is map your classes to each individual table cell.

Also, I see you are removing all elements of the #upper_logo every single time the screen gets resized, and re-adding the img every time. Definitely a no-no.

I don't know the rest of your code, but you could easily solve this with CSS alone. Responsive design is one of my specialties, and you are going down a path with almost infinite rendering if they decide to resize their browser.

Nicholas Hazel
  • 3,758
  • 1
  • 22
  • 34