Hello fellow programmers, I'm running into a bit of a problem with some CSS coding for a navigation menu over a iFrame, can you please help? I found the culprit but eliminating it leads to another problem! here is the page I'm having trouble with: http://www.kingswaycarpetsandblinds.com/Products/Floors/testing/shawframe.htm The menu on the left works, hover "flooring products" and you have sub-menus and so forth. BUT this line <link href="../../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> Code (markup): interferes with the iFrame that it supposed to show in this page http://www.kingswaycarpetsandblinds.com/Products/Floors/testing/shawframe2.htm where I basically just hid the line as a comment and all the submenus show, which I don't want <link href="../../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> Code (markup): CSS shawstyles.css @charset "utf-8"; /* CSS Document */ *, html {margin:0; padding:0;} body {background: #369; font-family:Arial; font-size:80%; word-spacing:.2em;} a {color:white; text-decoration:none; font-weight:bold;} a:hover {color:red;} img { border:none;} ul {list-style-type:none; margin:0; padding:0;} div#wrapper {position:relative; margin:0 auto; width:1150px; height:100%; background:white; /*border:solid 1px #69C;*/ height:100%; overflow:visible;} div#banners { position:relative; width:100%; background:url(../images/head_bg.jpg) repeat-x bottom;} div#topads {height: 55px; background: #369;} div#topnav { position:relative; height:30px; top: 0;} div#topnav ul {position: absolute; margin-left:290px;} div#topnav a {position:absolute;padding-top:10px;display:block ;height:30px; text-align:center; font-size:1.2em; font-weight:bold;letter-spacing:0em; text-indent:-20px; font-variant:small-caps;} div#topnav a:hover {color:black;} div#topnav li.Home a{width:130px; background:url(../images/tab_s.gif) no-repeat; top:0px; left:0px; z-index:100;} div#topnav li.Products a{width:130px; background:url(../images/tab_s.gif) no-repeat ;top:0px; left:110px; z-index:90;} div#topnav li.Shop a{width:130px;background:url(../images/tab_s.gif) no-repeat; top:0px; left:219px; z-index:80;} div#topnav li.Specials a{width:180px;background:url(../images/tab_w.gif) no-repeat; top:0px; left:328px; z-index:70;} div#topnav li.Contact a{width:130px;background:url(../images/tab-s.gif) no-repeat; top:0px; left:480px; z-index:60;} div#topnav li.Home a:hover{background:url(../images/tab_s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Products a:hover{background:url(../images/tab_s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Shop a:hover{background:url(../images/tab_s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Specials a:hover{background:url(../images/tab_w-active.gif) no-repeat; z-index:1000; direction:ltr;} div#topnav li.Contact a:hover{background:url(../images/tab-s-active.gif) no-repeat; z-index:1000; direction:ltr;} div#leftcolumn { z-index:10;float:left; position:relative; width:180px; margin:2px 0 0 3px;} div#leftcolumn li {background:url(../images/trans_bg.gif) repeat; } div#leftcolumn a {display: block; color: #2A3FAA; margin:2px; padding:3px 1px 3px 15px; border:solid 1px #AA5F00; background: #E6E6D0; font-size:.9em;} div#leftcolumn li.hassub a{background: url(../images/hassub.gif) no-repeat right #E6E6D0;background-position: 95% 50%;} div#leftcolumn li.hassub a:hover{background: url(../images/hassub-active.gif) no-repeat right #E6E6D0;background-position: 95% 50%;} div#leftcolumn li.link a{background-image:none;} div#leftcolumn li.link a:hover{background-image:none;} div#leftcolumn a:hover {background:#F4F4EA; color:red;} div#middlecolumn { z-index:1; float:left; position:relative; width:1050px; margin:2px 0 0 1px; height: 600px; } div#splash {margin-left:5px;height:auto; width:520px;} span.content {display:none;} div#middlecolumn p {margin-left:5px;width:520px; } div#middlecolumn a { color: blue; text-decoration : none;} div#middlecolumn a:hover { color: red;} div#rightcolumn {float:right; position:relative; width:180px;margin:2px 3px 0 0;} div#rightcolumn img {margin:10px 0 0 10px; max-width:160px; text-align:center;} div#footnav { clear:both; background:url(../images/menu_bg.png) repeat-x; height:20px; text-align:center; width:1150px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; } div#footnav a { font-size:.9em; margin:2px 10px 0 10px;} div#footer {position:relative; margin: 0px auto;text-align:center; font-size:.9em; width:1150px;height:28px; background: url(../images/footer_bg.png) repeat-x; color:white;} div#footer p {padding-top:1px;line-height:1em;} h2 {border:solid 1px black; margin:1px; font-variant:small-caps; background:#369; font-size:1.1em; color:white; letter-spacing:.05em; font-weight:normal; padding:2px 5px 2px 5px;} div#leftcolumn .subnav {position:absolute;margin:-24px 0 0 180px; width:140px;} div#leftcolumn ul.subnav {display:none;} div#leftcolumn ul.nav_main li:hover ul.subnav {display:block;} div#leftcolumn .subsubnav {position:absolute;margin:-24px 0 0 140px; width:140px;} div#leftcolumn ul.subsubnav {display:none;} div#leftcolumn ul.subnav li:hover ul {display:block;} div#extradiv {clear:both;background-image:url(../images/tab-s-active.gif);width:1px;height:1px;} div#extradiv2 {background-image:url(../images/tab-w-active.gif);width:1px;height:1px;} .clear {clear:both;} object.flash {position:relative;left:0px;} ul.nav_main {display:none;} /*IE6 styles */ /* .ie6 div#leftcolumn li {border:1px solid white;} .ie6 div#leftcolumn li a{margin:1px;}*/ .ie6 div#container {margin-top:-30px; height:100%;} .ie body{font-size:75%;} .ie div#topnav {position:relative;height:30px;} link { color: #0033FF; text-decoration: underline; } Code (markup): I want to keep the hover ability over the menu but I need to have the iFrame showing too! It might be simple but I don't know how to fix this! I appreciate all the help, let me know what's fair for compensation! Thank you to all! edit: CSS for menu @charset "utf-8"; /* CSS Document */ *,html {padding:0; margin:0;} body {background:white; color:black; font-family:sans-serif; font-size:75%;} li {width:200px;} ul.subnav {display:none;} ul.subsubnav {display:none;} li.hassub a:hover{ color:red;} ul.nav_main li:hover ul.subnav {display:block; position:absolute; left: 150px; top: -15px;} ul.subnav li:hover ul {display:block; position:absolute; left: 150px;} Code (markup):
this is not the page to post this..post it in the CSS HTML forum...you will get some advice there thanks
I'm paying for your time to fix this! I believe it belongs in services otherwise I wouldn't say WTB! And I find that people respond faster when help is compensated for!
Try removing the z-index parameter from the left column div styling. z-index is used to help prioritise absolutely-positined elements and can often cause overlap/hiding issues. If removing it doesn't fix the issue, or causes more/different issues, put it back, then try adding a class to the iframe on your stylesheet and assigning it a z-index value to see if you can get it to show before the menu is rendered (this may, unfortunately, cause the submenus to vanish -- but will take you ~20 seconds to test.) Some more info on the z-index property can be found here. Frank
Thank you Frank! I tried removing the z-index but it did nothing! I'm not feeling up to messing with the code into something I have no idea about, but if you or anybody else likes to take a stab at fixing it, I'll pay because I can't deal with that hassle atm!
first, include/uncomment <link href="../../../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" /> Code (markup): to http://www.kingswaycarpetsandblinds.com/Products/Floors/testing/shawframe2.htm then comment out on SpryMenuBarVertical.css iframe {display:none;} Code (markup): like this: iframe {/*display:none;*/} Code (markup): you might need to remove height on shawstyles.css div#middlecolumn { z-index:1; float:left; position:relative; width:950px; margin:2px 0 0 1px; /*height: 600px;*/ } Code (markup):