i want to have an iframe showing one thing then i want to DIV a picture OVER the IFrame, BUT only over certain parts of it AND still be able to use the parts that are not covered by the DIV on top i got it to work in Internet Explorer but not in FF in IE i could still click the buttons of the bottom iframe that are not covered by the top DIV.... In FF it all looks like it does in IE but Icant click the bottom buttons.. almost liek there is an invisable cover over them need help might pay...not much tho its a simple thing i know
First of all--why are you using an iframe? Not a great solution anymore. Especially for SEO purposes. If your div is being hidden have you tried the z-index tag in css?
im IFraming another website and hiding it with a Div.... but i want the functions from the bottom website (Iframe) to work
Show link if it is possible than works comfortable with firefox I think it is simple to do but show Your link link.
PMed - maybe u can help http://movierelief.com/index1.php here is an example.... its not all lined up in IE and FF... but this is wat i wanna do
Well you put different DIV's over the iFrame, and wherever there is a DIV it will not be clickable, because you can't place something over something and still have it clickable underneath. To place things over it you need clever positioning take this for example: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css" media="screen"> body { margin:0; } #bottom { width: 100%; background:grey; margin-top: 50px; height: 500px; } #bottom .link1{float:left; display: block; margin: 350px 0 0 50px; height: 100px; width: 300px; background: green; line-height: 100px; font-size: 24px; font-family: Verdana, Geneva, sans-serif; text-align: center; } #bottom .link2{float:right; display: block; margin: 200px 20px 0 0; height: 100px; width: 300px; background: green; line-height: 100px; font-size: 24px; font-family: Verdana, Geneva, sans-serif; text-align: center; } #ontop1 { width: 200px; height: 150px; background:blue; position:absolute; left:0; top:50px;} #ontop2 { width: 200px; height: 150px; background:blue; position:absolute; right:0; top:50px;} #ontop3 { width: 20%; height: 150px; background:pink; position:absolute; left:40%; top:225px;} #ontop4 { width: 20%; height: 150px; background:red; position:absolute; left:70%; top:400px;} #ontop1:hover, #ontop2:hover { background: red;} #ontop3:hover, #ontop4:hover { background: yellow;} </style> </head> <body> <div id="ontop1"></div> <div id="ontop2"></div> <div id="ontop3"></div> <div id="ontop4"></div> <div id="bottom"> <a href="mylink" class="link1">Visit my link</a> <a href="mylink" class="link2">Visit my link</a> </div> </body> </html> Code (markup): and yep i added fancy hovers for no reason because i was bored. but you can see that we can place things over and all over the place and still have the links work undeneath. btw i think whoever visits this should check my example it's like being at a disco