|
CSS - Is There Drop Down Menus Working On All Browsers Without .htc Or Javascript File?
Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included?
This is nice, but the css in too messy. http://www.bluescopesteel.com If you have any betterones please tell me. Cheers Similar TutorialsHello, I am a javascript noob trying to do a javascript dropdown and this does not seem to be working at all. When ever I add in the list for the drop down, everything gets pushed to the left and where ever the list begins, every link after that just disappears. I'm pretty sure the link is being put inline instead of block like I wanted it to but i'm not sure how to correct it and I am getting completely frustrated doing it. I was wondering if anyone could tell me what I was doing wrong. Also, I used the suckerfish method for the drop down. 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></li>
<li><a href="technology.html" id="nav_technology" class="" title="Technology">TECHNOLOGY</a></li>
<li><a href="distribution.html" id="nav_distribution" class="" title="Distribution">DISTRIBUTION</a></li>
<ul id="break"><li id="first">
<li><a href="case_studies.html" id="nav_casestudies" class="casestudies" title="Case Studies">CASE STUDIES</a></li>
<li><a href="#" id="nav_blog" class="" title="Blog">BLOG</a></li>
<ul>
<li><a href="#">Search Engine Marketing</a></li>
<li><a href="#">Pay Per Click Management</a></li>
<li><a href="#">Lovcal Search Marketing</a></li>
<li><a href="#">Contextual Marketing</a></li>
<li><a href="#">Shopping Comparison</a></li>
<li><a href="#">Paid Inclusion</a></li>
<li><a href="#">Search Engine Optimizaiton</a></li>
</ul>
</li>
</ul>
</ul>
</div>
[\code]
JavaScript Code:
[code]
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("break");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Here is the part of the css I created but i'm not sure how it's all supposed to go together since I'm a javascript noob. CSS: Code:
li#first {
border-left-width: 1em;
}
li#last {
border-right-width: 1em;
}
li ul {
display: none;
position: absolute;
top: 100%;
float:right;
font-weight: normal;
padding: 0.5em 0 1em 0;
border-right: solid 1px #7d6340;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
#break a {
font-weight: bold;
color: green;
}
#break a {
text-decoration: none;
}
#break li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}
#break li li a:hover {
padding: 0.2em 5px;
border: 5px solid #7d6340;
border-width: 0 5px;
}
#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/expandedservice2.gif);
border: 0px;
width: 56px;
}
#nav ul li a#nav_technology,
#nav ul li a:visited#nav_technology{
background-image: url(images/technology2.gif);
border:0px;
width: 76px;
}
#nav ul li a:hover#nav_technology,
#nav ul li a#nav_technology.active,
#nav ul li a:visited#nav_technology.active {
background-image: url(images/technology2up.gif);
border: 0px;
width: 76px;
}
#nav ul li a#nav_distribution,
#nav ul li a:visited#nav_distribution {
background-image:url(images/distribution2.gif);
border:0px;
width: 72px;
}
#nav ul li a:hover#nav_distribution,
#nav ul li a#nav_distribution.active,
#nav ul li a:visited#nav_distribution.active {
background-image: url(images/distributionup2.gif);
border: 0px;
width: 72px;
}
#nav ul li a#nav_casestudies,
#nav ul li a:visited#nav_casestudies {
background-image: url(images/casestudies2.gif);
border:0px;
width: 72px;
}
#nav ul li a:hover#nav_casestudies,
#nav ul li a#nav_casestudies.active,
#nav ul li a:visited#nav_casestudies.active {
background-image: url(images/casestudiesup2.gif);
border: 0px;
width: 72px;
}
#nav ul li a#nav_blog,
#nav ul li a:visited#nav_blog {
background-image: url(images/blog2.gif);
border:0px solid black;
width: 27px;
}
#nav ul li a:hover#nav_blog,
#nav ul li a#nav_blog.active,
#nav ul li a:visited#nav_blog.active {
background-image: url(images/blogup2.gif);
border: 0px;
width: 27px;
}
I am very new to this whole css thing, but am trying to get all learned about it. I think I am doing badly so far. I am trying to make css drop-down menus, and have pulled code from all over the place, and modified it to look correct (so as to match my design comp). it is based on the suckerfish model <http://www.alistapart.com/articles/dropdowns/> and it works exactly as it should in safari, firefox (mac & pc). but doesn't work correctly at all in IE (mac or pc). I have implemented the "ie fix" with the javascript code several sites instructed me to use, and while it now sorta works (in the sense that the menus drop down), there are still problems. such as in IE on pc you can't roll down to the drop down menus, because they go away as soon as you roll off the top menu item. in IE on mac they are messed up in a whole other way. you can roll down to them, and they don't go away as soon as you're off the top nav option, but the hover is all jacked, and the menu is broken, sending the last nav button down to the next line! aaahhh! can anyone help me?! I'm sorry I'm so stupid and helpless, but... well. I am. any tips/etc would be mighty appreciated! -daniel Hi All, I seem to have made a mistake in installing a CSS drop-down menu b/c despite my best efforts, I cannot seem to make it work in Internet Explorer. I am using the Suckerfish method found http://www.alistapart.com/articles/dropdowns My CSS file is here And a sample page can be found here Does anyone see a mistake I made? All other browsers work beautifully, so the problem must lie in the Internet Explorer hack. Hi guys, I recently learned about pure css drop down menus. Now if you look at my site in FF, and IE, you see in IE, it just doesn't display correctly. Why is this? Tips on fixing this? www.projectfinalfantasy.com Regards, Joseph Man. Hi all, Anyone know of any problems with CSS drop down menus a la suckerfish (www.alistapart.com) and Konqueror? Here's my CSS for this http://www.nzwebz.com/wikindx2 : Code: body {
background : url("paper.jpg");
font-family : sans-serif;
}
ul {
padding : 0;
margin : 0;
list-style : none;
}
li {
float : left;
position : relative;
}
li ul {
display : none;
position : absolute;
top : 1.1em;
left : 0;
border : 4px #CCCC99 groove;
background : #ffcc99;
width : 7em;
}
li > ul {
top : auto;
left : auto;
}
li:hover ul, li.over ul{
display : block;
}
A:visited, A:link, A:active {
text-decoration : none;
color : #666666;
background : transparent;
display : block;
width : 7em;
}
A:hover {
text-decoration : none;
background : #ff9900;
color : white;
display : block;
width : 7em;
}
.clear {
clear : both;
}
.titleTable {
width : 90%;
}
.menuTable {
margin : 0 0 0 5%;
}
.menuli {
color : #ff9900;
}
.mainTable {
border : #ff9900 3px groove;
width : 90%;
}
h1, h2, h3, h4 {
color : #ff9900;
}
With the javascript (which needs work I know), it works with IE (with javascript fix), Netscape, Firefox and Mozilla but the drop downs won't work with Konqueror. Javascript is turned on in Konqueror in case it's anything to do with that. I notice that even the suckerfish pretty example doesn't work in Konqueror (v3.1-12) Thanks. I have added drop-down menus, but they are not appearing directly underneath the originating links. They are WAY off to the right. I can't figure out why for the life of me. Help, please? http://www.bartlett-family.net/BBCON Chris Hi all, I'm adding drop down menus to my company's site and have it working as I'd like in Firefox and Safari but the drop downs do not appear at all on IE7/Win. I've tried a lot of different things to fix it but I think I am missing some fundamental understanding here so it's all been shots in the dark. Any tips would be greatly appreciated! Thanks in advance. P.S. I realize the CSS might be a bit confusing at first glance - what it achieves is essentially just changing the positioning of the background image when hovered over to reveal the "hover state" of a particular menu choice. The menu in question is the horizontal bar near the top (MBA Programs, Faculty & Research, etc.) URL: http://rady.ucsd.edu/index-dev.html Relevant HTML: Code: <ul id="nav-main" class="home"> <li id="mba"><a href="/mba/">MBA Programs</a> <ul> <li class="first-item"><a href="/mba/fulltime/">Full-Time MBA</a></li> <li><a href="/mba/flex/">FlexMBA</a></li> <li><a href="/mba/admissions/">Admissions</a></li> <li><a href="/mba/careers/">MBA Career Connections</a></li> <li><a href="/mba/profiles/">Student & Alumni Profiles</a></li> <li><a href="/mba/organizations/">Student Organizations</a></li> <li><a href="/mba/seminars/">Professional Seminars</a></li> <li><a href="/mba/mentors/">Executive Mentors</a></li> <li class="last-item"><a href="/mba/speakers/">Executive Speakers</a></li> </ul> </li> <li id="faculty"><a href="/faculty/">Faculty & Research</a> <ul> <li class="first-item"><a href="/faculty/directory/">Faculty Directory</a></li> <li><a href="/faculty/research/">Research Areas</a></li> <li><a href="/faculty/seminars/">Research Seminars</a></li> <li><a href="/faculty/recruiting/">Faculty Recruiting</a></li> <li class="last-item"><a href="faculty/postdoctoral/">Postdoctoral Research</a></li> </ul> </li> <li id="exec"><a href="/exec/">Executive Development</a> <ul> <li class="first-item"><a href="/exec/custom/">Custom Programs</a></li> <li><a href="/exec/open/">Open Enrollment Programs</a></li> <li><a href="/exec/learn/">Learning Consortium</a></li> <li><a href="/exec/leadership/">Leadership Assessment</a></li> <li><a href="/exec/align/">Align Executive Series</a></li> <li class="last-item"><a href="/exec/faq/">Frequently Asked Questions</a></li> </ul> </li> <li id="corporate"><a href="/corporate/">Corporate Connections</a></li> <li id="news"><a href="/news/">News & Events</a> <ul> <li class="first-item"><a href="/news/releases/">News Releases</a></li> <li><a href="/news/media-coverage/">Media Coverage</a></li> <li><a href="/news/faculty-experts/">Faculty Experts</a></li> <li class="last-item"><a href="/news/newsletter/">Newsletter</a></li> </ul> </li> <li id="invest"><a href="/invest/">Invest in Rady</a> <ul> <li class="first-item"><a href="/invest/edge/">Corporate EDGE</a></li> <li><a href="/invest/venture-fund/">Dean's Venture Fund</a></li> <li><a href="/invest/fellowships/">Endowed Fellowships</a></li> <li class="last-item"><a href="/invest/chairs/">Endowed Chairs</a></li> </ul> </li> <li id="alumni"><a href="http://alumni.rady.ucsd.edu">Alumni Relations</a></li> <li id="undergrad"><a href="/undergrad/">Undergraduate</a> <ul> <li class="first-item"><a href="/undergrad/courses/">Courses</a></li> <li class="last-item"><a href="/undergrad/course-readers/">Course Readers</a></li> </ul> </li> <li id="about"><a href="/about/">About</a> <ul> <li class="first-item"><a href="/about/welcome/">Welcome</a></li> <li><a href="/about/staff/">Our Staff</a></li> <li><a href="/about/campus/">Our Campus</a></li> <li><a href="/about/sandiego/">Life in San Diego</a></li> <li><a href="/about/dean/">About the Dean</a></li> <li><a href="/about/athena/">Athena</a></li> <li class="last-item"><a href="/about/beyster/">Beyster Institute</a></li> </ul> </li> </ul> Relevant CSS: Code: #nav-main { width: 903px; clear: both; list-style: none; padding: 0 0 2em 0; float: left; position: relative; }
#nav-main.home { padding-bottom: 0; }
#nav-main li { float: left; padding: 0; margin: 0; text-indent: -9000px;}
#nav-main li ul { position: absolute; list-style: none; }
#nav-main li ul li { display: none; text-indent: 0px; }
#nav-main li ul li a { font-size: 11px; line-height: 1.1; height: 20px; padding-left: 9px; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }
#nav-main li:hover ul li { display: block; }
#nav-main ul li a { padding-left: 0px; padding-right: 12px; }
#nav-main li ul li.first-item a { padding-top: 10px; }
#nav-main li ul li.last-item a { padding-bottom: 8px; border-bottom: 1px solid #e6e6e6; }
#nav-main li ul a, #nav-main li ul a:hover { width: 150px; background: #fafafa; }
#mba ul li a, #mba ul li a:hover { width: 155px; }
#faculty ul li a, #faculty ul li a:hover { position: relative; left: 2px; width: 137px; }
#exec ul li a, #exec ul li a:hover { position: relative; left: 4px; width: 172px; }
#corporate ul li a, #corporate ul li a:hover { position: relative; left: 2px; width: 200px; }
#news ul li a, #news ul li a:hover { position: relative; left: 3px; width: 117px; }
#invest ul li a, #invest ul li a:hover { position: relative; left: 2px; width: 139px; }
#undergrad ul li a, #undergrad ul li a:hover { position: relative; left: -1px; width: 117px; }
#about ul li a, #about ul li a:hover { position: relative; left: -73px; width: 107px; text-align: right; }
#mba a, #faculty a, #exec a, #corporate a, #news a, #invest a, #alumni a, #undergrad a, #about a { display: block; height: 34px; background: url(../images/nav.gif) no-repeat 0 0; }
#mba a { width: 105px; }
#mba a:hover, #mba.current a { background-position: 0px -34px; }
#faculty a { width: 127px; background-position: -105px 0; }
#faculty a:hover, #faculty.current a { background-position: -105px -34px; }
#exec a { width: 152px; background-position: -232px 0; }
#exec a:hover, #exec.current a { background-position: -232px -34px; }
#corporate a { width: 150px; background-position: -384px 0; }
#corporate a:hover, #corporate.current a { background-position: -384px -34px; }
#news a { width: 107px; background-position: -534px 0; }
#news a:hover, #news.current a { background-position: -534px -34px; }
#invest a { width: 59px; background-position: -641px 0; }
#invest a:hover, #invest.current a { background-position: -641px -34px; }
#alumni a { width: 64px; background-position: -700px 0; }
#alumni a:hover, #alumni.current a { background-position: -700px -34px; }
#undergrad a { width: 82px; background-position: -764px 0; }
#undergrad a:hover, #undergrad.current a { background-position: -764px -34px; }
#about a { width: 57px; background-position: -846px 0; }
#about a:hover, #about.current a {background-position: -846px -34px; }
@kravvitz You have any idea how to do this? I can do it in all browsers except ie6, but I have no idea how to make ie6 comply... Hi I am following a list aparts suckerfish dropdown tutorial. So far I have managed to get everything working for Mozilla. The javascript bit at the end, enabling it to work for explorer is troubling me. can anyone help? Do I put the javascript in the CSS file or the Html? I've tried both but neither seem to work! Is there a better way to do this? Thanks OK, so I think I'm smart, but I guess not. I have this site http://jwdev.ocis.net I have been working on. It has implemented a CSS only drop down menu system. The problem. No mater what I do, including clear: left/z-index - the drop down menu "PROJECTS" falls under the page content in Firefox. For a first, this works in IE flawlessly. The CSS is a disaster right now as I have been hammering at it for days. Anyone lend a hand? Hi All, When viewed in Firefox on a Mac, the drop down menu works perfectly. I am having a problem with my navigation when viewed in Safari on a Mac. I am not sure about how things function on a PC. When viewed in Safari, the drop down menu appears unaligned with the buttons it corresponds too. For example, on the following page http://www.oharenoise.org/new/mission.htm when you mouseover "About Us" the corresponding menu shows up under "Home." The other problem (only in Safari, as far as I know) I am having occurs on the homepage, viewed here . When you mouseover "About Us", "Newsroom", "Residential", "School" or "Technical" the drop-down menu appears in front of the Flash slideshow perfectly, until the slide changes pictures and then the menu falls behind the slide. Any idea why these issues are occurring? Thanks. I have a problem and I need some help on centering the UL,LI menus instead of having it stick to the left... Code:
#dmenu
{
/* font-family: Arial, Helvetica, Sans-Serif; */
/* font-size: 12px; */
}
#dmenu li ul
{
/* top: auto; */
/* left: auto; */
}
#dmenu li:hover ul
{
/* lists nested under hovered list items */
display: block;
}
#dmenu li.over ul
{
display: block;
}
.xMenuUl
{
text-align: center; /* for IE stupidity */
background-color: #FFFFFF;
list-style-type: none; /* hide the bullet icon */
margin: 0;
padding: 0;
}
.xMenuLi
{
list-style-type: none; /* hide the bullet icon */
float: left;
}
.xMenuTitle
{
display: block;
width: 100px;
text-indent: 0px;
text-decoration: none;
border: 1px solid #000000;
padding: 4px;
line-height: 14px;
}
.xSubmenuUl
{
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
display: none;
margin-top: -1px;
background-color: #E7F7FF;
background-position: top left;
background-repeat: repeat-x;
border-top: 1px solid #000000;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
border-left: 7px solid #FF0000;
}
.xSubmenuLi a
{
padding: 3px;
text-decoration: none;
color: #000000;
display: block;
width: 250px;
}
.xSubmenuLi a:hover
{
text-decoration: none;
background: #336699;
color: #FFFFFF;
}
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> This is a test...<br>sdfsdf<br> <ul class="xMenuUl" id="dmenu"> <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a> <ul class="xSubmenuUl"> <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li> <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li> <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li> <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li> </ul> </li> <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a> <ul class="xSubmenuUl"> <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li> <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li> <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li> <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li> </ul> </li> <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a> <ul class="xSubmenuUl"> <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li> <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li> <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li> <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li> <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li> </ul> </li> </ul> this is a test....<br> asdf<br> </body> </html> Hello All, I'm having a ton of difficulty on the drop down navigation bar for my site. I used webmonkey's "Add CSS Drop-Down Menus" tutorial As I wanted a really simple, quick and easy drop down menu especially since the lists that create the menu are populated through php. Now I found that I had to use z-index so the menu div layed on top of the text div (as other wise the menu div or the text div would overlap and obscure the other) This all worked fine. Sadly, when I tried to put a form into one page, I realized all the input fields could not be used because of the z-indexes and the menu bar overlaying it. So again I had to find a solution and here's where I'm stuck. Does anyone know a way I can keep it as is and have the form functional? If not, can anyone help me change the menu bar so that the second level of the list is shown on one line (therefore it won't lay on top of the form causing it to be obstructed). So I'd rollover "Telecommunications" and all the sub-categories are listed on one line Here's the html code: Code:
<div id="content">
<ul id=nav>
<li><a href='index.php?id=12'>About ACC</a></li>
<li><a href='index.php?id=13'>Telecommunications</a>
<ul>
<li><a href='index.php?id=6'>Telephone Systems</a>
<li><a href='index.php?id=7'>Voice Over IP Solutions</a>
<li><a href='index.php?id=5'>Local & Long Distance</a>
<li><a href='index.php?id=4'>Conferencing</a>
<li><a href='index.php?id=11'>Internet Access and Bandwidth</a><li><a href='index.php?id=10'>WAN/LAN Networking</a>
<li><a href='index.php?id=9'>Fiber Optics</a></ul></li>
<li><a href='index.php?id=14'>Our Services</a>
<ul>
<li><a href='index.php?id=8'>Cost Consulting & Analysis</a></ul></li>
<li><a href='index.php?id=19'>Contact Us</a></li>
</li>
</ul>
<div id="newscontent">
<table width="100%" border="0">
<tbody>
<tr>
<td>
<form method="post" action="mailto:spicelmf@gmail.com">
<b>Test:<b> <br />
<input type="text" size="71" name="title" /><br />
<br />
<input type="submit" value="Submit" /> <input type="reset" value="Try again" /></b> </b>
</form>
</td>
</tr>
</tbody>
</table></div>
</div>
and here's the css: Code: #nav {
position: relative;
margin: 0 auto 0 auto;
top: 67px;
width: 720px;
left: 50px;
padding: 0;
height: 400px;
/*list-style-type: none;*/
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
position: relative;
float: left;
min-width: 150px;
}
li ul {
position: absolute;
top: 35px;
display: none;
}
ul li a {
display: block;
text-align: center;
text-decoration: none;
line-height: 24px;
font-size: 14px;
color: #21448c;
padding: 5px;
background: #e6e3b8;
margin: 0 2px;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #21448c;
}
ul li a:hover { background: #8da6bc; }
li:hover ul, li.over ul { display: block; }
#content {
position: relative;
height: 500px;
margin: 0 auto 0 auto;
width: 720px;
top: 56px;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
}
#newscontent {
position: absolute;
margin: 0 auto 0 auto;
min-height: 380px;
top: 135px;
padding: 0px 54px 20px 50px;
width: 620px;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10pt !important;
z-index: -1;
background: transparent url(maincontent_bg.png) repeat-y left top;
}
Thanks and apologies if this was already covered, I searched for ages and couldn't find what i was looking for. We've recently redesigned our company's website and went live with it. Unfortunately we've just noticed on the pages with Flash on them, the CSS drop-downs go behind the text, flash objects, etc. Does anyone know how to fix this? You can see what is happening on these pages. http://www.callan.co.uk/locate_school.php http://www.callan.co.uk/callanschool_student_pgs/callan_english_lessons_video.php You'll notice in the second link the far right drop-down menu doesn't go behind the right side navigation div. I think this is because it's the flash causing it and there is no Flash under that last drop-down menu. --------This Part Solved!--------- Hi Guys! I have a CSS dropdown menu going on, and it's working semi-properly in Firefox, but is stuck behind the content div in IE6/7. I've tried using Z-index but either I'm altering the wrong tag or I'm way off in the wrong direction, as it ain't workin. Here is the page: http://www.whitecapgraphics.com/bates/front.php If you look at it in IE, there's actually no indication that it is dropping down at all, but I know it is as I moved the drop downs up a few pixels and I could see them dropping behind the div. PS - The Home button does not have a drop down menu. My CSS: Code:
#d1 {
background-color: #003366;
float: left;
width: 200px;
background-image: url(images/header_bg.gif);
background-repeat: repeat-x;
height: 107px;
}
#d2 {
background-color: #1F2935;
float: right;
width: 477px;
background-image: url(images/header_bg.gif);
}
#head_container {
background-color: #000066;
float: left;
background-image: url(images/header_bg.gif);
height: 107px;
}
#nav_container {
background-color: #1F2935;
float: left;
width: 100%;
background-image: url(images/nav_bar_bg.gif);
height: 30px;
}
#page_container {
margin: auto;
width: 99.99%;
height: 100%;
}
#content_container {
background-color: #e4e4e4;
float: left;
width: 100%;
background-image: url(images/content_blue_column_bg.gif);
background-repeat: repeat-y;
background-position: right;
}
#content {
background-color: #e4e4e4;
position: relative;
margin-right:253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #000000;
padding-left: 10px;
padding-right: 10px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: medium;
}
#right_column {
background-color: #CC9900;
float: right;
width: 253px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #000000;
}
/*____________________________________________________________*/
* {margin:0; padding:0;} /*Need to lookup this line - prevents the dropdown from sitting off kilt from the nav bar options */
/* the horizontal menu starts here */
div#nav {
width:600px; /* sizes the nav div at a fixed width */
float:left;
background-color:#CCF; /* colors the div */
background-image: url(images/nav_bar_bg.gif);
z-index:10;
}
div#nav li {
float:left; /* causes the list to align horizontally instead of stack */
position:relative; /* positioning context for the absolutely positioned drop-down */
list-style-type:none; /* removes the bullet off each list item */
border:1px solid black; /* creates dividing lines between the li elements */
font-family:Georgia, "Times New Roman", Times, serif;
font-size: medium;
font-weight: bold;
min-width: 126px;
text-align:center;
height:26px;
}
div#nav li:first-child {
border-left:1px solid; /*the first vertial line on the menu */
}
div#nav li:hover {
background-color:#D1C9B9; /*sets the background of the menu items */
}
div#nav a {
display:block;
padding:1px 6px; /*creates space each side of menu item's text */
text-decoration:none; /* removes the underlining of the link */
color:#D1C9B9; /* sets the type color */
}
div#nav a:hover {
color:black;
}
/* the menu ends here */
/* the drop-down starts here */
div#nav ul li ul {
margin:0;
z-index:20; /* puts drop-down on top of div - Safari needs this as menu is 1px higher */
position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
border-right:0; /* stops SCBs drops having two right borders - they inherit the border, IE doesn't */
left:-1px; /*aligns the drop exactly under the menu */
top:28px;
}
#pyt ul li {
background-color:#B3916B;
}
#h ul li {
background-color:#1F2935;
}
#ri ul li{
background-color: #827977;
}
#bn ul li{
background-color: #455D67;
}
div#nav ul li ul li {padding:0;
width:100%; /* makes the list items fill the list container (ul) */
border-left:1px solid; /* three sides of each drop-down item */
border-bottom:1px solid;
border-right:1px solid;
}
div#nav ul li ul li a {
padding:1px .5em;
font-size:small;
text-align:left;
vertical-align:middle;}
div#nav ul li ul li:first-child {
border-top:1px solid; /*the top edge of the dropdown */
}
/* make the drop-down display as the menu is rolled over */
div#nav ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#nav ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */
div#nav ul li:hover a {color:black;}
/* THE HACK ZONE - */
/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#nav ul {
float:left; /* makes the ul wrap the li's */
border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html div#nav ul li ul {
border-top:1px solid #069;
border-left:0px; /* stops the drop inheriting the ul border */
}
/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
@media all and (min-width: 0px){
body div#nav ul li ul {padding-bottom:22px;}
}
/*end Opera hack */
/* END OF HACK ZONE */
/* the drop-down ends here */
/* END OF LIST-BASED MENU */
#h {
background-color: #1F2935;
}
#ri {
background-color: #827977;
letter-spacing: -.06em;
}
body {
background-color: #1F2935;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#pyt {
background-color: #B3916B;
}
#bn {
background-color: #455D67;
}
#content #flash_map {
text-align: center;
border: 2px solid black;
width: 660px;
margin: auto;
}
--------****Still Need Help Here!----------- Unrelatedly, I'm also experiencing the following quirks that I'm not knowledgeable enough to work out quickly, so tips are aprpeciated: ****1) That menu bar is 26 pixels. Is there a way to vertically center the <a> inside the <li>? 2) The word-wrapped drop down options are extending outside of the menu - which of my styles is causing this? How can I solve it? *SOLVED* I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it. This is an example of the problem. Any suggestions? Hey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari. HTML CSS Potentially relevant CSS: Code: body {
margin: 0;
padding: 0;
min-height:0;
}
div.container {
width:100px;
}
div.outerBody {
width:100%;
min-height:0;
}
div.innerBody {
width:100%;
background-image:url("../../images/artist_center/body_bg.jpg");
background-repeat:repeat-x;
min-height:0px;
height:auto !important;
background-color:#cedce5;
text-align:center;
margin: 0;
position:absolute;
}
div.tabContent {
width:945px;
min-height:596px;
border:solid 1px #cccccc;
float:left;
position:relative;
margin-left:14px;
padding-bottom:14px;
margin-bottom:14px;
}
I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on. Thanks for any help! The state titles are nice and bold on my mac browsers -- however, pc browsers won't make them bold. Here is a link to a windows xp screenshot: http://www.browsercam.com/projects/199027/3899787.jpg Any ideas? I am following a tutorial on the book "Stylin with css" by Charles Wike Smith, and in one of the excercises he walks you through the creation of roll over menus. Im almost at the last stage of the tutorial and it works fine on FireFox, but unfortunately I do not what im doing wrong because the fixes for IE are not working properly, I already went through the tutorial and I cant find what Im doing wrong. Any help will be appreciatted, thanks. Here is my excercise, it works on firefox but not on IE: http://www.aplistia.com/unitedTours/test.htm I've found out that IE and Firefox both handle CSS page structure differently. I have a CSS container of width: 740px Height: 960px and IE prints the page with extra spaces at the top and bottom while this same setting is a bit short both width and height wise in Firefox. How do I compensate for both two browsers by using the same CSS file? I don't want to create different CSS for each browser. I have FF 2.0 and IE 7. However, I assumed many of my users will still be using IE6. Any help is appreciated. |
|||||||