Why does my iframe have a horizontal scroll, and why won't it fill up the entire table cell?

Question

I'm designing a website and want to make the height of the iframe be 100% because the length of the pages is going to vary. I thought I had it coded right, but now I have a horizontal scroll, AND the iframe is not filling the table cell - HELP :)

http://www.excelfleetlimo.com/weddings.html

Anyone have a solution for me?

Answer 1

Using an iframe in that way violates so many usability guidelines it's just frustrating. If I wanted to read the content in a window that takes up 1/30th of my screen, I would do it myself. Keep the content inside the parent page and let it scroll down as far as it needs. Your users will thank you, even if they don't consciously realize it.

And FYI, an iframe will accept a height parameter of 100% (height="100%"), to fill the dimensions of its container. You also have a style definition in your stylesheet, iframe {} that specifies a static height of 350px. You need to remove that.

Answer 2

in the following sectionof your code:

iframe {
width:375px;
margin:0;
height:350px;
overflow-y:scroll;
overflow-x:hidden;
}

Try tweaking your width - like maybe 360px or something until the horizontal scroll bar disappears.

As far as filling the cell, make sure your iFrame parameters match the cell dimensions. If you have the cell set with %, change them to actual pixel values. It may screw up the way it looks on other monitors though;I guess it depends on the size of those other pages, too.

Also, may put a 'mute' button on that flash chick - some people don't want to hear all that stuff.

Answer 3

You have height:350px defined for iframes in the style block. You need to change that to the actual height, or to 100%.

Answer 4

It doesn't make sense to put that content in an iframe, but if you insist.

Remvoe "height:350px;" in this part of the CSS.

iframe {
width:375px;
margin:0;
height:350px;
overflow-y:scroll;
overflow-x:hidden;
}

Answer 5

In order to make it expand to the full cell change the iframe code to: