Max-height workaround for IE9 - css

In the photography portfolio linked below, clicking on individual images renders the photo at a max-height of 90% of the browser window. In Safari, Firefox, and Chrome. But IE9 seems to ignore this command entirely and the user must scroll to see any portrait oriented photo in its entirety.
I've googled workarounds, but haven't found any that apply to IE9. Mostly I found Javacript expressions in the stylesheet suggested as workarounds for IE6. Is there a less "expensive" workaround for IE9? Or is it no longer a problem (which is why I can't find anything) and I just have a browser setting wrong?
Here's an example of an image that renders properly in Chrome, Firefox, & Safari - but you have to scroll in IE9: http://russmoorephotography.com/#/portfolio/state-capitol-aisle-capitol-dome/
Edit: this actually doesn't work in Firefox either. Just Chrome & Safari.

Related

iFrames get cut off in IE8, full height in all other browsers

My clients insist on using IE8, which means everything has to be IE8 compatible. We have iFrames on a couple pages, and they're getting cut off in IE8. This is how the page looks in IE9:
(the form extends even further down the page, this is just as much as I could get in a screen capture)
but in IE8 it gets cut off, seemingly at the height of the window:
Does anyone know why IE8 is cutting it off like this, and how to fix it?

CSS overflow:scroll doesn't work only for iFrame in Chrome, Safari and Opera

I am using overflow:scroll; in my css to have scrollbars always "on" for an iFrame window, but it works only for Firefox! Any idea about Chrome, Safari and Opera? Thank you in advance!
I have a similar issue with webkit (safari and chrome) based browsers; seems that they value higher the css styles on the html over the actual iframe style itself. CanĀ“t find much documentation on this, but I am sure it is the origin of the problem.
http://trafficonweb.com/iframe-moves.png the iframe moves to left when pulled right on its main content (under the navigation menu). Only on webkit.
This happens when scaling down the iframe with the scale (transform) css property.
This is not the perfect answer but at least a hint; will continue research and post afterwards.
And looking for others to contribute to this issue. Thanks.

How to Perfectly Center in IE8/CSS2.1?

Obviously for Chrome, Firefox, and Safari (which use CSS 3) you would do
margin-left:auto;
margin-right:auto;
But how can I perfectly center in IE8?
This code already works in IE8, IE7 and IE6, and people have been using them to center things for a good long while now. Have you tried your code before assuming that the margin properties are new to CSS3 (when in actual fact they have been around since CSS1) or that just because something is part of CSS3 automatically means IE8 and older won't recognize it?
If that code doesn't work for you in IE, your page is probably being displayed in quirks mode.

Scroll bar css style in Internet Explorer

I've got this problem while doing the scroll bar for both iPad and browsers. The style is working fine with Opera, Safari, Firefox and Chrome. However the style doesn't show in Internet Explorer and it appears the wired horizontal scroll bar on the page too.
You can find a link to the page here.
Does anybody know how to fix this issue?
Looking at the iScroll website and demos it looks like IE isn't supported. Go ahead and try it in IE http://cubiq.org/dropbox/iscroll4/examples/simple/. You may want to try another library such as this one http://www.hesido.com/web.php?page=customscrollbar which seems to work just fine in IE.

css rollover buttons- great in safari,and firefox/ ie but not chrome?

i've been trying out a bit of code posted to make image rollover buttons using only css,
this seems to work fine.
local testing showed no problems, IE, Firefox, safari all ok. even chrome displays as intended on the local version.
Once i move to a hosted test, IE, Firefox and Safari all display as intended but chrome offsets all the buttons right about 8-10 pixels.
here's the test page
http://www.fierysurprise.pwp.blueyonder.co.uk/bga/bgd.html
can anyone enlighten me as to what's happening?
site built in Kompozer
I assume you're referring to the squares under the "architectural design..." phrase.
I can't recreate this problem in Chrome v5.0.375.125.
What version of chrome are you using? Chrome tends to doggedly cache resources. Have you tried a cache refresh?
What version of Chrome are you using? I looked at your site in Chrome 5 and can't seem to tell a difference between any of the browsers you've mentioned.

Resources