-3

I have two questions:

  1. I have an assignment, where I populate a square grid with a lot of small square divs (think pixels). They should not have any margins - and they don't, as long as there are no more of them than 51 in a row. Then suddenly they get margins, and overflow my grid (a wrapper div). I've reset all the margins in the css to 0, and even used a negative margin, and it still happens. Why is that?

  2. Second thing is some inconsistency when calling a JS function on a button click. It goes like this: when I use jQuery to bind that function to a button (the on() function), it works in JSfiddle, but IT DOES NOT WORK in the browser (I use chromium). I have to use onclick in the button's html tags for it to work. Again, why is that?

Here's the code parts I think could be the problem:

function reset() {
var new_size = prompt('Enter a new amount of squares in a row');
populate(new_size);
}

$('#reset').on('click', function () {
    reset();
})

This should make the reset work on the button, and it does work in jsfiddle, but not in the browser.

This works for the browser: 

<input id="reset" onclick='reset();' type="submit" value="Reset">

Here's some css:

* {
margin-bottom: -4px;
}

.wrapper {
    width: 960px;
    height: 960px;
    margin: 0px auto;
    border-style: solid;
    border-width: 1px;
}

.square {
    border-style: none;
    border-width: 1px;
    display: inline-block;
    background-color: white;
}

When I tried to reset margins to 0, it didn't work either, I had to use negative one.

Thanks.

Radosław Wieczorek
  • 15
  • 1
  • 4
  • 3
    Always post your code in your question please. – j08691 Feb 27 '15 at 14:13
  • Your event that you're adding to reset should be in document.ready(), if not, the element may not exist yet to add the event to. – rich green Feb 27 '15 at 14:22
  • I dodn't want to post the code here, because I would probably have to post the whole css, html and JS script, so I thought that would take too much place. And on jsFiddle you can see how it all works at once. My bad, though. – Radosław Wieczorek Feb 27 '15 at 14:24
  • font-size: 0; add this to your wrapper. http://stackoverflow.com/questions/14241696/how-to-get-rid-of-space-between-divs-when-display-inline-block-and-stacked-horiz – rich green Feb 27 '15 at 14:45
  • It seems to have helped, but why? Thanks! – Radosław Wieczorek Feb 27 '15 at 15:14

1 Answers1

0

Hi try this: putting a non-breaking-space ( ) in the divs.... so they are not empty.

$('.wrapper').append("<div class='square'>&nbsp;</div>");

It works...

I am not sure why... I think is a rendering problem in some browsers like IE...

Federico
  • 1,231
  • 9
  • 13