.komunikat{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
font-size: 12px;
color: #fff;
border-radius: 10px;
border: 1px #0099cc outset;
font-family: Arial, Verdana, sans-serif;
background: #000000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #050505 6%, #0f0f0f 22%, #141414 26%, #1c1c1c 36%, #1e1e1e 40%, #232323 46%, #262626 52%, #2d2d2d 62%, #303030 67%, #333333 72%, #333333 77%, #353535 83%, #383838 89%, #353535 94%, #383838 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(6%,#050505), color-stop(22%,#0f0f0f), color-stop(26%,#141414), color-stop(36%,#1c1c1c), color-stop(40%,#1e1e1e), color-stop(46%,#232323), color-stop(52%,#262626), color-stop(62%,#2d2d2d), color-stop(67%,#303030), color-stop(72%,#333333), color-stop(77%,#333333), color-stop(83%,#353535), color-stop(89%,#383838), color-stop(94%,#353535), color-stop(100%,#383838)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#383838',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.5);
z-index: 4;
}
Presented above is my CSS code for a message box. I attempted to use jQuery to set the margin-top of all elements with the class .komunikat, but encountered issues. Here is the JavaScript code:
<script>
var comunicats = $('.komunikat');
for (i = 0; i < comunicats.length; i++) {
comunicats[i].css("margin-top", '-' + comunicats[i].height());
}
</script>
What can I do to resolve this issue?
UPDATE: Below is the corrected code based on Mr_Green's input. I forgot to include 'px' in the statement:
<script>
var comunicats = $('.komunikat');
for (i = 0; i < comunicats.length; i++) {
comunicats.eq(i).css("margin-top", '-' + comunicats.eq(i).height()+'px');
}
</script>