Help with button issue on ipad and iphone

[zigotic]

Hi Everyone, I have been racking my brain and can’t figure out an issue with buttons on my site. They display great on Safari and Firefox but when viewed on an ipad-iphone… they’re of for a pixel, so it looks like there is a white line through the button at the end of the text, can’t figure it out

[chrisburton]

Let us know when you can provide a link or code to your problem, not just a description.

[zigotic]

Hi Christopher,
Thank you so much. This is the link to the site http://www.ai-sport.com, you can view the button issue on the banner (red button: GET STARTED TODAY!)

[zigotic]

This is the css markup for the button. It looks perfect on Safari and Firefox but when you view it on a mobile device it has a line through it after the text. When change the padding to it then it looks funny on the browsers. I hope this helps :)

.small_cherry, .small_cherry span, .medium_cherry, .medium_cherry span, .large_cherry, .large_cherry span {
    background-image: url(“images/_global/bg-buttons-sprite-cherry.png”);
}
.small_button span {
    background: url(“images/_global/bg-buttons-sprite.png”) no-repeat scroll 0 0 transparent;
    line-height: 10px;
    margin: 0;
    padding: 16px 0 17px 21px;
}
.ka_button span {
    display: block;
}

[chrisburton]

@zigotic Can you use media queries to solve the issue?

[zigotic]

Thank you Chris, I am not sure how to do this :) but I’ll checkout Chis’s article https://css-tricks.com/css-media-queries/

I tried contacting the theme guys and this was there response, is there a way around this?

This is due to the Browser’s Zoom level. When your Browse’s Zoom is other then the default 100% then the Buttons images are pulled apart. The buttons are composed by two background images which come together using CSS code. This allows for the Buttons to extend the length of the Text you add to them. So when the Browser’s zoom is changed then this pulls those images apart.

Thank you for all your help!

[Senff]

Well, that’s a little strange. I’d come up with buttons that wouldn’t depend on the zoom level. Not even sure if it matters that much. If you add this line in the HEAD of your site, does it solve it?

[zigotic]

Hi Senff, thank you. When I add the line to the header file the only thing that changes is that after you zoom in, the window doesn’t resize back to original size when double tap on the screen of the mobile device.

[Author]

Posts