Having trouble with a bug displaying .pdf image

[phpjayx]

I've built a dynamic list using .JS and HTML similar to the code of the following line....

 

        cellHtml += '                <input class="myButton1 w_50p h_70 margin_top_20px" onclick="' + onClickType2 + '" type="button">';

 

 

--------------------------

The problem is after getting about 7 or more rows built.... only on the IPAD I get images like the attached where about 2 out of the 7 lines the button images overlap with its own image....  It looks fine on my other safari browsers and the IPhone.  For the safari browsers these are .PDF images to get the highest quality.

 

Has anyone seen issues like this?  Any other vector images that people recommend to use?

 

Thanks in advance
 

[phpjayx]

Still no luck fixing this issue.  Are there any other image types that I should try which use vector images that may not have this issue?

[l0gic]

I just use .PNG

[phpjayx]

Maybe I just don't have the right tools.... I'm using Adobe Illustrator.  Whenever I try to save my vector images as a PNG.... the quality goes way down and is somewhat distorted.

 

If PNGs are working well for you, showing up with a high quality on IPADs or Iphones, what settings or method are you using to save them at a high quality?

[phpjayx]

So I'm attempting it another way... with a PNG like mentioned... starting off with a larger high quality image.

Looking at some web references it looks like this should load in the image... but nothing happens

My debugger shows the image B1.png is loading... but I don't see it.  Is the sizing messing something up. 

 

.myButtonA {
    background:url(/B1.png) no-repeat;
    margin:0;
    padding:0;

width: 14%;

height: 14%;

    border: none;
        
}
 

[Sam46]

I'm using Adobe Illustrator.

 

 

Do you have photoshop? Just used photoshop.

 

My debugger shows the image B1.png is loading... but I don't see it.  Is the sizing messing something up.

 

 

Did you link the image?

 

Did you put that CSS code in @media query:

@media screen and (max-device-width: 480px) {
.myButtonA {
    background:url(../path/B1.png) no-repeat;
    margin:0;
    padding:0;
    width: 14%;
    height: 14%;
    border: none;    
}
}

/* iPhone (portrait) ----------- */
@media screen and (max-device-width: 320px) {
.myButtonA {
    background:url(../path/B1.png) no-repeat;
    margin:0;
    padding:0;
    width: 14%;
    height: 14%;
    border: none;
}
}

to test it out first?

[phpjayx]

I do have photoshop and Illustrator.  I've used both, but the last one I saved B1.png with was Illustrator.

 

I did not know about the @media query option.  I will have to learn a bit about that.  The attached pic is what I was trying to use.

[phpjayx]

yea... tried that.. still no luck.

The resizing just doesn't seem to work.  Even if I try to assign a specific pixel size to the image in CSS.

 

The button just shows up as being empty.

 

Any other suggestions on code to try out? 

 

This seems like it should be so simple but I can't fix this darn thing.

[phpjayx]

Here is the other version I tried.... this didn't either work to shrink it

 

 

.myButtonA1 {
    background:url(/B1.png) no-repeat; 
    border: none;
    display: inline-block;
    width:  50px;
    height: 50px;
}