• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • 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
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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