Jump to content

Google map circle not working in google Chrome border-radius overflow


brainiac080195

Recommended Posts

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

3dmid.jpg

Edited by brainiac080195
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...