CSS Coding

[Davidson_ITM]

Hi,

We have a webserver that runs departmental home pages, within an iframe it pulls back the school website, overlayed on that, I have some menu's and drop down resources.

Recently our website has been updated (by external company), and now the landing page needs zooming out to 25% to fit the content of the iframe on the page correctly. Obviously in doing this, the rest of the site goes tiny and any sub pages.... well you get the idea.

I've amended the CSS to reduce the iframe size to 25% and in internet explorer it now works perfectly. However, this is not reflected in Chrome. Annoyingly (for this problem), we have a lot of users that fluctuate between these two browsers and I need it to work in both.

Can anyone advise how I would amend this coding in order for this to be applicable in Chrome as well as IE? Coding detailed below....

 

iframe {

position: relative;

border: 0;

width: 100%;

height: 20%;

overflow:hidden;

}

 

Any suggestions are much appreciated. I usually try and stay as far away from this kind of thing as possible!!

[SimonHooker]

Hi Davidson,

 

Unfortunately trying to advise based on just that is not particularly possible, CSS relies a lot on context. The declaration you have there means that all iframes regardless of context will be 100% wide, 20% high, have no border, and be relatively positioned. This means that the sizing of the iframe in modern browsers is based on the parent block-level element. Additionally you do not specify which version of IE it works in - things that work in IE 8, 9 etc do not always work in IE11, Edge

 

If you are able to provide any additional information i.e. the markup around the iframe, something that can be used to reproduce the problem then that would be best - might be worth chucking some stuff into https://jsfiddle.net/ to get an example up, or provide some screenshots to show what you are trying to achieve ( with anything sensitive suitably censored of course )