brainiac080195 Posted January 4, 2016 Share Posted January 4, 2016 (edited) I am making a google map in a circle shape in my footer. I was able to make it work for Mozilla and IE but I am having problems with Chrome. From the researcher I did, the problem is with border-radius not working for Chrome or overflow:hidden; Unfortunately I wasn't able to fix the problem. Here is a link to a website, map is located in the footer. WEBSITE And here is my custom css for the map .custommap{ border: 5px solid #fff; overflow:hidden; border-radius:999px; -moz-border-radius:999px; -webkit-border-radius:999px; -o-border-radius:999px; width: 18% !important; height: 16em !important; } Here are also images of Mozzilla and Chrome in comparison Edited January 4, 2016 by brainiac080195 Link to comment Share on other sites More sharing options...
COBOLdinosaur Posted January 7, 2016 Share Posted January 7, 2016 The better way to do a circle; that will also work in chrome is to have equal height and width and us border-radius:50%. That works for all modern browser without any hyphen hacks like -moz or -webkit. Also if you are using the hyphen hacks then the standards compliant version without the hyphen prefix should be listed last, otherwise it will never be used. by either browser. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now