CSS - Css Drop Down Over An Iframe In Ie7?
Hi All,
You may have come across this several times and may heard of people complain about this several times too. But unfortunately, after browsing 30 websites in my google search, I tried everything and cant seem to get it to work. Basically, I have a CSS drop down on my website (Site is made up of HTML/CSS and uses nested DIVs throughout). When I have a iframe (width=100%), below the horizontal navigation at the top, it just doesnt hover over it. Part of the drop down menu hides behind the iframe. I have constantly read to have parent menu item have a z-index as a higher value than all child divs, provided there is a position set (which i do! - position:relative; ). But still no luck! My CSS Code: .menu1 { float:left; z-index:30; margin-top: 0; margin-right: 0; margin-bottom: 20px; margin-left: 0; position:relative; } .menu1 ul { margin:0; list-style-type:none; z-index:25; } .menu1 ul li { float:left; position:relative; background-image: url(../images/layout/img_dash.gif); background-repeat: no-repeat; background-position: right; z-index:20; } .menu1 ul li a, .menu1 ul li a:visited { float:left; display:block; text-decoration:none; color:#fff; line-height:35px; padding-top: 0px; padding-right: 16px; padding-bottom: 0px; padding-left: 16px; z-index:20; } My HTML: <!-- horizontal navigation--> <div id="menuh-container"> <div class="left"> </div> <div class="right"> </div> <div class="menu1"> <ul> <li><a class="menu1one" href="index.html">Home </a> </li> <li><a class="menu1one" href="commsadvisory.html">Comms Advisory </a> </li> <li><a class="menu1one" href="emailreports.html">Email Reports </a> </li> <li><a class="menu1one" href="overnightreports.html">Incident Reports </a> </li> <li><a class="menu1one" href="morninghealthcheck.html">Morning Healthcheck </a> </li> <li><a class="menu1one" href="#nogo">TOC Tools <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Autosys</a></li> <li><a href="#nogo">Bing Web</a></li> <li><a href="#nogo">Handover</a></li> <li><a href="#nogo">IPM Search (New Window)</a></li> <li><a href="#nogo">Sharepoint</a></li> <li><a href="#nogo">Reserved Bridges</a></li> <li><a href="#nogo">RSA Console</a></li> <li><a href="#nogo">Ticket Builders</a></li> <li><a href="#nogo">Uptime Tool</a></li> <li><a href="#nogo">User Admin</a></li> </li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </a> </li> <li><a class="menu1one" href="#nogo">Contacts <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Sub Link 1</a></li> <li><a href="#nogo">Sub Link 2</a></li> <li><a class="drop" href="#nogo">Sub Link 3 <!--[if IE 7]><!--></a><!--<![endif]--> <table> <tr> <td><ul> <li><a href="#nogo">Sub sub Link 1</a></li> <li><a href="#nogo">Sub sub Link 2</a></li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </li> <li><a href="#nogo">Sub Link 4</a></li> <li><a href="#nogo">Sub Link 5</a></li> </ul></td> </tr> </table> <!--[if lte IE 6]></a><![endif]--> </li> </ul> </div> </div> <!-- horizontal navigation end --> <!-- main - content area--> <div id="contentBottomNLHS"> <div id="masterContent" class="col3"> <div class="content" > <div class="tabber"> <div class="tabbertab"> <h2>Start/Close of Day Handover EU-APAC</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/RegionalHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>Start/Close of Day Handover EU-US</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/EU_USRegionalHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>EU-Asia Networks Report</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCEmailReports/AsiaEUShiftHandover.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>EU Daily Network Changes</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/NetworkCHG.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>US Unix/Linux Report</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/default.aspx" scrolling="auto" height="720px"></iframe> </div> <div class="tabbertab"> <h2>Daily Incident Review</h2> <iframe id="main" name="main" width="100%" frameborder="0" src="TOCServerOps/DIRMM.aspx" scrolling="auto" height="720px"></iframe> </div> </div> ----------------------------------------------------------- My website is internal one for work, and is not uploaded anywhere so unfortunately cannot provide a link for you to view it. Thanks! Similar TutorialsI have an iframe that contains a CSS drop down list and I'm having problems getting the drop down list to display beyond the bottom of the iframe. The drop down list cuts off at the bottom of the iframe. Is it possible for a css drop down list to display beyond the borders of an iframe? I've experimented with z-index and have not had any luck yet. Any ideas? Hey guys , I am looking to convert my css3 vertical nav bar , from the order of "DROP DOWN" to "DROP UP" . The code i am using below is from a css3 gen. If anybody could show me what values to change it would be greatly appreciated , Code: ul#css3menu,ul#css3menu ul{ margin:0;list-style:none;background-color:#000000; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(255,255,255,0.16)));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;-moz-box-shadow:1.4px 1px 2px #B1B1B1;-webkit-box-shadow:1.4px 1px 2px #B1B1B1;box-shadow:1.4px 1px 2px #B1B1B1;} ul#css3menu ul{ display:none;position:absolute;left:-1px;top:98%;padding:0;background-color:#202020; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.16),rgba(255,255,255,0));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.16)),to(rgba(255,255,255,0)));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;} ul#css3menu li:hover>*{ display:block;} ul#css3menu li:hover{ position:relative;} ul#css3menu ul ul{ position:absolute;left:98%;top:-2px;} ul#css3menu{ padding:6px 6px 6px 0;display:block;font-size:0;position:absolute;z-index:1000;left:10px;top:10px;} ul#css3menu li{ display:block;white-space:nowrap;font-size:0;float:left;} ul#css3menu>li,ul#css3menu li{ margin:0 0 0 6px;} ul#css3menu ul>li{ margin:6px 0 0;} ul#css3menu a:active, ul#css3menu a:focus{ outline-style:none;} ul#css3menu a{ display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial,sans-serif;color:#E7E5E5;cursor:pointer;padding:8px 20px;background-color:;border-width:0;border-style:solid;border-color:transparent;} ul#css3menu ul li{ float:none;margin:0;} ul#css3menu ul a{ text-align:left;} ul#css3menu li:hover>a{ background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;font:12px Arial,sans-serif;color:#333;text-decoration:none; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.38)),to(rgba(85,170,0,0.7)));filter:progid:DXImageTransform.Microsoft.g radient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)} ul#css3menu img{ border:none;vertical-align:middle;margin-right:16px;width:16px;height:16px;} ul#css3menu ul img{ width:16px;height:16px;} ul#css3menu img.over{ display:none;} ul#css3menu li:hover > a img.def{ display:none;} ul#css3menu li:hover > a img.over{ display:inline;} ul#css3menu ul span{ background-image:none;padding-right:16px;} ul#css3menu li.topitem>a{ background-color:traspar;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:50px;-moz-border-radius:50px;-webkit-border-radius:50px;font:bold 13px Arial,sans-serif;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;} ul#css3menu li.topitem:hover>a{ background-color:#00ff00; background-image:-moz-linear-gradient(50% 0%,rgba(255,255,255,0.77),rgba(85,170,0,0.7));background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgba(255,255,255,0.77)),to(rgba(85,170,0,0.7)));border-style:solid;border-color:#F8F8F8;font:bold 13px Arial,sans-serif;color:#444444;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,end Colorstr=#B355AA00)} ul#css3menu li.subfirst>a{ border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px 9px 0 0;} ul#css3menu li.sublast>a{ border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0 0 9px 9px;} And here is the html Code: <ul id="css3menu"> <li class="topitem"><a href="#" title="Item 0"><span>Item 0</span></a> <ul> <li class="subfirst"><a href="#" title="Item 0 0"><span>Item 0 0</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 0 0">Item 0 0 0</a></li> </ul> </li> <li><a href="#" title="Item 0 1"><span>Item 0 1</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 1 0">Item 0 1 0</a></li> </ul> </li> <li><a href="#" title="Item 0 2"><span>Item 0 2</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 2 0">Item 0 2 0</a></li> </ul> </li> <li><a href="#" title="Item 0 3"><span>Item 0 3</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 3 0">Item 0 3 0</a></li> </ul> </li> <li><a href="#" title="Item 0 4"><span>Item 0 4</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 4 0">Item 0 4 0</a></li> </ul> </li> <li><a href="#" title="Item 0 5"><span>Item 0 5</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 5 0">Item 0 5 0</a></li> </ul> </li> <li><a href="#" title="Item 0 6"><span>Item 0 6</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 6 0">Item 0 6 0</a></li> </ul> </li> <li><a href="#" title="Item 0 7"><span>Item 0 7</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 7 0">Item 0 7 0</a></li> </ul> </li> <li><a href="#" title="Item 0 8"><span>Item 0 8</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 8 0">Item 0 8 0</a></li> </ul> </li> <li><a href="#" title="Item 0 9"><span>Item 0 9</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 9 0">Item 0 9 0</a></li> </ul> </li> <li><a href="#" title="Item 0 10"><span>Item 0 10</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 10 0">Item 0 10 0</a></li> </ul> </li> <li><a href="#" title="Item 0 11"><span>Item 0 11</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 11 0">Item 0 11 0</a></li> </ul> </li> <li><a href="#" title="Item 0 12"><span>Item 0 12</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 12 0">Item 0 12 0</a></li> </ul> </li> <li class="sublast"><a href="#" title="Item 0 13"><span>Item 0 13</span></a> <ul> <li class="sublast"><a href="#" title="Item 0 13 0">Item 0 13 0</a></li> </ul> </li> </ul> </li> </ul> This is probably a tall order any advice is appreciated , TYVM Hello all, I'm trying to fix my drop down so it goes straight down. I originally had it so it was reading the javascript but after adjusting it quite a bit, it spans the whole parent nav bar and is completely in css. I don't mind that it's in css but I want visitors to be able to see it in ie because ie own's a good 75% of the browser population. Here is my site, i still have the javascript file in there but it doesn't do anything anymore. Any clues on how to get it so it goes straight down and is viewable in ie? Site Hello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code: .chromestyle{ width: 100%; font-weight: bold; float: left; height: 29px; } .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .chromestyle ul{ border: 0px solid #BBB; width: 100%; background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/ padding: 4px 0; margin: 0; text-align: right; /*set value to "left", "center", or "right"*/ } .chromestyle ul li{ display: inline; } .chromestyle ul li a{ color: #000000; padding: 4px 7px; margin: 0; text-decoration: none; border-left: 1px solid #DADADA; } .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/ background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/ } /* ######### Style for Drop Down Menu ######### */ .dropmenudiv{ position:absolute; top: 0; border: 1px solid #BBB; /*THEME CHANGE HERE*/ border-bottom-width: 0; font:normal 12px Verdana; line-height:18px; z-index:100; background-color: white; width: 200px; visibility: hidden; } .dropmenudiv a{ width: auto; display: block; text-indent: 3px; border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/ padding: 2px 5px; text-decoration: none; font-weight: bold; color: black; } * html .dropmenudiv a{ /*IE only hack*/ width: 100%; } .dropmenudiv a:hover{ /*THEME CHANGE HERE*/ background-color: #0000ff; color: #fff200; } Is it possible to control the attributes of an IFRAME with CSS? Hi all, I am having great difficulty in setting a CSS style for an element in my IFrame. I know how to set the stylesheet for the IFRame using the function "createStyleSheet(strCSS);", however, I want to be able to set the stylesheet for the line that I am currently adding text. This would be like clicking on 'Bold' in Microsoft Word and having the ability to write text using this font until I click on the button again to turn it off. I know that there is an execCommand function that I can use to execute commands on the IFrame. However, I can not find a command identifier that will allow me to set the css style for my current position. Has anyone come across this problem before?!? Any help would be greatly appreciated! Cheers, gavC Does anyone know of a way to make an IFrame go to 100% of the height of its container, in this case a DIV. I have to load in some external tools for a site and I don't want to have to split up my CSS layout into frame parts when I can just use an IFrame. I've considered using javascript to detect the browser size on load and redoing the height and also onResize but that's just ugly. I've tried t r b l all set to 0px with position:absolute that did nothing. Height:100% gives me no height at all, so far the only thing that works is width:100% and a fixed pixel height value dave I am trying to put an iframe into css but it's not working, when i do the iframe screws up and it does not hold the information. I have tried everything I can think of, I even went into dreamweaver to fix it but I got nothing. Here is the code. Code: <!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=iso-8859-1" /> <title>Nintendo DS</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #DEDEDE; background-image: url(images/back.jpg); } a:link { color: #0000FF; text-decoration: none; } a:visited { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: none; } a:active { text-decoration: none; } .style6 {font-family: Verdana, Arial, Helvetica, sans-serif} a { font-family: Verdana, Arial, Helvetica, sans-serif; } --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> </head> <body> <div id="Layer1" style="position:absolute; left:5px; top:4px; width:791px; height:43px; z-index:1"> <table width="789" border="0"> <tr> <td width="147" height="31"><a href="sound.html"target="myiframe">Sound</a></td> <td width="179"><a href="dualscreens.html"target="myiframe">Dual Screens </a></td> <td width="168"><a href="touch.html"target="myiframe">Touch</a></td> <td width="110"><a href="voice.html"target="myiframe" class="style6">Voice</a></td> <td width="151"><a href="connect.html" target="myiframe" class="style6">Connect</a></td> </tr> </table> </div> <table width="800" height="402" border="0" cellpadding="0" cellspacing="0"> <tr> <td><div align="center"> <iframe src="back.html" name="myiframe" id="myiframe" width="400" height="600" frameborder="0" scrolling="AUTO" noresize> </iframe> </div></td> </tr> </table></body> </html> Hi. I wondered if there was anyway to make this iframe auto resize (heightwise) so that there is never a vertical scrollbar if the browser is shrunk down... <iframe name="I1" src="frame.html" width="776" height="391" align="top" border="0" frameborder="0"> Your browser does not support inline frames or is currently configured not to display inline frames.</iframe> I dont think you can do that with an iframe but have to use framesets but I just need another voice! To get an idea of what I mean... www.isolace.net (view the source) Cheers! I've searched the web hi and low yet I have not found any answers. I am using an iframe (it's a love-hate relationship) for my website. I have my index page loaded up with a flash .swf which influences the iframe to switch pages when the user clicks on any of the provided links. *PROBLEM* One of my links consists of a blogger- formulated with 'cryptic blogger code' which I have no intention on learning- just working around. However, no matter how hard I try and mess around with the blogger page's html code, I cannot get rid of the x-axis scrollbar- it appears when it is not needed at all and I am unsure of doing anymore messing around for fear of messing up the code. I've also tried adjusting the actual iframe script but still no results. Please- if any html/css demi-gods/goddesses can help me get rid the the iframe's horizontal scrollbar BUT keep the vertical one, you'll be my best friend :P Here are the websites: (ps- tell me what you think- and it isnt finished) URL <- actual site URL <- blogger page (you can see where i've tried to edit it but still no results) -Jason (i posted this in the html section hoping some html guys would help me- but it was a dud ) I've created a page with an iframe. The page that is being displayed in the iframe is as follows:
Code: <html> <head> <title></title> <link href="mainsite.css" rel="stylesheet" type="text/css"> </head> <body> <table width=100% height=100% border=1> <tr> <th id="welcome">Welcome to the American Communications Web Site</th> </tr> </table> </body> </html> The page loads fine in the iframe, but the css th style is not being implemented on it. The css file has this in it: This is in the mainsite.css file Code: #welcome th { border:1px solid black; font-size: 20px; background: #FF9966; } Any reason why the css style isn't being used? I'm guessing it's because of the iFrame. The main page has no trouble displaying the css styles. I am now learning CSS and I usually use iFrames to make dynamic content but I was wondering if there was a CSS equivalent. I have a two buttons, that when clicked, will load an image to an iFrame called "window". Is there a CSS way to do this? Thanks Is it possible to overide a websites default css when you display it in an iframe? if so how is this done? I have found the following javascript but it doesn't seem to do anything (maybe im using it incorrectly...) Code: var cssLink = document.createElement("link") cssLink.href = "test.css"; cssLink .rel = "stylesheet"; cssLink .type = "text/css"; frames['tbl'].document.body.appendChild(cssLink); I want the iframe to have a horizontal scrollbar but no vertical scrollbar. My code I've been attempting looks like this: Code: <iframe scrolling="auto" src="quicklinks.php" width="100%" height="200" name="helpContent" style="overflow-x: visible; overflow-y: hidden"></iframe> Is this possible? If so, is it compatible with all browsers? I know many of you are going to say, well you have it on auto and if you don't want it to scroll vertically, don't have a page in the iframe that is too high in height. However the page has dynamic thing submitted to it and there might be the possibility that a user submits a name too long and I don't want to deal with only showing a certain length of the string. Hello, for some reason my CSS XHTML web site shows an Iframe in the body of the body. here's the link:http://www.caillouette.com/Utilitrek/eight/members/search_inquiry.php I've fiddled with the widths and container widths with no luck. Can anyone tell me why this is happening? thanks -Sean Hi guys, Currently, the only CSS I know of to edit the scrollbar is Code: <style type="text/css"> body { scrollbar-face-color: #9B9A9A; scrollbar-shadow-color: #171717; scrollbar-highlight-color: #171717; scrollbar-3dlight-color: #171717; scrollbar-darkshadow-color: #171717; scrollbar-track-color: #171717C; scrollbar-arrow-color: #171717; } </style> </head> However, I want a little more customization. Basically, the only thing I want to show is the actual bar in the middle that scrolls up and down. Nothing else. So, what I want to do is make everything else the normal color of the page, and make the bar in the middle a light color. The only problem is, the function scrollbar-face-color edits the bar itself, AND the arrow boxes above and below it. Is there are a more specific function to edit just the bar only? Thanks. Recently I learned of the tag <iframe> for including external stuff in my web site. It's use, of course, breaks every rule in the book concerning the strict DTD and modern CSS design. Can you suggest the proper alternative to the following?: <iframe height="250" width="190" scrolling="yes" src="../vsCalendar/upcoming.php"></iframe> Thank you for your valuable time. hi all, i am a beginner to html world ... hope someone can help me out.. i use iframe to display an external html page (maybe www.download.com), i can't use css to control the appearance of the iframe src page as i try it before. Is there anyway i can do so that my main page standardize the appearance, even displaying others web? Thank for ur attention..... Regards.... K Just a quick question. Do IFrames inherit css from the parent window? Because in firefox is seem to but in IE it doesn't. Any explaination? i've been designing a website and decided to use IFRAMES (try them out really). I'm using firefox, i've got an IFRAME that is correctly positioned when i view it locally in firefox, but when i upload it to the web (free host till i get hosting) the iframe is in the top left and not wide enough or tall enough. All the iframe attributes are in a stylesheet, and i am sure it is uploaded to the right spot and the links are correct Question is, why would firefox view it correctly when its viewed locally, and not when it is uploaded it to the web. thanks in advance |