Fixed position image not being display on old blackberrys - html

Question

I have an image (that I'm adding to a page with javascript) I want to display at the bottom of my screen (not at the bottom of the content ).
Everything seems to work fine except for older blackberry's. Any idea where I'm going wrong?
In my html I have
<div id="sticky" class="banner-sticky" style="position: fixed;">
</div>
and in my css I have
.banner-sticky {
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
-webkit-backface-visibility:hidden;
}
.advert-img {
width: 90%
height: 100%;
}
#media only screen and (min-width: 320px) {
.advert-img {
width: 90%
}
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
.advert-img {
width: 90%
}
}
#media only screen and (min-width: 700px) {
.advert-img {
width: 50%
}
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
.advert-img {
width: 50%
}
}
#media only screen and (min-width: 1300px) {
.advert-img {
width: 30%
}
}
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
.advert-img {
width: 30%
}
}
The generated html after the javascript does its thing:
<div style="position: fixed;" class="banner-sticky" id="sticky">
<a href="http://ad.vic-m.co:80/landingpage?pr=21&ar=GoM;ht=245" id="ad-link">
<span id="banner-ad"><img src="http://ad.vic-m.co:8080/AdService/fileHandleAction?file=7A10B19B-2E51-4CCE-AB6A-319C382B4AA8" class="advert-img">
</span>
</a>
</div>