Forum Moderators: not2easy

Message Too Old, No Replies

Iframe and css

It's all going terribly, terribly wrong...

         

edit_g

12:33 am on Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've got an iframe on a pure CSS page - the iframe is inside a div but I can't get it to behave.

When I load up the page it looks great - just the way I want it and I can scroll up and down - but as soon as I mouse over one of the links in the container div the div changes height and obscures the bottom of the iframe.

Any ideas?

Birdman

1:40 am on Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm...that sounds like a tough one. The first possible glitches that come to mind are:

1) Using bold on hover and not on normal state of links.
2) Positioning of the div(absolute seems to mees up alot)

The code would probably help on this one.

edit_g

8:24 am on Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Positioning of the div(absolute seems to mees up alot)

Thanks Birdman - this does seem to be the problem.

However - it looks as if Opera 7 won't deal with iframes anyway. The only way around this seems to be a bit of javascript (not going to happen). So I'm going to have a little rethink...

daosmith

12:10 pm on Jul 1, 2003 (gmt 0)

10+ Year Member



I havn't had any problems with iframes in opera - although I've only used them once, admittedly, and the scrolling was set to 'no'. Don't forget to specify a height and a width in the container div as well as for the iframe, if you havn't already - and maybe see if adding the overflow: hidden style property helps?

edit_g

12:36 pm on Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'll post a little bit of the code (I'm just hacking around here so its a bit messy with inline styles etc):

This is the CSS for the content part in which the iframe is contained:

#content
{
position: absolute;
top:7em;
left:16em;
clear:all;
float: right;
width: 65%;
padding: 10px;
background-color: #E9E2DD;
border: 1px solid #33414D;
}

This is the iframe, which is the only thing in the div, apart from some txt in <p> tags.

<iframe name="news" src="news.html" frameborder="0" height="95%" width="40%" border="0" align="right" style="border: 1px #33414D solid;"></iframe>

Birdman

9:30 pm on Jul 1, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



One thing stands out and I'm not sure if it will help any but, all should be both in the clear property.

clear: both;

Hope it helps out some.