Help Needed! "width:-Moz-Max-Content" Not Working In Internet Explorer

I have an art gallery in which my thumbnails are being displayed using the css function "width:-Moz-Max-Content"

see (div id gallery)

http://theo.mypreview.co.uk/ashmolean-museum

Code (markup):

Unfortunately this function only works with firefox, I've tried searching google but have found very little useful information about the function.

Does anyone know how I can get this to work in all browsers??

Thanks

 

This is a modern property in CSS3 (not a 'function') you won't find in Internet Explorer for many years. Perhaps IE10 but it's not in IE9 and less. It is only available in modern browsers, that is, everything else. Another example why no one should ever use IE.

 

:*(

Do you know of any hacks or anything that can simulate this property?

 

You don't need hacks for modern browsers. Just change the -moz to -webkit for webkit browsers and -o for opera. The only thing you can do for IE is write some javascript and hope IE dies sooner than it already is.

 

I might be wrong, but I believe that you might be able to simply recode your html/css to avoid using that property altogether. Maybe find a way to utlize something like "max-width:100%" or something else that is more commonly recgonized by all browsers (namely IE). I believe that maybe just setting a fixed width would also do the trick.

 

Thanks GWiz I was also thinking along these lines too.

 

Yes. We should all dumb down our pages for IE. After all, we've been doing that for six years or so, so we might as well continue letting it hold back progress as it always has.

 

I guess you found a solution, because i cant find anything messed up in IE.

Duh, most of the internet still uses it. Essential to support. Plus, without IE where would the challenge be.

 

I compromised with just setting a width of 1150px.

zzbomb you are right, in a perfect world we would just code for modern browsers, but sinces it's not, and the majority of people are not computer savy enough to click AUTO UPDATE lol, we just got to deal with it.

 

Less than 60% of users have IE, btw, meaning almost half of internet users do NOT use IE but the point of my comment is this: rather than serve modern browsers dumbed down markup, serve them the good stuff and use hacks or javascript for incompetent IE. Then, in 5 years or so, if IE were to gain this new property, you only need to delete that hack. This way your users get the benefit of the new property and IE users won't miss anything.

IE users will be less than 50% in two years or so anyway and by displaying the benefits of the modern markup, you help get rid of that turd of a browser.

 

WTF... 1150px... and overflow hidden... OMG

Not able to scroll in 1024x768 px resolution. Good job excluding people with 1024x768 px screen resolution.

Grade F for usability

 

Firstly in no way is the site finished, this is a WIP so things are subject to change. But I agree with your concerns about usability, this is what the client wanted (because the old site was like this) I wanted to fit the 100% unfortunately this just caused the problems pointed out in the first post. The overflow hidden is left over from what I was doing before, obviously now that has to go, thanks for noticing. The site it'self is built using 960 grid, the gallery it'self is 13240px wide (at present) if I increase the width further there should be no problems for 1024x768 visitors viewing all the images.

 

Too true. (UPDATE HERE)... Nope.

 

Had an idea today, if I can get the nextgen gallery to create the thumbnail within < li > < /li > this should allow me to use the 100% width

 

What about 800x600? Is it even worth coding for that lower resolution anymore?

 

No, I'm also using analytical data see what the average screen resolution is.

 

Typically I recommend using 1024x768 as a lowest common denominator for most websites. But if you already have an established website than analytics is your best friend.