http://ingoodtastemag.com/
On an iPhone, the button is round with a gradient. However, on every other desktop browser and Android that we've tested so far, it is square. I want the button to stay square. What CSS resets do I need for this?
This rounded corner is the default property of the Safari browser and iOS 5 devices. To overwrite it, use the following styling for your button:
-webkit-appearance: none;
border-radius: 0;
To keep your own border radius while removing the iOS styling
-webkit-appearance: none;
-webkit-border-radius: none;
border-radius: 10px;
You must remove webkit's border-radius to get your own style back, but you can still add your own border-radius after you remove theirs.
You could try to use this property on your button attribute.
border-radius: 0
Related
I'm very happy with my slideshow but during navigation I get an effect I'd like to avoid.
It's the same effect that happens in any web page when one click outside of an image, drag the mouse in a position inside of the image and release the mouse. The image gets selected and turns to blue.
In my slideshow it happens when the click on the R-L arrows is not exactly stable and produce instead a click+drag action. The image that is shown turns to blue and the result on my art gallery is quite disturbing.
Is it possible to avoid that effect ?
Thanx al lot
Marco
Please try the following approach.
<style>
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<div id="slider1_container" class="noselect" ...>
I have a display problem with the box shadow property specifically on the iPhone 6 plus.
If I add the meta tag width=device-width, the following box shadow isn't displayed at all:
-webkit-box-shadow: 1px 1px 5px 5px #a8a8a8;
box-shadow: 1px 1px 5px 5px #a8a8a8;
If I don't use the meta tag, box shadows "magically" disappear if you zoom into the page. You can comprehend this here:
http://jsfiddle.net/b6aaq57z/3/
This seems to be a specific iPhone 6 plus bug. On older iPhone Versions running the same iOS Version (8.0.2), the box shadows are working properly.
Is there anyone with a solution?
You can add border-radius:1px to the div. It fixes the box-shadow issue in iphone 6+ and other retina devices
.box-shadow{
-webkit-box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
box-shadow: 1px 1px 0.25em 0.25em #a8a8a8;
border-radius:1px;}
Try using -webkit-apperance: none;
You can add this to your global reset to eliminate all issues with this. I use:
*, *:before, *:after {
-webkit-appearance: none;
}
I also have my box-sizing reset in there as well.
How could i add curved corner to a gwt-checkbox using css?
.gwt-CheckBox {
border-radius: 5px 5px 5px 5px;
}
This Doesn't works!!!!
i also tried this too. but no change.
.gwt-CheckBox > input {
border-radius: 5px 5px 5px 5px;
}
spell check - border-redius must be border-radius
Curved Corner for checkbox via CSS is possible only in firefox/chrome and not in IE8 browser.
Which browser are you testing on? Apart from IE for others try -moz-border-radius or -webkit-border-radius etc depending on your browser.
Refer the link for IE information- Support for "border-radius" in IE
I'm making a website and I've got it working on the Mac and the iPad. When I see it on the iPhone, one of the pages doesn't place the background-image correctly.
I'm using 2 background images on the of the website and I've already set it's height to around 1200px. When I see the same page on the iPhone, all the text wraps up and makes the page longe. My footer image stays in the same position and the text overlaps it. Shouldn't it work as the iPad since I've got all the text wrapped inside a ?
I'm noticing that the problem is that the image is set on the body and as it's not a , it will not follow the increased length of the text.
How can I specify a height of that background-image specifically for the Mac + iPad and another one for the iPhone?
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#333;
background:#000;
margin: 0px auto;
background-image:url(images/gradcinza_top.png), url(images/gradcinza_bot.png);
background-repeat:repeat-x, repeat-x;
background-position:0px 115px, 0px 950px;
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
On the iPad and the Mac, those 950px put the footer image on the exact place I want it. In the iPhone, since I have less area to present the text it simply makes it longer. I need something to say to the website to put the background-image on on position while it's being viewed on the Mac and iPad and another condition to specify a new position for the iPhone.
Thank you.
read some Responsive Web Design Guidelines..Use CSS Media Queries for this...
e.g.:-
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
I noticed that if I style my buttons with CSS using radius, colors and borders, they look good but in the iphone/ipad/ipod they look terrible...shouldn't be the same rendering as in Safari Desktop??
Oops! I just found this myself. Just add this line on any element you need:
-webkit-appearance: none;
Add this code into the css file:
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
This will help.
The above answer for webkit appearance worked, but the button still looked kind pale/dull compared to the browser on other devices/desktop. I also had to set opacity to full (ranges from 0 to 1)
-webkit-appearance:none;
opacity: 1
After setting the opacity, the button looked the same on all the different devices/emulator/desktop.