Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 366
  • Last Modified:

drop downs acting funny

What did I do wrong?  The drop downs under the surgeons button should simply drop down from this button.  But, they are so wide.  This is the only page that the links are on right now.

http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html
http://nsitedesigns.com/nsitedesigns/surgical/surgical.css
0
nsitedesigns
Asked:
nsitedesigns
  • 10
  • 5
  • 4
  • +2
1 Solution
 
Jason C. LevineNo oneCommented:
There are no widths defined for the navigation li tags so it's defaulting to auto and taking the width of the parent container.
0
 
nsitedesignsAuthor Commented:
Can you please tell me which one I need to modify.  I tried a couple and it didn't work.  Drop downs always through me for a loop.


#nav li a:hover, ul#main-nav      li a:focus {border:1px solid gray;color:#000;background:#efefef;}
#nav li ul {padding:0;display:none;}
#nav li:hover ul {display:block;}
#nav li ul li {float:none; }
#nav li ul li a {font-size:0.9em;}
0
 
Jason C. LevineNo oneCommented:
Should be nav li ul li
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
nsitedesignsAuthor Commented:
That was what I modified. Something is still kaflewie.  Any idea?
#nav li ul li {float:none;width:50px;}

http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html
http://nsitedesigns.com/nsitedesigns/surgical/surgical.css
0
 
Jason C. LevineNo oneCommented:
Where did this dropdown code come from?
0
 
nsitedesignsAuthor Commented:
modified suckerfish
0
 
nsitedesignsAuthor Commented:
Can anyone help me with these drop downs?  The buttons appear too wide.  I would think it is an easy fix.

http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html
http://nsitedesigns.com/nsitedesigns/surgical/surgical.css
0
 
Jason C. LevineNo oneCommented:
If you did the modifications, I would revert back the base js and css files and start over.  You may have over-modified something.  If it doesn't work in its pristine state, we have a different set of problems and need to do a different type of troubleshooting.
0
 
nsitedesignsAuthor Commented:
I am hoping someone out there can recommend a solution for me.  I worked on this navigation for hours and hours and don't want to trash it and start over.  I believe there is one small element that needs tweaking.  Anyone else have any thoughts?
0
 
Tom BeckCommented:
I'm seeing this in the source code. There are no sub menu items under surgeons or anywhere else.

<div id="nav">
  <ul>
<li class="firstbutton"><a href="about.html">About</a></li>
        <li> <a href="patientinfo.html">Patient Info</a></li>
           <li><a href="surgeons.html">Surgeons</a></li>
        <li> <a href="services.html">Services</a></li>
        <li> <a href="vnus.html">VNUS Closure</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li class="lastbutton"><a href="index.html">Home</a></li>
  </ul>
</div>
0
 
LZ1Commented:
In FF 4, I'm not seeing any drop downs either in the source or on the page.  
0
 
Ray PaseurCommented:
Did you remove the dropdowns?  I am speaking of this page, where I see none.
http://nsitedesigns.com/nsitedesigns/surgical/surgeons.html
0
 
nsitedesignsAuthor Commented:
Dang, I must have overwritten it.  I will add back in.
0
 
nsitedesignsAuthor Commented:
here is new link:
http://nsitedesigns.com/nsitedesigns/surgical/test.html

I want the drop downs to be the same width as the Surgeons button (or close to it). Right now the mouseover is working good but the nav bar extends out.
0
 
LZ1Commented:
Try adding this to your CSS:
#nav li ul {
    background: #000000; /*Change to whatever color you want */
    display: none;
    float: left;
    padding: 0;
    position: absolute;
}

Open in new window

0
 
nsitedesignsAuthor Commented:
Dang - Works good in all browsers but IE 7.  In IE7 the drop downs shift about 20 pixels to the right and when you mouseover a button, the letters themselves have a background color.  I only want the button to turn white. In IE 7 the button turns white the but doctor's names have a background color of teal.  Weird huh?
0
 
Ray PaseurCommented:
Do you have the DOCTYPE set correctly?
0
 
LZ1Commented:
I'm seeing 2 different #nav ul li a:hover definition.  I would recommend for the drop down's to have a separate section of CSS so that it overrides the previous definitions.

You do have some of the right ones like: #nav li ul li a, but you'll need to specify the hovers as well in order for IE 7 to behave, I believe.
As far as the positioning, you may need to have an IE 7 CSS and add left or right positioning in addition to your position:absolute.
0
 
nsitedesignsAuthor Commented:
I am not sure I understand.  How do I do a css sheet specific to ie?  

I found the duplicate css and removed it.  What do I need to do to the css below:

#nav li a:hover {
text-decoration:none;
background-color:#92b9b6;
color:#000;
    }

ul#main-nav      li a:focus {color:#000;background:#efefef;}
#nav li ul {padding:0;display:none;}
#nav li:hover ul {display:block;}
#nav li ul li {float:none;width:50px;}
#nav li ul li a {font-size:0.9em;}
0
 
LZ1Commented:
Try this:
#nav li a:hover {
text-decoration:none;
background-color:#92b9b6;
color:#000;
    }

ul#main-nav      li a:focus {color:#000;background:#efefef;}
#nav li ul {
    background: #000000; /*Change to whatever color you want */
    display: none;
    float: left;
    padding: 0;
    position: absolute;
}#nav li:hover ul {display:block;}
#nav li ul li {float:none;width:50px;}
#nav li ul li a {font-size:0.9em;}

Open in new window

0
 
nsitedesignsAuthor Commented:
That didn't have any impact.  Drop downs text in button still has coloring around text only in IE7.  This is in addition to the mouseover button color.

It was suggested I create an IE7 specific css.  How do I do that?
0
 
LZ1Commented:
Quite simple really.  In the head of your page where you call your CSS you would add the conditional comments like the code below

More here:
http://www.quirksmode.org/css/condcom.html
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" />
<![endif]-->

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 10
  • 5
  • 4
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now