|
CSS - Css Dropdown In A Table For Ie6
Been trying for a while now to get a crossbrowser horizontal menu working. I am very inexperienced so I guess that is what is causing all the problems. Thanks to some links provided through this forum I have been able to learn some and came across this to suit my needs.
It works well, except in IE6 when in a table (not sure of any other way to have it) the dropdowns dont work. FF, IE7 work fine. I have read that there are some problems when putting a css dropdown in a table. But I cant find a fix. Thanks for looking. Code:
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: auto; /*For KHTML*/
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}
ul#navmenu ul li {
width: 160px;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #585858;
color: #ffffff;
font: 11px/22px Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #F8981D;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #cccccc;
color: #585858;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #F8981D;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
Similar TutorialsI have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) I made a drop down menu with css and I can't get it to work with IE6. Can anyone help? You can view an example of what I have at the following url mentalgameofmoney.co.uk/example.html Here is the CSS Code:
#menu {
position:absolute;
background-color:#FF0000;
overflow:hidden;
height:30px;
width:91px;
top:0px;
left:0px;
}
#menu:hover{
overflow:visible;
}
#menu a:link{
text-decoration:none;
}
#spacer{
height:30px;
}
#link_box{
background-color:#cbbba2;
border-left:#c1ad90 solid 1px;
border-right:#c1ad90 solid 1px;
border-bottom:#c1ad90 solid 1px;
padding-left:5px;
color:#51351a;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:12px;
text-decoration:none;
text-align:left;
}
#link_box:hover{
background-color:#51351a;
color:#FFFFFF;
}
Here is the HTML Code: <div id="menu"> <a href="#"> <div id="spacer"></div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> <a href="#"><div id="link_box">Link</div></a> </div> hello, i was reading the well-known suckerfish dropdown tutorial and was trying to do something like it. i thought i had understood the logic behind it, but i can't get it to work. the nested unordered lists appear like so: ITEM1 subitem1 subitem2 subitem3 ITEM2 subitem1 subitem2 subitem3 i wanted them to appear like so: subitem1____subitem1 subitem2____subitem2 subitem3____subitem3 ITEM1_______ITEM 2 the positioning isn't too relevant, all i really wanted was to pull the nested ul out of the flow... i made sure that the li ul part was positioned absolutely, but i can't do anything with it (no styling, no anything). my css/code must be the problem, but i can't see what i'm doing wrong. here's the relevant code: CSS: Code:
#menu ul {
position: relative;
margin: 8em 0 0 0;
float: left;
background-color: #D60078;
list-style-type: none;
}
#menu li {
display: inline;
padding: 0 2.5em 0 0;
position: relative;
}
#menu li a:link, a:visited {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}
#menu li a:hover, a:active {
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
}
#menu li ul { position: absolute;
left: 0; top: 0;
background-color: #FFF;
display: block;
}
HTML: Code: <ul id="menu"> <li><a href="">ITEM1</a> <!-- SUBMENU --> <ul> <li><a href="">subitem1</a></li> <li><a href="">subitem2</a></li> <li><a href="">subitem3</a></li> </ul> </li> <li><a href="">ITEM2</a> <!-- SUBMENU --> <ul> <li><a href="">subitem1</a></li> <li><a href="">subitem2</a></li> <li><a href="">subitem3</a></li> </ul> </li> </ul> i hope that made sense (after working on this for hours and trying everything that came to mind, i'm getting a little incoherent). thanks for any help! Hi, I'm trying to solve a little CSS issue with, guess what!, IE6. 92 (dot) 48 (dot) 108 (dot) 113 (forward slash) ~anyjob In FF all is good, but when viewed in IE the nav bar has been forced down to misalign with my background red strip. Also the dropdowns don't work. Could anyone point me in the right direction. I don't think this is a float issue and I've read up as much as possible but this is really confusing me. Any help would be very much appreciated. Thanks, Brian I've developed a dropdown navigation menu from a tutorial. The basic menu works perfect in IE and FF. But I would like to change a few things that for the life of me I can't get to work. First would be that under each item in the dropdown menu I would like there to be a bottom border. So in my css file I added border-bottom to the li li {} section. Now I am faced with two problems. First in firefox the border expends maybe 5px. Apon further investigation I found that for some reason FF has the <li> tags only about 5px wide all over the place! In IE it extends atleast below the text but won't will the entire <li> like it should! FF also doesn't give the border to all the links like it should. The next problem is in the width of the elements. Instead of the dropdown part being a set width, I would like the the part that drops down to stretch so that each link is on one line. But the entire part that drops down would be still remain rectangular like it does now. Code: Ex: [Link1][Link2][Link3] *with the mouse over the link 1 |Url1 | |Url2 | |Much Longer| instead of [Link1][Link2][Link3] *with the mouse over the link 1 |Url1 | |Url2 | |Much| |Longer| I think this has something to do with the width of the li, so I set the width to auto. No change. To recap my lengthy post. Getting a bottom border on the li tags in the dropdown Getting FF to behave with the bottom border and widths Each link should be on only one line I think that getting the <li> width to behave will solve most of my problems. I've attached the original css and html pages. Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I'm working on my first suckerfish dropdown for a site. I'm encountering two problems. 1) There is no background color on the subitems when i select the main item, making them hard to read 2) Internet Explorer displays the dropdown to the right of the main list item, rather than below. Netscape displays it correctly. Is this due to something I altered? Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Markey Home Remodeling</title>
<link href="main.css" rel="stylesheet" type="text/css">
<style title="text/css">
#container {
width: 562px;
background: #F4ECD9;
text-align: left;
margin: 0 auto;
}
#nav, #nav ul {
float: left;
width: 562px;
list-style: none;
line-height: 1;
background: EAE3A3;
font-weight: bold;
padding: 0;
margin: 0 0 1em 0;
}
#nav a {
display: inline;
width: 10em;
w\idth: 6em;
color: #7C6240;
text-decoration: none;
padding: 0.25em 2em;
}
#nav a.daddy {
background: url(rightarrow2.gif) center right no-repeat;
}
#nav li {
float: right;
padding: 0;
width: 10em;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13em
}
#nav li ul a {
width: 13em;
w\idth: 9em;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
background: white;
}
</style>
<script type="text/javascript">
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function()
{
this.className+=" sfhover";
}
sfEls[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<table width="800" border="0" cellspacing="0" cellpadding="0" class="tableborder" align="center">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td height="20" width="562" class="leftnav">
<div id="container">
<ul id="nav">
<li><a href="#">SIDING</a></li>
<li><a href="#">GUTTERS</a></li>
<li><a href="#">BASEMENTS</a></li>
<li><a href="#">WINDOWS</a>
<ul>
<li><a href="#">300 Series</a></li>
<li><a href="#">900 Series</a></li>
<li><a href="#">Sliding</a></li>
<li><a href="#">Bay and Bow</a></li>
</ul>
</li>
<li><a href="#">DOORS</a>
<ul>
<li><a href="#">Entry</a></li>
<li><a href="#">Patio</a></li>
<li><a href="#">Garage</a></li>
</ul>
</li>
</ul>
</div></td>
<td class="rightnav">
<div id=linkstyles> <a href="#">HOME</a> <a href="#">CONTACT US</a>
</div></td></tr>
<tr>
<td>
<table width="562" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/mainimage.jpg"></td>
</tr>
<tr>
<td><div align="center"><img src="images/whychoose.jpg"></div></td>
</tr>
<tr><td>
<table width="98%" border="0" cellspacing="0" cellpadding="0" align="center" class="maincontenttable">
<tr>
<td width="50%">REPUTATION: A proven track record with thousands of
delighted customers.
<br><br>
QUALITY: The highest quality products, the best trained
window installers
*all A.W.D.I. (American Window and Door Installed) Certified.
<br><br>
PRICE: The lowest prices on the highest quality
brand-name products. Period.
<br><br>
Factory Authorized Distribution, Factory Trained
Employees.
<br><br>
Qualified, Courteous Salespeople treat you with
professionalism and respect.
</td>
<td width="355"> </td>
</tr>
</table>
</td></tr>
</table>
</td>
<td valign="top" width="100%" class="mainrighttable">
<table width="230" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><img src="images/pledge.jpg" hspace="5" vspace="5"></td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="rightcontenttable">
<tr>
<td>Our business has always been family owned
and operated. For more than 27 years, we
have served our community with pride and
integrity. Years ago, the best craftsmen always
put their names on their work.
<br><br>
We still do.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<span class="style1"></span></td>
</tr>
</table>
</body>
</html>
Thanks for your help I'm editing a CSS drop down navigation that uses <ul> and <li>. Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of. Thanks for your help! Code: <div id="wrap"> <ul id="navbar"> <!-- The strange spacing herein prevents an IE6 whitespace bug. --> <li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a> </li> <li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a> <ul> <li><a href="summit_09registration.cfm">Register</a></li><li> <a href="summit_09scholarship.cfm">Scholarships</a></li></ul> <li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a> <ul> <li><a href="summit_09awards.cfm">Leadership Awards</a></li><li> <a href="summit_09party.cfm">Anniversary Party</a></li><li> <a href="summit_09work.cfm">Work Project</a></li><li> <a href="summit_09dine.cfm">Dine Arounds</a></li><li> <a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li> <a href="summit_09networking.cfm">Networking</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a> <ul> <li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li> <li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul> </li> <li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a> <ul> <li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li> <a href="summit_09travel.cfm">Travel</a></li><li> <a href="summit_09neworleans.cfm">New Orleans</a></li></ul> </li> </ul></div> Code:
<style type="text/css">
#navbar {
margin: 0;
padding: 0;
height: 0;}
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding-bottom:0px;
padding-left: 0px;
padding-right:0px;
padding-top:0px;
border: 0px;
color: #fff;
font-family: helvetica;
font-size: 8pt;
font-style: bold;
font-color: #ffffff;
text-decoration: none;}
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-image: url(../images/summit_nav_back.gif);}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-image: url(../images/summit_nav_back.gif);
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-image: url(../images/summit_nav_red.gif); }
</style>
<script language="JavaScript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Hi. I'm trying to create a dropdown menu using some code from son-of-Suckerfish. It's simple enough in concept - just a few lines of Javascript <!-- SON OF SUCKERFISH DROP DOWN MENU --> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> </head> <body> <!-- Open Wrapper --> <div id="wrapper"> <!-- Open Header --> <div id="header"> </div> <!-- Close Header --> <!-- Open Menubar --> <div id="menubar"> <ul id="nav"> <li id="home"><a href="../home">Home</a></li> <li id="aboutus"><a href="../aboutus">About Us</a> <ul> <li id="aboutus2"><a href="#meetthestaff">Meet the Staff</a></li> <li id="aboutus2"><a href="#healthyeating">Healthy Eating</a></li> <li id="aboutus2"><a href="#ourcharity">Our Charity</a></li> </ul> </li> <li id="daynursery"><a href="../daynursery">Day Nursery</a> <ul> <li id="daynursery2"><a href="#dormice">Dormice & Hedgehogs</a></li> <li id="daynursery2"><a href="#sensory">Sensory Room</a></li> <li id="daynursery2"><a href="#activity">Activity Room</a></li> <li id="daynursery2"><a href="#outdoor">Outdoor Area</a></li> </ul> </li> <li id="preschool"><a href="../preschool">Pre-School</a> <ul> <li id="preschool2"><a href="#rabbits">Rabbits & Squirrels</a></li> <li id="preschool2"><a href="#montessori">Montessori Room</a></li> </ul> </li> <li id="parents"><a href="../parents">Parents</a> <ul> <li id="parents2"><a href="#news">News and Events</a></li> <li id="parents2"><a href="#parentspartnership">Parents in Partnership committee</a></li> <li id="parents2"><a href="#testimonials">Testimonials / references</a></li> <li id="parents2"><a href="#ofsted">Ofsted</a></li> <li id="parents2"><a href="#swapshop">Swap Shop</a></li> </ul> </li> <li id="contact"><a href="../contact">Contact</a> <ul> <li id="contact2"><a href="#findus">How to Find Us</a></li> <li id="contact2"><a href="">Our Prospectus</a></li> </ul> </li> </ul> </div> CSS code is: @charset "utf-8"; /* Design by Creative Media Heroes littleowlsnursery/devsite */ * { padding: 0; margin: 0; } body { font-family: Verdana, Arial, sans-serif; font-size: 11px; margin: 0; padding: 0; color: black; } .nurserycol { color:#000;} .preschoolcol { color:#000;} .parentscol { color:#000;} #wrapper, #header, #menubar {width: 775px; margin: 0; padding: 0;} /*#wrapper, #header, #infobar, #menubar, #menubar2, #optionbox, #sidebar, { display:inline;}*/ #header, #infobar, #menubar, #content{ float: left; } #wrapper { border: 1px solid #FF3300; border-top: none; border-bottom: none; background-color: white; margin: 0 auto; } #header { height: 274px; background:url(../images/lon-head-temp.jpg) no-repeat; } #content { clear: both; width: 650px; margin: 0 0 0 0; padding: 15px 0 15px 0; min-height: 400px; /*border-right: 1px solid #CCC;*/ } #sidebar { float: right; margin: 0px 0px 5px 0px; padding: 0px; height: 335px; width: 120px; background: #E7DBD5; } #rightcolumn { float: right; color: #333; margin: 15px 0 0 0; padding: 0; width: 120px; display: inline; /*height: 480px; background: #E7DBD5;*/ } img.left { float: left; } img.right { float: right; } /* Dropdown menu*/ #nav { float: left; width: 775px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; list-style: none; line-height: 17px; clear: both;} #nav li { height: 50px; } #nav li a { float: left; ; height: 0; padding-top: 50px; overflow: hidden; } /*#menubar ul, #menubar ul a { background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; }*/ #nav ul { float: left; padding: 0; margin: 0; list-style: none; line-height: 17px; color: white; } #nav a { display: block; width: 105px; list-style-type: none; } #nav li { float: left; width: 105px; color: white; line-height: 17px; } #nav li ul { position: absolute; color: white; width: 105px; left: -999em; line-height: 17px; } #nav li:hover ul, #nav li:hover ul a, #nav li.sfhover ul { /*float: left;*/ left: auto; color: white; line-height: 17px; margin-top: 50px; } /* BUTTONS */ #nav li#home{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: 0 0px; } #nav li#aboutus{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px 0px; } #nav li#daynursery{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px 0px; } #nav li#preschool{ width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px 0px; } #nav li#parents{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px 0px; } #nav li#contact{ width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px 0px;} /* ON STATES */ #nav li#home a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-position: 0 -50px; } #nav li#aboutus a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -105px -50px; } #nav li#daynursery a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -210px -50px; } #nav li#preschool a:hover { width: 125px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -335px -50px; } #nav li#parents a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -460px -50px; } #nav li#contact a:hover { width: 105px; background-image: url(../images/lonmenu.gif); background-repeat: no-repeat; background-position: -565px -50px;} #nav li#home2 { width: 105px; height: 17px; display: block; background:#0099FF;} #nav li#aboutus2 { width: 105px; height: 17px; display: block; background:#6FAADF;} #nav li#daynursery2 { width: 125px; height: 17px; display: block; background:#AC2282;} #nav li#preschool2 { width: 125px; height: 17px; display: block; background:#E74C15;} #nav li#parents2 { width: 105px; height: 17px; display: block; background:#0F549D;} #nav li#contact2 { width: 105px; height: 17px; display: block; background:#D4B2A1;} #nav li#daynursery2 :hover { width: 125px; height: 17px; display: block; background:#D4B2A1;} [if lte IE 6]> <style type=text/css"> div.nav a:hover {visibility:visible;} </style> [endif] /* Footer bar*/ .footer { float: left; clear: both; width: 775px; margin: 5px auto; padding: 0; display: inline; color: #999999;} .footer a { border: none; color: #88746a; text-decoration: none; font-size: 9px; } .footer ul { margin: 0; padding: 3px 0 3px 0; list-style: none; } .footer li { display: inline; } .footer ul a { float: left; padding: 1px 10px; border-left: solid 1px #95a2c0; color: #88746a; text-decoration: none; font-size: 9px; } .footer a:hover { color:#400000; text-decoration: none; } The CSS code is a bit jumbled because I've been trying all I can to fix the problems I'm getting. Basically I have a single-graphic hover menu which works fine, but then the drop-down menus (in their separate colours) are just not coming in underneath in IE7 - ok in Firefox on pc and mac, plus fine is Safari on mac - but they should be normal wording links as 11px text with 17px line-height. I am getting the single-graphic coming in instead. I know this must have something to do with the nested ul in the li, but just can't stop this happening. So, it's really a 2 stage HELP. PLEASE!!!! Oh, I know I can't put a url link in. It's basically in a devsite folder of the main site I'm talking about here! Hi I am trying to create a drop down menu on my existing design. Code: http://dfinnema.com/help How would I add a drop down to Page 3 menu that looks like this: Code: http://dfinnema.com/help/images/dropdown_active.png Without the menu: Code: http://dfinnema.com/help/images/dropdown.png Any Ideas / Suggestions? :| i'm having a problem with a couple attributes for my CSS dropdowns. view the page here (both CSS and XHTML are on the same page) specifically my .hoverBase:hover .hoverLaunch {} class which reads as such: Code: .hoverBase:hover .hoverLaunch {
display:block;
position:absolute;
top:15px;
left:-3px;
width:70px;
border:3px solid #000000;
text-align: center;
z-index: 30;
}
the problem is that IE6 will not display the .hoverLaunch class like FireBird does, in fact, it does not display at all. Another awesome feature of IE6 is that the :hover i have applied on the .hoverbase does not work either. Any help is appreciated. Thanks in advance. I am in need of a code that will show a div (anysize) directly below a link and remain there when the mouse moves of the div but hides when the mouse moves out can someone please guide me to a code Tim Hi yall, i'm a quite newbie on css and i'm having an issue with my drop menu on the site i'm trying to do , with wordpress, multi level menu...i started from the code generated by the css generator and tried to fit it to my meeds. but, i can't control the li li menu (categories), i want it to appear exactly at the end of the li categories. 2) the second issue is that i'm trying to add a margin to the main ul because it's to near from the top. can someone help me plz? here my code Code: #suckerfishnav,
#suckerfishnav ul {
float: left;
height: 2.98em;
width: 960px;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
margin: 0.1em 0.1em 0.1em 0.1em;
padding: 0;
}
#suckerfishnav a {
display: block;
color: #7c6240;
text-decoration: none;
padding-top: 0.25em;
padding-right: 0.7em;
padding-bottom: 0.1em;
padding-left: 0.2em;
}
#suckerfishnav li {
float: left;
padding: 0;
width: 13em;
height: 2.8em;
}
#suckerfishnav ul {
position: absolute;
left: -999em;
height: auto;
margin-left: 2em;
line-height: 1;
z-index: 500;
}
#suckerfishnav li li {
width: 9.6em;
border: solid #eda;
border-width: 1px;
padding-top;
10px;
}
#suckerfishnav li ul a {
width: 9.8em;
}
#suckerfishnav li ul ul {
margin: -0.20em 0 0 9.8em;
}
#suckerfishnav li ul {
position: absolute;
left: -999em;
height: auto;
width: 9.9em;
w\idth: 9.8em;
font-weight: normal;
border-width: 0.20em;
margin: 0;
z-index: 500;
}
#suckerfishnav li ul a {
width: 9.9em;
w\idth: 9.8em;
}
#suckerfishnav li:hover ul ul,
#suckerfishnav li:hover ul ul ul,
#suckerfishnav li.sfhover ul ul,
#suckerfishnav li.sfhover ul ul ul {
left: -999em;
}
#suckerfishnav li:hover ul,
#suckerfishnav li li:hover ul,
#suckerfishnav li li li:hover ul,
#suckerfishnav li.sfhover ul,
#suckerfishnav li li.sfhover ul,
#suckerfishnav li li li.sfhover ul {
left: auto;
}
#suckerfishnav li:hover,
#suckerfishnav li.sfhover {
background: #eda;
width: 9.5em;
w\idth: 9.4em;
}
My second level menu items are not showing in IE, but show fine in firefox. Code: #menucontainer {
width: 100%;
clear: both;
position: relative;
text-align: center;
margin: 0 auto;
padding-left:0px;
padding-top:35px;
padding-bottom:15px; }
#menu {
text-align: center;
display:table;
padding:5;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
background: #eee;
}
#menu ul {
font: small-caps bold 12px/15px "lucida grande", tahoma, arial, verdana, sans-serif;
list-style: none;
margin: 0;
padding: 0;
width: 7em;
float: left;
}
#menu a {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb
margin: 0;
padding: 2px 3px;
}
#menu a {
color: #C7C7C7;
background: #000;
text-transform: small-caps;
}
#menu a:hover {
color: #fff;
background: #000000;
}
/* ********* secondary links ************** */
#menu li li a {
color: #C7C7C7;
background: #292A2C;
text-decoration: none;
}
#menu li li a:hover {
color: #FFF;
background: #292A2C;
}
#menu li:hover { z-index:1;}
#menu li {position: relative}
#menu ul ul {
position: absolute;
z-index:100;
left:0;
top:auto;
display:none;
}
div#menu ul ul,
div#menu ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul
{display: block;}
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(behavior.htc); /* call hover behaviour file */
font-size: 100%; /* enable IE to resize em fonts */
}
}
#menu ul li a {
height: 1%; /* make links honour display: block; properly */
}
</style>
<![endif]-->
Help!! I am trying to design this website: nitrocanine .com/D/DDesign and the dropdown menus won't work in IE, while they work in Chrome, Safari, Firefox... does anyone know how to make them work in IE as well?? You can view the source and see the css coding and the relevant HTML. Sorry if this is in the wrong section but i'm not sure if it should be here or in the javascript section. Here is the CSS code that I am making. I am trying to make a javascript drop down but the css is preventing the code from becoming a vertical dropdown. It justs goes to the left. Here is the beggining css for it and I am having trouble making it like that. Sorry if I can't be more descriptive but i've been trying to work for 5 hours and got nothing. Can any one please help. CSS code Code:
#nav{
float:left;
width:100%;
margin:0px;
padding:0px;
margin-top:-8px;
}
#nav ul{
float: right;
list-style-stype:none;
margin:0px;
padding:0px;
height:27px;
overflow:hidden;
}
#nav ul li{
display: inline;
margin: 0px;
padding: 0px;
height: 27px;
overflow:hidden;
}
#nav ul li a,
#nav ul li a:visited{
background-position: centertop;
background-repeat:no-repeat;
display:block;
float: left;
height: 0px;
margin: 0px 0px 0px 8px;
overflow: hidden;
padding: 30px 0px 0px 10px;
text-decoration:none;
}
#nav ul li a:link#nav_agency,
#nav ul li a:visited#nav_agency {
background-image:url(images/agency2.gif);
border:0px;
width:54px;
}
#nav ul li a:hover#nav_agency,
#nav ul li a:link#nav_agency.active,
#nav ul li a:visited#nav_agency.active {
background-image: url(images/agencyup2.gif);
border: 0px;
width: 54px;
}
#nav ul li a#nav_services,
#nav ul li a:visited#nav_services {
background-image: url(images/services2.gif);
border:0px;
width: 56px;
}
#nav ul li a:hover#nav_services,
#nav ul li a#nav_services.active,
#nav ul li a:visited#nav_services.active {
background-image: url(images/servicesup2.gif);
border: 0px;
width: 56px;
}
Java Code Code:
window.onload = initAll;
function initAll() {
var allLinks = document.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
if (allLinks[i].className.indexOf("menuLink") > -1) {
allLinks[i].onclick = function() {return false;}
allLinks[i].onmouseover = toggleMenu;
}
}
}
function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);
document.getElementById(thisMenuName).style.display = "block";
this.parentNode.className = thisMenuName;
this.parentNode.onmouseout = toggleDivOff;
this.parentNode.onmouseover = toggleDivOn;
}
function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}
function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}
Html code Code:
<div id="nav">
<ul>
<li><a href="agency.html"id="nav_agency" class="" title="Agency">AGENCY</a></li>
<li><a href="services.html"id="nav_services" class="active" title="Services">SERVICES</a></a></li>
<ul>
<li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
<li><a href="#.html">As You Like It</a></li>
<li><a href="#.html">Love's Labour's Lost</a></li>
<li><a href="#.html">The Comedy of Errors</a></li>
</ul>
</nav>
Hi, on my site http://www.mattmdesign.com, sometimes when you mouseover the portfolio the menu appears in the wrong spot. someone also said that it is appearing on the left side of the page everytime with mozilla 1.0 Does anyone know how I can make it appear right under the porfolio link every time? Thanks, Matt Hi, I've put together a drop down menu based on the suckerfish demo which can be seen at http://wetherbyrunners.mdwebspace.co.uk. However it doesn't seem to be working in Internet Explorer. I've tried changing the z-index to a higher value for the drop down, but it hasn't worked. Does anyone have any ideas of how it could be sorted out? Thanks in advance, Matthew Dingley |
|||||||