CODEWITHSUNDEEP
cssiframewidth
elewinso
elewinso

Reputation: 2521

iframe width attribute is being ignored

I would like to embed an slideshare presentation within a tooltip. generally I want my tips to change their height/width dynamically based on their content hence I set (in my CSS)

width:auto;
height:auto;

I would like to have the width of the tooltip dictated by the inline width attribute of the iframe.

see here http://jsfiddle.net/elewinso/eNfHZ/

Upvotes: 1

Views: 1596

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The meaning of width: auto depends on the properties of the element, and in this case, it means 300px, as per clause 10.3.1 of the CSS 2.1 spec. The iframe element has no intrinsic width, and you cannot (in CSS) make its width depend on the content of the iframed document. It is part of the very idea of iframe that the iframed document is rendered autonomously, independently of the settings of the framing document, except that the latter sets dimensions on the inline frame, but it needs to set them in its own context (which does not include the content of the iframed document).

So if you want to have your tooltip rendered smoothly, just don’t use iframe. Instead, use content (static or script-generated) in the main document.

If you just want to have the HTML width attribute on the iframe element take effect, just don’t override it in CSS. Any setting of the width property of an element will make the width attribute on it null and void.

Upvotes: 2

Webberig
Webberig

Reputation: 2806

100% width works:

div.sttip iframe{
    width: 100%;
    height: auto;
}

http://jsfiddle.net/eNfHZ/1/

You won't be able to maintain aspect ratio though, you'll have to use Javascript to calculate the height using a onResize event handler.

Upvotes: 0

Related Questions