Forum Moderators: not2easy
It was working fine (still is on all pages except the one page I'm testing something different on) in both FF and IE. However, I tried moving some buttons around and it seems that one of the buttons has lost it's dropdown ability in FF. It works fine in IE, but I have double and triple checked everything to see why it's not working in FF and I can't figure it out.
I assume it would be easier to understand if you could see my pages, so if I can add the link here, please let me know. For now, here is my code.
Header
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>company</title>
<link href="css/global.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/globalSettings.js" type="text/javascript"></script>
<script src="js/backgroundposition.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#marketing_container").hover(
function () {
$("#marketing_dropdown").slideDown(slideDownSpeed);
},
function () {
$("#marketing_dropdown").slideUp(slideUpSpeed);
}
);
$("#billing_container").hover(
function () {
$("#billing_dropdown").slideDown(slideDownSpeed);
},
function () {
$("#billing_dropdown").slideUp(slideDownSpeed);
}
);});
</script>
</head>
body code - this is the code for the page that is NOT working in FF.......
<!-- Navigation please look at the services container and its contents to understand how to add more -->
<div id="marketing_container">
<div id="marketing_button"><a href="marketing_solutions.html" target="_self" title="Marketing Solutions"></a></div>
<div id="marketing_dropdown">
<ul>
<li><a href="marketing_student_recruitment.html" target="_self" title="Student Recruitment Marketing">Student Recruitment</a></li>
<li><a href="marketing_non_profit_marketing.html" target="_self" title="Non-Profit">Non-Profit</a></li>
<li><a href="marketing_insurance_marketing.html" target="_self" title="Insurance Marketing">Insurance Marketing</a></li>
<li><a href="marketing_solutions.html" target="_self" title="Commercial">Commercial</a></li>
<li><a href="services_marketing.html" target="_self" title="Marketing Services">Marketing Services</a></li>
</ul>
</div>
</div>
<div id="billing_container">
<div id="billing_button"><a href="billing_statements.html" target="_self" title="Billing Statements"></a></div>
<div id="billing_dropdown">
<ul>
<li><a href="services_billing.html" target="_self" title="Billing Services">Billing Statements</a></li>
</ul>
</div>
</div>
<div id="events_container">
<div id="events_button"><a href="currentevents.html" target="_self" title="Current Events"></a></div>
</div>
<div id="contact_container">
<div id="contact_button"><a href="contact_us.html" target="_self" title="Contact Us"></a></div>
</div>
<div id="client_container">
<div id="client_button"><a href="login.html" target="_self" title="Home"></a></div>
</div>
<!-- End Navigation -->
body code - this is the code for the page that IS working in FF.......
<!-- Navigation please look at the services container and its contents to understand how to add more -->
<div id="marketing_container">
<div id="marketing_button"><a href="marketing_solutions.html" target="_self" title="Marketing Solutions"></a></div>
<div id="marketing_dropdown">
<ul>
<li><a href="marketing_student_recruitment.html" target="_self" title="Student Recruitment Marketing">Student Recruitment</a></li>
<li><a href="marketing_non_profit_marketing.html" target="_self" title="Non-Profit">Non-Profit</a></li>
<li><a href="marketing_insurance_marketing.html" target="_self" title="Insurance Marketing">Insurance Marketing</a></li>
<li><a href="marketing_solutions.html" target="_self" title="Commercial">Commercial</a></li>
</ul>
</div>
</div>
<div id="billing_container">
<div id="billing_button"><a href="billing_statements.html" target="_self" title="Billing Statements"></a></div>
</div>
<div id="services_container">
<div id="services_button"><a href="services_marketing.html" target="_self" title="Services"></a></div>
<div id="services_dropdown">
<ul>
<li><a href="services_marketing.html" target="_self" title="Marketing Services">Marketing</a></li>
<li><a href="services_billing.html" target="_self" title="Billing Services">Billing</a></li>
</ul>
</div>
</div>
<div id="contact_container">
<div id="contact_button"><a href="contact_us.html" target="_self" title="Contact Us"></a></div>
</div>
<div id="client_container">
<div id="client_button"><a href="login.html" target="_self" title="Home"></a></div>
</div>
<!-- End Navigation -->
and here is my css for the nav
/* ALL STYLING FOR NAVIGATION */
#nav {
position: relative;
width: 830px;
margin: auto;
}#client_button {
position: relative;
float: left;
background-image: url(../exportmedia/client_login_button.gif);
background-repeat:no-repeat;
width: 163px;
height: 29px;
}
#billing_button {
position: relative;
float: left;
background-image: url(../exportmedia/billing_button.gif);
background-repeat:no-repeat;
width: 164px;
height: 29px;
}
#marketing_button {
background-image: url(../exportmedia/marketing_button.gif);
background-repeat:no-repeat;
width: 162px;
height: 29px;
}
#services_button {
background-image: url(../exportmedia/services_button.gif);
background-repeat:no-repeat;
width: 163px;
height: 29px;
}
#contact_button {
position: relative;
float: left;
background-image: url(../exportmedia/contact_us_button.gif);
background-repeat:no-repeat;
width: 164px;
height: 29px;
}
#events_button {
position: relative;
float: left;
background-image: url(../exportmedia/current_event_button.gif);
background-repeat:no-repeat;
width: 164px;
height: 29px;
}
#client_button a {
width: 100%;
height: 100%;
display: block;
}
#billing_button a {
width: 100%;
height: 100%;
display: block;
}
#marketing_button a{
width: 100%;
height: 100%;
display: block;
}
#services_button a{
width: 100%;
height: 100%;
display: block;
}
#contact_button a{
width: 100%;
height: 100%;
display: block;
}
#events_button a{
width: 100%;
height: 100%;
display: block;
}
#client_container {
position: relative;
float:left;
width: 163px;
height: 68px;
z-index: 1;
}
#billing_container {
position: relative;
float:left;
width: 164px;
height: 25px;
z-index: 1;
}
#marketing_container {
position: relative;
float:left;
width: 162px;
height: 120px;
z-index: 1;
}
#services_container {
position: relative;
float:left;
width: 163px;
height: 70px;
z-index: 1;
}
#contact_container {
position: relative;
float:left;
width: 164px;
height: 70px;
z-index: 1;
}
#events_container {
position: relative;
float:left;
width: 164px;
height: 70px;
z-index: 1;
}
/* DROP DOWN STYLING */
#services_dropdown,
#contact_dropdown,
#billing_dropdown {
display: none;
height:25px;
z-index: 1;
font-size:12px;
}
#marketing_dropdown {
display: none;
height:100px;
z-index: 1;
font-size:12px;
}
#services_dropdown li,
#contact_dropdown li,
#billing_dropdown li,
#marketing_dropdown li{
list-style-type: none;
padding: 0;
margin-bottom: 5px;
margin-left: 8px;
color: white;
font-family:Arial, sans-serif;
font-size:12px;
list-style-type: none;
z-index: 1;
}
#services_dropdown ul li a,
#billing_dropdown ul li a,
#contact_dropdown ul li a,
#marketing_dropdown ul li a,{
text-decoration: none;
color: black;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight:600;
}
/*#services_dropdown li a:hover,
#contact_dropdown li a:hover,
#billing_dropdown li a:hover,
#marketing_dropdown li a:hover{
text-decoration: none;
color: white;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight:600;
} */
#contact_dropdown ul,
#marketing_dropdown ul{
width: 160px;
list-style-type: none;
padding: 0;
margin: 0;
background-color:#3366FF;
height: 100px;
}
#services_dropdown ul,
#billing_dropdown ul{
width: 160px;
list-style-type: none;
padding: 0;
margin: 0;
background-color:#3366FF;
height: 25px;
}
/* END DROP DOWN STYLING */
/*END STYLING FOR NAVIGATION */
Can anyone please help me figure this out? Thanks
Generally it's best to isolate the problem and post a short, simple test case - you'll get more replies if people don't have to plough throw lots of possibly irrelevant code just to find the relevant bits.
See the Guide to posting HTML and CSS [webmasterworld.com] and the CSS Troubleshooting Refresher [webmasterworld.com]
Which menu item isn't working? Compare the code for that menu item with one that does work - what's the difference?
There really is no difference at all, I've already compared them...the only differences are in the size of the container boxes and that has nothing to do with the button not working.
Also, like I said in the original post, the button works fine in IE, just not in FF...so it does work....but I can't figure out why it's not working in this browser...especially since the other button is working.
Can I post links here so that you or anyone can see what I'm talking about? Thanks.
You still haven't posted which piece of code is not working, which makes trying to solve the problem quite hard... Can you make a short, simple test case with one item working and one not? It may even help you find the solution yourself :)
This is the one NOT working in FF...
#services_dropdown ul,
#billing_dropdown ul{
width: 160px;
list-style-type: none;
padding: 0;
margin: 0;
background-color:#3366FF;
height: 25px;
}
But it IS working in IE.
This is the button next to it that works in both IE and FF
#contact_dropdown ul,
#marketing_dropdown ul{
width: 160px;
list-style-type: none;
padding: 0;
margin: 0;
background-color:#3366FF;
height: 100px;
}
I certainly don't think this is enough to determine what the problem is...if it were, I would have figured it out already. This is why I added the other coding, (the scripting in my head tags, the nav css and the body html so that you can see everything I'm using to help pinpoint the problem. I think a small piece of the code is useless if you can't see what's going on around it.
I cannot make a short simple test because of the complexity involved in the scripting...it's using jquery and I didn't write it, the gentleman who held my position prior to me did.
Looking at your HTML it appears you've removed the #billing_dropdown HTML, and added HTML for #services_dropdown (?)
The JQuery code is still referring to #billing_container and #billing_dropdown. I'm not sure why this would work in IE. But you could try changing your JQuery code to use #services_container and #services_dropdown
They wanted to move the items from the services and disperse them into the marketing and billing buttons...essentially, taking the drop down away from the services button and adding it to the billing button...while also adding a current events button.
I moved the fields necessary from services to billing, which is why jquery is referring to billing. (That is why billing is sharing the css with services). I changed all of the coding (for only this page...not other pages) to reflect that the billing button now has the dropdown, NOT the services button.
The changes took fine in IE, but are not working in FF. That is why there is no longer a services_container.
Here is a snippet of my html from the other pages where the dropdown is only on the marketing and services button.
<div id="nav">
<div id="marketing_container">
<div id="marketing_button"><a href="marketing_solutions.html" target="_self" title="Marketing Solutions"></a></div>
<div id="marketing_dropdown">
<ul>
<li><a href="marketing_student_recruitment.html" target="_self" title="Student Recruitment Marketing">Student Recruitment</a></li>
<li><a href="marketing_non_profit_marketing.html" target="_self" title="Non-Profit">Non-Profit</a></li>
<li><a href="marketing_insurance_marketing.html" target="_self" title="Insurance Marketing">Insurance Marketing</a></li>
<li><a href="marketing_solutions.html" target="_self" title="Commercial">Commercial</a></li>
</ul>
</div>
</div>
<div id="billing_container">
<div id="billing_button"><a href="billing_statements.html" target="_self" title="Billing Statements"></a></div>
</div>
<div id="services_container">
<div id="services_button"><a href="services_marketing.html" target="_self" title="Services"></a></div>
<div id="services_dropdown">
<ul>
<li><a href="services_marketing.html" target="_self" title="Marketing Services">Marketing</a></li>
<li><a href="services_billing.html" target="_self" title="Billing Services">Billing</a></li>
</ul>
</div>
</div>
This is how it was PRIOR to me switching everything to billing.
Does this make sense to you? Thank you for your help.
sigh
