|
CSS - Cant Find Dropdown On Ie6
Link
Hi I need some help with this Menu. It works fine when you mouseover products in firefox. But when you switch to ie6 it shows nothing. It has code specific for ie6 but still no menu. tx Similar TutorialsThe site looks okay in ie6, but in ie8 it's off. Could someone take a look? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns= <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Northwest Open Access Network one of the largest in the region with Internet, Ethernet and TDM at service levels more advanced than in some metro areas." /> <meta name="keywords" content="ASP, ISP, ILEC, CLEC, IXC, RSP, DNS, DWDM, Northwest Open Access Network, Noanet" /> <title>Noanet Network Services</title> <link href="dictionary.css" rel="stylesheet" type="text/css" /> </head> <body style="padding: 0px; margin: 0px; background-color: #0E0E0C"> <div style="width: 100%; height: 183px; background-color: #0E0E0C"> <div style="background-image: url(images/2-14.jpg); background-repeat: no-repeat; background-attachment: scroll; background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 183px"> <div style="width: 140px; height: 183px;float:left;"></div> <div style="width: 549px; height: 183px;"> <div style="height:15px;"></div> <div style="margin-top:7px; margin-bottom:7px;"><a href="index.htm" class="menu">HOMEPAGE</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="overview.htm" class="menu">OVERVIEW</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="tech-support.htm" class="menu">TECH SUPPORT</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="Contact%20Options.htm" class="menu">CONTACT OPTIONS</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="Network-Services.htm" class="menu">NETWORK SERVICES</a></div> <div style="margin-top:6px; margin-bottom:7px;"><a href="Infrastructure.htm" class="menu">INFRASTRUCTURE</a></div> <div style="margin-top:6px; margin-bottom:0px;"><a href="Press-info.htm" class="menu">PRESS INFO</a></div> </div> </div> </div> <div> <div style="background-position: center top; margin-right: auto; margin-left: auto; width: 1115px; height: 932px; background-image: url('images/nn_02-2-long.jpg'); background-repeat: no-repeat; background-attachment: scroll;"> <div style="margin-right: 150px; margin-left:290px;margin-top:60px; text-align:justify;"> <h1>Network Services</h1> NoaNet delivers leading-edge technologies across an extensive high-speed backbone transport network to wholesale providers such as ILECs, CLECs, IXCs, RSPs, ISPs, ASPs and cable companies.<br /> <br /> NoaNet service offerings include: <br /> <br /> <span class="style6">IP services</span><br /> NoaNet Internet features path-protected, unaggregated transport across the NoaNet backbone to the <a href="POP.htm" title="Point Of Presence. The IXC equivalent of a local phone company's central office. The POP is a long distance carrier's office in your local community (defined as your LATA). A POP is the true place your long distance carrier, called an IntereXchange Carrier (IXC), terminates your long distance lines just before those lines are connected to your local phone company's lines or to your own direct hookup. Each IXC can have multiple POP's within one LATA. All long distance phone connections go through the POPs.">PoP</a> closest to the customer. <br /> <ul> <li>At least four multi-homed upstream tier-one providers in Seattle and Portland </li> <li>Automatic fail-over within 50ms of interruption </li> <li>IP Addressing, <a href="BGP.htm" title="Border Gateway Protocol is a Gateway Protocol which routers (other non-router devices also maybe involved as intermediaries) employ in order to exchange appropriate levels of routing information.">BGP</a> routing and <a href="DNS.htm" title="Domain Name Server. Domain Name Servers, also known as resolvers, are a system of computers which convert domain names into IP addresses,which consist of a string of four numbers up to three digits each.">DNS</a> </li> <li>IPV6 Support </li> </ul> <p /> <span class="style6">TDM transport circuits</span><br /> NoaNet can design and deliver complex multi-point <a href="TDM.htm" title="Time Division Multiplexing. A technique for transmitting a number of separate data, voice and/or video signals simultaneously over one communications medium by interleaving a piece of each signal one after another.">TDM</a> rings over SONET, as well as two-point circuits. <ul> <li>Equivalent to DS-3 (<a href="STS-1.htm" title="Synchronous Transport Signal level 1. An electrical signal that is converted to or from Sonet's optically based signal; equivalent to the OC-1 signal of 51.84 Mbps.">STS-1</a> or 51.84 Mbps) and <a href="OC-3.htm" title="Optical Carrier Level 3. A SONET channel equal to three DS-3s, which is equal to 155.52 Mbps. ">OC-3</a> through <a href="OC-192.htm" title="Optical Carrier-level 192. SONET channel of 9.953 thousand million bits per second (Gbps). How you calculate the capacity of an OC-192 is to multiply times 192 by 51.840 million bits per second and thus you get 9.953 thousand million bits per second--gigabits per second. ">OC-192</a> </li> <li>Protected or Single-Thread configurations </li> </ul> <p /> <span class="style6">Ethernet services</span> <br /> NoaNet provides scalability, security and ease of configuration over a resilient Gigabit Ethernet network. <ul> <li>Connect two or more sites that use Internet, data, video and/or VOIP applications </li> <li>Billed on an "pay as you grow" basis, with the ability to <a href="burst.htm" title="A method of transmission that combines a very high data signaling rate with very short transmission times. ">burst</a>. </li> <li>Capacity is guaranteed and unaggregated </li> <li>Ethernet WANs can be designed to handle 10Mb to <a href="10GigE.htm" title="10 Gigabit Ethernet. Positioned as a high-speed technology for MAN (Metropolitan Area Networks) applications, 10GbE is a developing IEEE 802.3ae standard that will enable networks to scale from the traditional 10 Mbps beyond the common 100 Mbps and increasingly common 1 Gbps, up to 10 Gbps.">10GigE</a>. </li> </ul> <p /> For more information about our Network Operations Center, please refer to the <a href="noc.htm">Technology Center overview</a>. Please review the NoaNet Terms and Conditions in the <a href="documents/MSA_original_72903.pdf">Master Services Agreement (MSA)</a> which is the basis for all services. Contact NoaNet for additional information. </div> </div> </div> </body> </html> Hiya, I was wondering if anyone out there would be willing to take a look and tell me why this works in everything except IE6. I really don't want to go back and re-architect this with tables. it took too long in the first place. http://www.theblackkeys.com/dev/ Any quick help is appreciated. Original deadline was tonight. Hi, I'm totally new to CSS and I need to edit a TEXT of our login page portal. I'm using firefox/firebug to view the contents but i can't seem to find the exact html file to edit it. I tried to edit the login.aspx file but I cannot find the contents to edit there. All I see is runat="server" if i follow my page using "view code" in my browser instead of the actual TEXTS that i need to edit. Hope someone can help me on this. TIA! Hey, This is my first CSS project and I have a probloem which I am sure is super simple. I have 4 web buttons that go side by side in the contents area of the page. They have to touch. Right now, there is a space in between each one. I wrote a quick test page with the images and there is no space, so it must be the CSS. What do I need to change? Here is my sheet: Code:
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #c0c0c0;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
width: 780px;
text-align: left;
background:#fff url(images/newsbackground.gif) repeat-y right top;
}
#header{
height: 205px;
width: 780px;
}
#searchspacer{
background-color: #d78c0b;
left: 479px;
height: 51px;
width: 53px;
position: absolute;
}
#searchbox{
background-color: #d78c0b;
left: 532px;
height: 90px;
width: 248px;
position: absolute;
}
form{
position: relative;
left: 20px;
top: 20px;
}
form span{
color: #FFFFFF;
position: absolute;
top: 22px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
#search{
margin-left: 45px;
margin-top: 20px;
position: absolute;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
}
#go{
background-color: #FFFFFF;
background-image: url(images/searchbutton.gif);
background-repeat: no-repeat;
margin-left: 159px;
margin-top: 18px;
position: absolute;
}
#imageheader{
background-image: url(images/header.jpg);
background-repeat: no-repeat;
top: 51px;
position: absolute;
height: 154px;
width: 532px;
}
#navtop{
list-style-position: inside;
list-style-image: none;
list-style-type: none;
position: absolute;
height: 51px;
width: 479px;
}
#navtop a{
height: 32px;
text-decoration: none;
font-size: 12px;
font-style: normal;
display: block;
position: absolute;
overflow: hidden;
font-family: Georgia, "Times New Roman", Times, serif;
padding-top: 19px;
color: #FFFFFF;
}
#nt1 ,#nt2 ,#nt3{
padding-left: 40px;
width: 79px;
background-image: url(images/navtop.gif);
}
#nt2{left: 119px;}
#nt3{left: 238px;}
#nt4{
left: 357px;
width: 94px;
padding-left: 28px;
background-image: url(images/navtopend.gif);
}
#nt1:hover ,#nt2:hover ,#nt3:hover {background-image: url(images/navtopover.gif);}
#nt4:hover{background-image: url(images/navtopendover.gif);}
#navright{
position: absolute;
height: 114px;
width: 248px;
left: 532px;
top: 90px;
background-color: #000000;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#navright li{
text-indent: 0px;
background-color: #FF0000;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
display: block;
}
#navright a{
background-repeat: no-repeat;
display: block;
height: 26px;
width: 195px;
position: absolute;
padding-left: 53px;
padding-top: 7px;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
#nr1 ,#nr2 ,#nr3{background-image: url(images/navright.gif);}
#nr2{top: 29px;}
#nr3{top: 58px;}
#nr4{
top: 87px;
background-image: url(images/navrightend.gif);
}
#nr1:hover ,#nr2:hover ,#nr3:hover {background-image: url(images/navrightover.gif);}
#nr4:hover{background-image: url(images/navrightendover.gif);}
#contentbox{
background-image: url(images/bg.jpg);
}
#content{
width: 532px;
background:transparent;
float:left;
}
#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #666666;
margin-left: 26px;
margin-bottom: 20px;
width: 430px;
}
#content h1{
margin: 20px 0px 10px 26px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #033387;
}
#content span{
margin-top: 10px;
margin-bottom: 4px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #649721;
}
#content span#s2{color: #03449f;}
#content a{color: #666666;}
img{
float: left;
margin-right: 7px;
}
#news{
background: #033387;
width: 240px;
float:right;
padding-left: 8px;
}
#news p{
background-color: #033387;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding: 10px 20px 10px 20px;
}
#news a{color: #FFFFFF;}
#news h4{
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #000000;
padding-left: 20px;
}
#footer{
background-color: #d78c0b;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
height: 20px;
width: 780px;
clear: both;
text-decoration: none;
text-align: center;
padding-top:4px;
}
#footer ul{display: inline;}
#footer li{display: inline;}
#footer a{
color: #FFFFFF;
text-decoration: underline;
padding-right: 7px;
}
#copyright{
background-color: #c0c0c0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 20px;
width: 780px;
text-decoration: none;
text-align: center;
position: relative;
}
#copyright p{
height: 20px;
text-decoration: none;
padding: 10px 10px;
}
#copyright a{color: #0000FF;}
#copyright a:hover{color: #FF0000;}
#imagepreloader{
visibility: hidden;
overflow: hidden;
height: 0px;
width: 0px;
}
Hey everyone, I'm tired, my back is sore and I can't find the damned list of hacks that fix various things in IE. I don't really know what is wrong, so I was just going to try random hacks to fix it, if anyone knows the list of the hacks that would be greatly appreciated. http://sammysnake.byethost7.com/ There is a screenshot of how it looks to me on that site, it's set to a min-width of 1000px. Hi I've come up on the old <select> elements showing through <div>s that are made visible on top of them. What I want to do is find out the id's of the select elements under my <div> so that i can hide them using CSS / Javascript. The basic layout of my page is a grid of <select> elements, each one of these would have a hidden <div> layer associated with it containing extra information etc. By the side of each of the <select> elements is a little image / button that the user will click and the layer with the extra stuff in is made visible. The layer will overlap a number of <select> elements (not the parent <select> element). Each <div> pops up in a different position (calculated dynamically as an x,y offset from the parent) can I find the Ids of the elements it overlaps? Hope this is clear, and thanks in advance. flipflops. Hello all! I'm new to the community here--it feels great to be a part of an active community where people can give eachother help. I'd consider myself a pretty good Web designer, I mean, I've been doing it for a long time, however, I'm still very new to the concept of CSS. I've used it with rollover links, but never have I used it to design an entire Web page (basically, I've used tables my whole life). Now that I've gotten some practice with CSS by reading books and tutorials, I've put together a start-up page for a computer company that I am a part of. We are a new company and are looking to start off on the right foot by having a killer Web site. So in the past two weeks I've been hand-coding this Web site. http://www.freewebs.com/missaghi As you can see, it's all in CSS! I'm very happy that I've been able to accomplish this, but there is a problem that I've found, and honestly, I've yet to find the cause! If you are using Firefox (and I hope you are, if you're using a PC), you'll notice that the TOP of the paragraphs are CORRECTLY horizontally aligned with the TOP of the navigation links. It looks nice and clean. Now open up the site with Internet Explorer (I know it's hard for some of you, as it is me, heh), and notice how the paragraphs sit lower by about seven or so pixels. Well, if you look at my code, I have forced the margin up by 18 pixels (margin: -18px 0px 0px 140px) in order for my paragraphs to be aligned in Firefox. I COULD have modified it for IE, but meh, I'd rather make sure Firefox is covered since in my opinion, it has the best CSS support. However, my goal is to find out WHY it is acting different in all these browsers, and WHY I need to cheat (using the -18px) in order to make it work. Any help would be greatly appreciated, and I'm sorry that this is so long. Regards, Nathan For the life of me I cant find out what code that will align the image correctly. Currently the "previous" button on the page below has a gap on the left, and is being cropped on the right. http://zombiemod.com/rm/nina2/main.php?g2_itemId=13 This is the image im talking about: http://zombiemod.com/rm/nina2/theme...ntrols-left.png I guess if I remove the space to the left of the previous button, it will drag the image to the corrct position so all of the image is being displayed without having the right side cropped. Here is the HTML for the button: Code: <ul id="control-buttons"> <li><button id="controls-left"> <img src="themes/ajaxian/images/controls-left.png" alt="Left" /> </button></li> <li><button id="controls-play"> <img src="themes/ajaxian/images/controls-right.png" alt="Play" /> </button></li> <li><button id="controls-right"> <img src="themes/ajaxian/images/controls-right.png" alt="Right" /> </button></li> </ul> This is the code I used to try and set the correct height of the buttons: Code: #slideshow-controls button {
width: 44px;
height: 59px;
/*margin: 0;
padding: 0;*/
background-color: #000;
border: none;
text-align: center;
cursor: pointer;
}
I have read several books on CSS. For the life of me I still cant understand why some things do the things they do. For example, I still dont understand float. Even though I have read for literally hours about floats, I still dont understand why sometimes it goes one place and sometimes it goes another. Whenever I use tables, I feel as though I can place anything anywhere and know that it will always be there, regardless of the browser. For example, yesterday I spent 30 minutes reading through a tutorial about css navigation in horizonal format. I did it successfully. However, I wanted it to be centered on the page. No matter what changes I made in the CSS for the list, ul, link, etc it would not center on the page. I spent another 45 minutes trying to get it to center on the page. Once I did (wrapped the list in a DIV) then I refreshed the page and the background, which is black was through the page horizontally to each of the nav links instead of a white background like the content portion of the page. A whole new headache. I fixed that by putting the div and nav list in a table with a white background (fixed). I then check it in internet explorer and the list is not horizontal but vertical. It keep the same look of the nav list links, but is vertical. NOW I have to "hack" my CSS to make it more compliant with an older version of IE? I just don't understand why so many people think CSS is superior to tables. I understand tables were never designed for, well, designing pages, but for whatever reason, maybe because I am old school, but I find them so much easier to work with. I can never get the outcome I want with CSS and when I do it hardly ever looks the same across multiple browsers. I want to learn CSS. I want to understand why it is better. Most importantly I want to know how to code in it and if something looks wrong that I know the exact line in the CSS to work with to fix it. I am now just editing line by line to see if I get a change or outcome I want. Any suggestions? Tutorials? This is driving me nuts. Obviously something is just not clicking for me. I've spent almost all day reading, and everyone makes it sound so darn easy! I have 2 basic problems, and it doesn't seem like they should be that hard to fix. The test site is at lgs.lambrite.com/test.htm and the stylesheet is lgs.lambrite.com/new.css Problem 1. For the life of me, I cannot get the link that says "Skip To Content" to accept the more specific set of link colors. I have tried every variation I can think of, with no luck. Code: <div id="subnav0" style="position:absolute; width:769px; height:22px; z-index:3; top: 192px; visibility: visible;" class="subnav"><a href="#content">Skip to Content</a></div> Code: .subnav #subnav0 a:link a:visited a:hover a:active {
color: #343457;
text-decoration: none;
}
My second issue is a little more complicated. Right now, all my layers have their positions hard-coded. This means that the content area is fixed in height, and I need it to be able to expand to accomodate the text. I did this because I was not able to (figure out how to) place the many subnav layers in the same position to do the rollovers, the wrapper would not expand properly, and the footer would not regularly start below the end of the content. Even a good example of a similar layout would be helpful; everything that I find uses 2-3 columns, float and the clear property. I really want to understand this stuff, but if I don't figure this one out in a few days, I'm going to have to use tables and learn it the next time around. So I really appreciate any input. Thanks! Sarah Hi, I plan to use CSS with CMS on my website. I would like to use CSS content management system for the inherent benefits of managing my website myself. I have seen a few websites developed by Imageworksstudio.com using CSS CMS together in a very correct manner. Can any of you please guide me what CSS content management system they have used? Can you point me to any online resources that help in using CMS and CSS to develop a website and make it SEO friendly. Thank You, Rheanna Francis I need some really rediculous link styles, like all of the cool fading/pixelating ones that work on IE - but I can't find any for Firefox. Does anyone know if they exist, or where to find them? 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! 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> 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. 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 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 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 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;
}
|
|||||||