|
CSS - Sub Menus Disappearing
I have this test site using CSS drop down menus, but when you scroll over, they disappear. Seems to be happening in IE9, Firefox and Chrome. Can't figure it out.
Any help would be appreciated! Here is the script: Code: <head>
<title>Untitled Document</title>
<style type="text/css">
body {background-color: #FFFFFF; font-family: verdana, arial; font-size: 10pt; font-weight: bold; color: #0000ff;}
.box1 {
width: 1000px;
height: 600px;
position:relative;
left: 150px;
top: 0px;
}
.blue_box {
width: 900px;
position:absolute;
top: 5px;
left: 20px;
height: 15px;
}
.box2 {
width: 1050px;
position:absolute;
top: 40px;
left: 20px;
height: 15px;
z-index: 2;
}
.main_image {
position: relative;
top: 3px;
}
.pic_box {
width: 738px; /* 10px longer than actual jpg */
position:absolute;
top: 75px;
height: 167px;
left: 20px;
z-index; 1;
}
.text_box1 {
width: 738px;
position:absolute;
top: 218px;
height: 159px;
left: 26px;
border-color: #ff0000;
}
.education_box {
width: 881px;
position:absolute;
top: 321px;
height: 350px;
left: 21px;
}
.top_news_box {
width: 136px;
position:absolute;
top: 1px;
height: 317px;
margin-left: 5px;
left: 715px;
border-color: #ff0000;
}
/*Credits: Dynamic Drive CSS Library */
/* Top menu */
.menu ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.menu li a {
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}
.menu li a:hover{
color: #FFFFFFF;
background:#0033CC;
}
/* Drop down menu buttons */
.blue ul { /* For all tags under <ul> (main and sub) */
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 10pt Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}
.blue li { /* Sets the properties associated with <li> */
display: inline; /* Sets li tags horizontal(main and sub) */
position: relative;
margin: 0;
}
.blue li a { /* Sets the properties associated for all anchor tags */
text-decoration: none;
padding: 5px 7px;
margin-right: 15px; /* Sets margin to 15px, which spaces out each menu button by 15px */
border: 1px solid #778;
color: white;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}
.blue li ul { /* Sets the properties for all li ul (sub menus). Rest is inherited */
position: absolute; /* All settings (e.g. left, top, etc.) will be relative to the top menu buttons (non sub menu buttons) */
left: 1px;
display: none; /* Blocks all sub menu tags */
}
.blue li:hover ul{
display: block; /* Shows all elements under each other (as opposed to next to each other) */
}
.blue li:hover ul a {
position: absolute;
width: 150px;
top: 5px; /* Amount of space the first sub menu starts from the parent button */
border-radius: 8px;
text-decoration: none;
background-color: #0000FF;
padding: 5px; /* Pads area around text 5x in all 4 directions */
border: 1px solid #cccccc;
border-bottom: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class="box1">
<div class="blue_box">
<div class="menu">
<ul>
<li><a href="">Join MSSNY</a></li>
<li><a href="">Pay Dues On Line</a></li>
<li><a href="">Directory Questionaire</a></li>
<li><a href="">MSSNYPAC</a></li>
<li><a href="">Grassroots Action Center</a></li>
<li><a href="">Member Login</a></li>
</ul>
</div><!-- Close menu -->
</div><!-- Close box2 -->
<div class="box2">
<div class="blue">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About MSSNY</a>
<ul>
<li><a href="#">Divisions</a></li>
<li><a href="#">Governance</a></li>
<li><a href="#">Committees</a></li>
<li><a href="#">Member Sections</a></li>
<li><a href="#">House of Delegates</a></li>
<li><a href="#">Position Statements</a></li>
<li><a href="#">By Laws</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li><a href="#">Membership</a>
<ul>
<li><a href="#">Applications</a></li>
<li><a href="#">Pay Dues Online</a></li>
<li><a href="#">AAPI Physicians</a></li>
<li><a href="#">NYS Medical Directory</a></li>
</ul>
</li>
<li><a href="#">Medical Community</a>
<ul>
<li><a href="#">County Societies</a></li>
<li><a href="#">Speciality Societies</a></li>
<li><a href="#">State Societies</a></li>
<li><a href="#">Ethnic Medical Associations</a></li>
<li><a href="#">American Medical Association</a></li>
<li><a href="#">NYS Department of Health</a></li>
<li><a href="#">Additional Medical Links</a></li>
</ul>
</li>
<li><a href="#">Public Health</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="#">Physician Advocacy</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<li><a href="#">Practice Resources</a>
<ul>
<li><a href="#">WCB Guidelines and Fee Schedule</a></li>
<li><a href="#">EHR Implementation Services</a></li>
<li><a href="#">CME Physicial Education</a></li>
<li><a href="#">MSSNY Online Library</a></li>
</ul>
</li>
</ul>
</div>
<!-- Close blue -->
</div>
<!-- Close blue_box -->
<div class="pic_box"><img src="050211a_Original.jpg" class="main_image" width="691" height="136" border="0" />
<!-- Close top_news_Box -->
<div class="top_news_box">
<p><img src="Facebook-Twitter-Linkedin.JPG" border="0" /></p>
<p>Visit the MSSNY Blog Forum. .</p>
<p>News of New York<br />
Rate Card and Classifieds </p>
<p> MSSNY eNews 6/17/11 </p>
<p>MSSNY Legal Resources </p>
<p> *** Members Section *** <br />
Members: Click Here</p>
<p> Non Members: <br />
Browse Our Benefits Join US </p>
<p> <br />
</p>
</div>
</div>
<!-- Close pic_box -->
<div class="text_box1">To All New York Physicians: No Tort Reform HOD
Ref. Comm. Documents Health Care Reform <br />
<br />
WCB Guidelines and Fee Schedule 6-Credit CME Course on New Workers Compensation
<br />
Treatment Guidelines <br />
<br />
Influenza Surveillance: How to become an ILINET Provider for 2010-11 flu
season <br />
</div>
<div class="education_box"><img src="MED101014-Infection-Course-Image_1.jpg" width="263" height="219" border="0" /> <img src="MED100513-Course-Graphic.jpg" border="0" /></div>
<!-- Close pic_box -->
</div>
</body>
</html>
Similar TutorialsSuckerfish came into my life recently and has not only offered a great deal of freedom with dynamic menus at lower overheads than most (totally) Javascript alternatives, but has also had me tearing hairs out more frequently than most other things I know. The problem I currently face is when viewing my menus in IE6. At first this suggests that the issues lie within the Javascript of the Suckerfish menus... The pages in questions are located at the following addresses (please excuse the mid-construction state of each): www.cheapboilers.com/sandbox/index.html www.cheapboilers.com/sandbox/baxi_105.html Take the grey vertical menu on the left hand side. The first level appears fine, but the problem is with the second level. In index.html all appears well. However in baxi_105.html when moving down the list in the second level menu the menu disappears when moving from the first to the second item. At first I thought the problem was to do with the margins surrounding the elements - I thought the li element had detected the mouse as having left the element as it passed over the border. If this were true then the same would happen with the index.html page (which uses the same code/html/css). It does not. My current theory is that the other elements on the page are somehow interfering with the Suckerfish menus. Index.html has nothing but text in the content of the page. baxi_105.html has images, links etc in it. This theory is backed up by going to the bottom list item in index.html (Worcester) and viewing the second level menu for it. The menu vanishes as with all the menus on baxi_105.html. It is as if the footer of the page is interfering with the operation of the menus. This disappearing menu issue is driving me up the wall. Please can someone offer a solution? Thanks in advance. Andy I am trying to compose several pages with a similar theme. They work on FireFox and several Mac broswers that I've tried, however in IE6 for windows, my div that is position:absolute; does not appear at all. It does appear when I change the value to relative. The other browsers I've tried show the absolute div with no problems. I have no idea what is going on. http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index_IE.htm The 'invisible' div should have a green background and some text. The above is a scaled-down version of http://navpress.ecommercerep.com/chicken_soup_for_soul_bible/index.htmhttp://navpress.ecommercerep.com/ch...le/index_IE.htm http://navpress.ecommercerep.com/ch...le/index_IE.htm This is the first page I've made in CSS and am just putting together the basic structure. In firefox, everything works as it should. I used a .png with transparency for a header element(picture of buildings) and floated the transparent nav-bar over that. Pictures below show firefox and IE results. Notice how the image doesn't even show up at all in IE. I cannot figure this out, it's probably something I just don't know about yet but it's driving me freakin crazy Firefox: (how it should look-space between H and t) h ttp://i3.photobucket.com/albums/y100/timcorley/firefox.jpg IE: how it looks in IE h ttp://i3.photobucket.com/albums/y100/timcorley/IE.jpg My code might have some issues as I've never really done this before, but I appreciate the help. CSS: Code: html, body {
background:#1d1d1d;
margin: 0;
padding: 0;
}
h1,h2 {
margin: 0;
padding: 0;
}
#page-container {
width:860px;
margin:auto;
}
#branding {
background: url(../images/luxeheaderbgrnd.png) repeat-x;
height: 117px;
}
#branding a{
text-indent:-9999px;
display:block;
width: 200px;
}
#branding h1 a{
height:113px;
background:url(../images/logo.png) no-repeat;
}
#header {
background: url(../images/h2bgrnd.gif) repeat-x;
height: 247px;
}
#header h2{
position:relative;
width:465px;
height:301px;
float: right;
margin-top: -60px;
margin-left: 200px;
margin-right: 20px;
z-index:2;
}
#main-nav {
background:url(..images/navbartrans.png);
position:relative;
height:53px;
width:860px;
float:left;
margin-top:-52px;
z-index:3;
}
#features h1 {
background: url(../images/features.gif);
width:860px;
height:248px;
}
#footer {
background: yellow;
height:20px;
}
This site was done using all CS and is showing correctly in Firefox. When I test it in IE 6.0 All of the top navigation and images disappear. Still shows in the source code but doesn't display. I have no idea why. I've tried changing the order of my divs on the page and double checked all my z-indices. Any help would be appreciated! I can't post the link to the site (forum rules) but here are the bits of code that I think are relevent: Code: <div class="logo"><img src="../images/logo.png" alt="ConnectSuite" width="264" height="84" /></div> <div class="navigation"><a href="../default.asp">home</a> <a href="../officeware.asp">officeware</a> <a href="../contactware.asp">contactware</a> <a href="../projectware.asp">projectware</a> <a href="../exware.asp">EXware</a> <a href="triware.asp">about triware</a> <a href="contact.asp">contact us</a></div> <div class="headerText2"> <!-- TemplateBeginEditable name="PageTitle" --><h1>officeware</h1> <p>Shouldn’t everything you need to connect your business be available in one box?</p> <h2 align="right">We think so.</h2><!-- TemplateEndEditable --> </div> <div class="topBand"></div> <div class="whiteBand"></div> <div class="greyBand"></div> <div class="whiteBand"></div> <div class="greenBand2"></div> Code: .topBand {
background-image: url(../images/topgradient.png);
background-repeat: repeat-x;
float: left;
height: 25px;
width: 100%;
position: relative;
z-index: 0;
}
.whiteBand {
background-color: #FFFFFF;
float: left;
height: 6px;
width: 100%;
position: relative;
z-index: 0;
}
.greyBand {
background-image: url(../images/greygradient.png);
background-repeat: repeat-x;
float: left;
height: 35px;
width: 100%;
position: relative;
color: #FFFFFF;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
z-index: 0;
}
.greenBand {
background-image: url(../images/greengradient.png);
background-repeat: repeat-x;
float: left;
height: 224px;
width: 100%;
position: relative;
z-index: 0;
}
.greenBand2 {
background-image: url(../images/greengradient2.png);
background-repeat: repeat-x;
float: left;
height: 142px;
width: 100%;
position: relative;
z-index: 0;
}
.contentBand {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #333333;
float: left;
width: 100%;
position: relative;
z-index: 0;
}
.content {
width: 975px;
position: relative;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #666666;
margin-left: -487px;
left: 50%;
z-index: 1;
}
.navigation {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
position: absolute;
left: 50%;
top: 38px;
z-index: 2;
margin-left: -200px;
}
.silhouettes {
margin-right: -487px;
position: absolute;
z-index: 2;
top: 100px;
right: 50%;
}
.headerText {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #FFFFFF;
width: 500px;
margin-left: -480px;
position: absolute;
left: 50%;
top: 100px;
z-index: 2;
}
.logo {
position: absolute;
z-index: 2;
height: 84px;
left: 50%;
width: 264px;
margin-left: -480px;
top: 25px;
}
I have a page and it's a massive mess of nested tables and abs-positioned divs. Amongst these are two that become visible/invisible on the onclick of a checkbox. They start out with display:none inline. Still with me? There arent any floating elements in use, and pretty much everything has a width and height specified, so if there's some hasLayout freakyness going on i'd love to know what. Anyway, in IE7 when you click said checkboxes their target divs and thier contents appear correctly - but the divs' borders are missing, re-toggling the checkbox off and on again shows the border and then again for any subsequent re-showing. it's just the initial setting of display:'' I can't post the code but it looks something ten times freakier than the attatched recreation attempt, unfortunately i can't rectreate it, but you'll get the idea. Can anyone help? I'm going to try running some javascript after the page has loaded to do a quick double toggle to simulate the first no-border instance! http://www.mbsnyder.com/index2.shtml On the "profile" and "contact" areas, there are two separate uls that are acting strange in Safari. The "profile: the rest of the story" section appears almost semi-transparent, and the "contact: email" link doesn't appear unless you mouseover it. These issues only seem to occur in Safari. Not sure what's wrong here. Any help is, as always, much appreciated! Thanks in advance. hi, im having a strange problem and i cannot see why it is doing it, i am building a 2 column layout and have floated and img to the right so and vertical align to the top so the text wraps around it, this is working fine in firefox but in ie the image is not there, the space is there, the alt attribute shows up when you hover over it and you can copy it. the page is at http://www.kevinarrowsmith.co.uk/wol/neighbourhood.php can anyone see why ie is behaving this way. Thanks. I've got navigation images disappearing in IE. I've looked at bugs and workarounds, but I can't work out what's going on. I'm very much a newbie at this, so I'm prepared to be roundly mocked for being a numpty Having tried with deleting and replacing some code, I think that the trouble might be with this bit of CSS Quote: div#leftcontent img {height: 7%; width: 200px; border-width: 0; background-color: #ecfffd; color: #000000;} div#leftcontent a:visited img {background-color: #EDEDED;color: #000000;} div#leftcontent a:hover img {background-color: #FF9; color: #000000;} I'm assuming, because if I put in some plain text with this CSS Quote: div#leftcontent a:hover {background-color: #FF9; color:#3300FF;} I get the effect I want with the images (and that I get fine in Firefox) Images will not appear in my leftcontent div at all; they're sized appropriately, and show up fine in the rightcontent div. All CSS and HTML validated, works great in Firefox etc. Thanks for any pointers! Yes, this is actually a CSS question, despite me providing HTML code... I'm at my wit's end with IE. In the code below, "outer" is losing all formatting--background color, border, you name it, it's gone. html4strict Code: Original - html4strict Code <div id="outer" style="width: 410px;"> <div id="left" style="float: left; width: 200px;"><p>stuff</p></div> <div id="right" style="float: right; width: 200px;"><p>stuff</p></div> <div style="clear:both; font-size: 0; height: 0; width: 0;">&nbps;</div> </div> <div id="outer" style="width: 410px;"> My stylesheet is set up just fine (works fine in Firefox), so I assume this is one of those weird float bugs in IE. The thing is, it was rendering fine until I added another <div> in an entirely different location. Yes, it's all formatted correctly and validates XHTML 1.0 strict. Am I missing something, or is a known bug that I can't find documented, or does anyone have a suggestion for an alternate approach? Thanks all! Here's an odd behavior, and the last on my hit-list for this design. IE5/Mac (not extremely high on my compatibility needs list) is doing something strange: the nav links (which are bitmaps that utilize Petr Stanicek's Fast Rollovers Without Preload technique) are disappearing - god knows where - but only on the bottom row. The top row works great... The strange thing is, I figured it was the :hover, so I used the Sam Foster commenting hack to hide the :hovers. This worked, the hover effect was not read. But the bottom row vanishes anyway. If you have an IE5/Mac build handy, check it out: Website Template: http://www.spearsphotography.com/test_index.html CSS File: http://www.spearsphotography.com/css/style.css Again, I'm not concerned about fixing it, but it's a really strange behavior I haven't encountered before and my forum searches were unfruitful. I figured I would document the oddity in case someone else has the another piece of the puzzle. -- Aiden Hello, This is my first post here, so hi everyone. I'm relatively new at css or any of it. I been working on a navbar with a javascript fader. Anyway... I finally got my buttons to work! It's time for the Smirnoff! But my button are still giving me ...! Anyway I was wondering if someone...anyone could please help me before I slam this laptop against the wall! Just joking... Everything checks out with W3C except my buttons. Here's the html: Code: <div> <span id="navcontainer1" class="button1"> <ul> <li> <a href="guardian_angel_figurines.html"><img src="images/homebuttonlight.jpg" alt="Takes You to Home Page" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer2" class="button2"> <ul> <li> <a href="#"><img src="images/aboutusbuttonlight.jpg" alt="Our Policies, Mission, and Company Information" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer3" class="button3"> <ul> <li> <a href="#"><img src="images/aboutfigurinesbuttonlight.jpg" alt="For More Information About Figurines" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer4" class="button4"> <ul> <li> <a href="about_angels.html"><img src="images/aboutangelsbuttonlight.jpg" alt="For Angelic Understandings, Mysteries and More" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a> </li> </ul> </span> <span id="navcontainer5" class="button5"> <ul> <li> <a href="policy.html"><img src="images/contactusbuttonlight.jpg" alt="To Contact Us with Your Questions, Sugestions, Ect" style="filter:alpha(opacity=0)" onmouseover="pWidgets(this,100,50,5)" onmouseout="pWidgets(this,0,50,5)" /></a></li> </ul> </span></div> Don't laugh...they work! Here's the stylesheet: Code: .button1 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer1 ul li {
display: block;
float: left;
background: url("images/homebuttondark.jpg");
}
#navcontainer1 a {
display: block;
width: 140px;
height: 30px;
}
.button2 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer2 ul li {
display: block;
float: left;
background: url("images/aboutusbuttondark.jpg");
}
#navcontainer2 a {
display: block;
width: 140px;
height: 30px;
}
.button3 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer3 ul li {
display: block;
float: left;
background: url("images/aboutfigurinesbuttondark.jpg");
}
#navcontainer3 a {
display: block;
width: 140px;
height: 30px;
}
.button4 {
position: relative;
bottom: 100px;
right: 40px;
}
#navcontainer4 ul li {
display: block;
float: left;
background: url("images/aboutangelsbuttondark.jpg");
}
#navcontainer4 a {
display: block;
width: 140px;
height: 30px;
}
.button5 {
position: relative;
bottom: 130px; <-----this is weired! all the other buttons lined up with the same coordinates but this strange one.
left: 520px;
}
#navcontainer5 ul li {
display: block;
float: left;
background: url("images/contactusbuttondark.jpg");
}
#navcontainer5 a {
display: block;
width: 140px;
height: 30px;
}
W3C Validation says there is something wrong with the <ul> tag on each button html. I've tried a million different combinations but this is the only way I can get them to work. Only thing is they create empty space around them and unless I put something "above" them they disappear all together (where the go I have know idea!) I was just thinking if they could somehow "validate" then maybe they would be more predictable. Any suggestions? Thanks I'm having a problem with the way one of my divs is being displayed in IE. An example of the page can be found he http://www.rit.edu/~jmw9523/help/ My problem is with the "Marketing literature" menu. There are supposed to be six menu item divs that consist of an arrow div and a description div. The description is only being displayed on the last menu item div in IE, and i can't figure out why. It looks fine in mozilla. the code for the div is as follows: Code: <div id="menuSecondary"> <div id="secondaryHead" class="menuSecondaryHead">Marketing literature</div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(1, 'red');" onmouseout="rolloutArrow(1, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow1"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creating marketing collateral that is less expensive and more effective: Nine steps</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(2, 'red');" onmouseout="rolloutArrow(2, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow2"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Creative Design and Editorial</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(3, 'red');" onmouseout="rolloutArrow(3, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow3"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemSelected">Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(4, 'red');" onmouseout="rolloutArrow(4, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow4"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Custom Publications</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(5, 'red');" onmouseout="rolloutArrow(5, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow5"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Worldwide Language Services</div> </a> </div> <div class="menuSecondarySpacer"> </div> <div class="menuSecondaryItem" onmouseover="rolloverArrow(6, 'red');" onmouseout="rolloutArrow(6, 'red');"> <a href="ninesteps"> <div class="menuSecondaryArrow" id="menuSecondaryArrow6"><img src="images/red/rightarrow.png"></div> <div class="menuSecondaryItemDesc">Beyond Paper: Electronic Collateral</div> </a> </div> </div> the css for the div elements are as follows: Code: .menuSecondaryArrow
{
float: left;
clear: left;
width: 5px;
height: 10px;
}
.menuSecondaryArrow IMG
{
border: 0px;
}
.menuSecondaryItemDesc
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryItemSelected
{
float: left;
clear: none;
position: relative;
left: 5px;
width: 150px;
top: -1px;
}
.menuSecondaryHead
{
position: relative;
left: 10px;
font-weight: bold;
font-size: 11px;
line-height: 12px;
color: white;
}
.menuSecondaryHead A:hover
{
color: black;
text-decoration: none;
}
.menuSecondaryHead A
{
color: white;
text-decoration: none;
}
.menuSecondarySpacer
{
height: 7px;
line-height: 7px;
float: none;
clear: both;
}
.menuSecondaryItem
{
width: 170px;
position: relative;
display: inline;
}
.menuSecondaryItem a:hover
{
color: white;
text-decoration: none;
}
.menuSecondaryItem a
{
color: black;
text-decoration: none;
}
.menuSecondaryItemSpacer
{
float: left;
clear: none;
width: 5px;
}
I'm hoping there is something obvious i am missing. Thanks for your help. I am currently designing a website using CSS and I have a peculiar problem where some images are appearing and then disappearing in IE6. They are showing up fine in IE7 and Firefox. The image in question is not a background image. On another page I am using background images for bullet points and the first two on the page are appearing. The third appears and then disappears. This is only when viewing in IE6 and it is only happening with these two particular pages. The thing they have in common is both are running the body ID "page8" and each image that vanishes represents the last image in the content area. Can anyone shed any light on this for me? I figure it has to be a stylesheet problem with a peculiarity in IE6 for which I would need to write around it. Question is what am I suppose to write around? Code: http://lakesideint.server266.com/about/getting_here.php is the page where the image disappears. Code: http://lakesideint.server266.com/business/index.php is the page where the one bullet point appears and disappears. Cheers Terry Hello, I've been working on a site http://www.chequedelarealidad.org, and have recently experienced a problem with the 'links' page. Initially, the page appears as normal, but if I tab between windows to another program and then return to this page, the contects on the right hand side become invisible. I have validated the code using the W3C validator. Am not sure what the problem could be. Has anyone experienced anything similar to this? Or have a solution for me. Thanks, Victoria When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!! Toni Lynne HTML <td width="247" class="splitright"> <div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Welcome to Joy!</h2> <p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p> <br /> </div></div> </div> </td> CSS /* background box */ .box { background: url(images/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 4%; } .box-inner { background: url(images/top-left.gif) no-repeat left top; } .box h2 { background: url(images/top-right.gif) no-repeat right top; padding-top: 4%; } .box h2, .box p { padding-left: 4%; padding-right: 4%; } .splitright { background: #ffffff; width:38%; float: right; overflow: hidden; text-align:justify; } a:link { color: #fea11d; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } i was having trouble getting rid of the padding between cells in IE, i used the advice i got from this forum and added the style border-colapse and now everything is lined up perfect in IE, but in netscape (version 7.1) the top and left borders just vanished, can anyone help? contact.html Code: <table>
<tbody>
<tr>
<td>
telephone
</td>
<td>
757.555.2888
</td?
</tr>
<tr>
<td>
e-mail
</td>
<td>
jonathonball@cox.net
</td>
</tr>
</tbody>
</table>
body.css Code: table { border-collapse: collapse; }
td { border: 1px black solid; }
you can see what it's doing at my temporary web page http://members.cox.net/jonathonball/ in the Contact section Help please. When I add the extra <div> the background disappears. Background image appears behind "Testing" <body> <div id="siteinfo"> <div id="fullinfo"> <h1>Testing</h1> </div> </div> </body> Background image disappears <body> <div id="siteinfo"> <div id="fullinfo"> <div id="myinfo"> <h1>Testing</h1> </div> </div> </div> </body> Stylesheet entries: body { background-color: #DADADA; background-image: url(/background2.gif); background-position: center; background-repeat: repeat-y; } #siteinfo { position: relative; margin-right: auto; margin-left: auto; width: 800px; } #fullinfo { position: relative; top: 10px; padding-left: 0px; padding-right: 25px; } #myinfo { position: inherit; float: right; width: 600px; } All help appreciated. I have this navigation menu I made for my online catalog that is comprised of some 300+ links that display in 3 levels of CSS-controlled menues. A root UL and 2 levels of subULs. It's located here . The menues all work fine except for a small area where the first submenu overlaps the root menu. Illustration . The problem is in mousing from one link in the list in the first submenu to the next link in the same list. (below or above) As the mouse pointer moves between the links, the menu changes to the sublist for the next link in the root menu instead of the next link in the already open submenu. The second level submenu (sub-submenu) doesn't have any problem. Links in the opened submenu can be moved between successfully if the pointer is moved out to an area that isn't shared with the root menu. Making any sense? This is HTML for the basic structu HTML Code: Original - HTML Code <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> <table><tr> <td class="linktd"> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Category</a> <ul class="folderul"> <li class="folderli"> <a class="submenua" href="http://www.mydomain.com">Subcategory</a> <ul class="folderul"> <li class="nonfolderli"><a class="submenua" href="http://www.mydomain.com">Subsubcategory</a> </li> </ul> </li> </ul> </li> </ul> </td> </tr></table> These are the two CSS lines that are supposed to control the displays. css Code: Original - css Code ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none } li.folderli:hover ul.folderul, li.folderli:hover li.folderli:hover ul.folderul { display: block }
ul.folderul ul.folderul, li.folderli:hover ul.folderul ul.folderul { display: none }
Maybe my understanding is deficent, but I haven't been able to find the problem and I'm hoping someone of you can point it out for me, please? Hi Forum, A small non-profit group I am working with has put together a website. Unfortunately, the horizontal navigation menu disappears on IE browsers. The links are still in place, but are invisible. The shaded boxes around them do not load. Unfortunately we have no idea how to fix it. I am a beginner with CSS-- any helpful hints or advice? Thanks. -Sellicott <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="" xml:lang="en" lang="en"> <head> <title>BUTT OUT! Ending Tobacco Industry Exploitation of the Lesbian, Gay, Bisexual and Transgender Community</title> </head> <body> <div id="wrapper"> <div id="header"> <div id="sitename"><img src=></div> </div> <div id="navigation"> %%MENU%% </div> <div id="content-wrapper"> <div id="content">%%CONTENT%%</div> </div> <div id="footer"> <div id="footer-content">%%WEEBLYFOOTER%%</div> </div> </div> </body> </html> *|*{ margin:0pt; padding:0pt; } body{ background:transparent url(pattern3.gif)repeat-x center top; background-color:#FFFFFF; font-family:"lucida grande", arial, sans-serif; font-size:12px; color:#464e54; margin:0; padding:0; } p { line-height:18px; } h1, h2, h3{ line-height:40px; } #wrapper { width:760px; margin:0pt auto; } #header { float:left; width:760px; height:170px; } #sitename { color:#fff; padding-top:0px; font-size:2em; text-transform:uppercase; } #navigation { float:left; height:30px; width:760px; position:relative; } #navigation ul { float:left; padding:5px 10px 0 0; margin-left:0; } #navigation li { float:left; display:inline; font-family:"lucida grande", arial, sans-serif; text-align:center; font-size:1em; font-weight:bold; padding:6px 15px 8px 4px; margin-right:3px; } *html #navigation li { margin-right:4px; padding-right:15px; padding-bottom:9px; } #active { background: transparent url(tab_left2.gif) no-repeat left top; padding:6px 13px 6px 4px; color:#fff; font-weight:bold; } *html #active { padding-right:15px; } #navigation a:link { color:#fff; text-decoration:none; } #navigation a:visited { color:#fff; text-decoration:none; } #navigation a:hover { color:; text-decoration:none; } #active a { background: transparent url(tab_right2.gif) no-repeat right top; color:#464e54; padding:6px 14px 9px 10px; } #active a:link { color:#fff; text-decoration:none; } #active a:hover { color:#fff; text-decoration:none; } #active a:visited { color:#fff; text-decoration:none; } a:link,a:hover,a:visited { color:464e54; font-weight:normal; text-decoration:underline; } a:link { color: #464e54; } a:visited { color: #464e54; } a:active { color: #464e54; } .weebly_header { float:left; background: width:760px; height:1200px; margin-top:35px; } *html .weebly_header { margin-top:28px; padding-top:14px; } #content-wrapper { float:left; background: transparent url(content_background.jpg) no-repeat center top; width:760px; height:700px; } *html #content-wrapper { margin-top:-9px; } #content { padding-top:20px; padding-bottom:20px; } *html #content{ padding-top:35px; } img.image-left { margin-right:15px; float:left; } img.image-right { margin-left:15px; float:right; } #footer { visibility:hidden; padding-top:280px; padding-bottom:10px; float:center; } |
|||||||