brainiac080195

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

OK! cr@ppy IE does it again! PLEASE MS, GIVE UP! ON browsers, you just haven't got a clue, 7 to 10 years to catch up to better browsers, and you still fail.

 

try

ul.st-main-menu ul ul {    left: 0;/* to prevent submenu sliding across match below value of left: 196px;*/    top: 0;visibility: hidden;	}ul.st-main-menu ul li:hover ul {    left: 202px;	visibility: visible;}

normally i would use left: -9999em; or display: none; but because this would interfere with transition animation, we have to use visibility instead.

 

EDIT:i think the submenu acts more smoothly using

ul.st-main-menu ul ul {    left: 75%;    top: 0;visibility: hidden;	}ul.st-main-menu ul li:hover ul {    left: 100%;	visibility: visible;}

IN IE

Works on IE now and it is smother now on other browsers. IE is ######, I used overflow: hidden/visible and id didn't work, and then Microsoft asks why you don't like IE, THIS IS WHY. Always if IE do this......

Anyways thanks man, you are the only one who helped me, and i posted this problems on many forums. Thanks again problem solved.

Seems to be working in IE11 for me.?

Maybe you haven't spotted the difference as you are not used to Cyrillic. I checked it on 2 more computers and same results. second sub menu is over the first sub menu and it isn't hidden even when you not hover over first <li>

.pull {display: none;} /* don't know what this is used for?*/.st-menu ul ul li a, .st-menu ul ul li .separator { /* parent menu element padding/margin applied to submenus elements so set these to 0*/    margin: 0;    padding: 0;}ul.st-main-menu ul ul {    left: 0px;/* to prevent submenu sliding across match below value of left: 196px;*/    top: 0;}ul.st-main-menu ul li:hover ul {    left: 196px;}

Thanks works perfectly on Chrome but i IE 11 the ' ul.st-main-menu ul ul ' are showing even without hover. I tried 'overflow: hidden' but it didn't work in my case. Any idea?