I'm trying to make a website and everything works fine on certain browsers like Google Chrome and Safari, but it doesn't work on Mozilla Firefox and Internet Explorer.
Here's a link to how it looks http://imgur.com/BmMOqw0,qiICBR4#0 The first image is how it looks in Chrome and Safari. The second link is IE and Firefox.
The HTML is basically a square image wrapped in many borders.
<div> <div> ... <div> <img> </div> ... </div> </div>
The CSS has the image and all the divs set to border-radius 100% and also has code along the lines of:
max-width: 574px;
max-height: 574px;
display:block;
max-height:100%; //repetitive, I know, but I've been frustratingly trying everything that might work
width:auto;
max-width:100%;
height: auto;
I've tried it with max-height, without max-height, with height: 100%, without height: 100%, etc. I've googled this problem countless times and the solutions that work for others don't seem to work for me. I've set html, body {height: 100%} and I've tried .cycle-slide {width:100%;} and section img { width: 100% } but those didn't work either.
edit: http://jsfiddle.net/zc3Y8/1/ The code is a little bit different because I'm using Ruby on Rails on Aptana. But this is pretty much how it looks
google-chrome
firefox
