Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007


Tip: Looking for answers? Try searching our database.

What makes vertical dropdown menus ... vertical?

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
paintedjazz@gmail.com - 25 Jun 2007 17:37 GMT
Okay, based on what I had seen others do, I modified their stylesheet
and created a test webpage of a pure CSS dropdown menu.  When I got it
perfected exactly the way I wanted it, I moved it into my production
testing site and voila ... the vertical dropdowns were no longer
vertical but, alas, horizontal.  I did not add the new stylesheet to
my current stylesheet since my original only governs fonts and the new
(2nd) stylesheet only defines the dropdown.  Thanks for any help.
Reply to this Message
Andy Dingley - 25 Jun 2007 18:26 GMT
On 25 Jun, 17:37, paintedj...@gmail.com wrote:
> Thanks for any help.

Thanks for a URL
Reply to this Message
Jim Moe - 25 Jun 2007 20:46 GMT
>  I did not add the new stylesheet to
> my current stylesheet since my original only governs fonts and the new
> (2nd) stylesheet only defines the dropdown.

 Maybe if you add the additional CSS it might work?

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message
paintedjazz@gmail.com - 25 Jun 2007 21:27 GMT
> paintedj...@gmail.com wrote:
> >  I did not add the new stylesheet to
[quoted text clipped - 6 lines]
> jmm (hyphen) list (at) sohnen-moe (dot) com
> (Remove .AXSPAMGN for email)

I wasn't very clear I guess -- I do include the stylesheet for the
dropdown menu (just as a separate file).
Reply to this Message
Jonathan N. Little - 25 Jun 2007 21:48 GMT
>> paintedj...@gmail.com wrote:
>>>  I did not add the new stylesheet to
>>> my current stylesheet since my original only governs fonts and the new
>>> (2nd) stylesheet only defines the dropdown.
>>   Maybe if you add the additional CSS it might work?

 <signature snipped>

> I wasn't very clear I guess -- I do include the stylesheet for the
> dropdown menu (just as a separate file).

No you weren't because you still have not provided a URL to the page in
question. No one can really help you without actually seeing your code!

Signature

Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Reply to this Message
paintedjazz@gmail.com - 26 Jun 2007 00:13 GMT
On Jun 25, 1:48 pm, "Jonathan N. Little" <lws4...@centralva.net>
wrote:
> paintedj...@gmail.com wrote:
> >> paintedj...@gmail.com wrote:
[quoted text clipped - 17 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Because the website is a fileserver with .htaccess to our local subnet
only, I can't actually provide access to keyserved-commercial
software.  However, I can include the html of one page and the
stylesheet (for the menu).  You can find the relevant HTML below by
searching for PulldownMenu.  You can find the stylesheet below by
searching for PulldownMenu again.

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://
www.w3.org/TR/REC-html40/loose.dtd">

<html lang="en-us">
<head>
  <title>EarthScience</title>
  <link href="/surfmaker.css" rel="stylesheet" type="text/css">

  <style type="text/css" media="screen, projection">
     @import "/surfmaker.menu.css";
  </style>

  <script language=javascript      src="/surfmaker.backlink.js"></
script>
</head>

<body bgcolor=beige text=black>
  <div align=center>

<!-- ### BEGIN OUTERMOST TABLE ### -->
<table border=0 cellpadding=1 cellspacing=2 width=576
  background="/SoftwareLibrary/.icons/sedimentary.png">
<tr>
<td colspan=3>

<!-- ### BEGIN TITLE BAR ### -->
<table border=0 cellpadding=15 cellspacing=2
  width=100%>
<tr>
<td align=left colspan=4 nowrap>
  <img src="/SoftwareLibrary/.icons/EarthScience.png"
width=36       height=36       align=center border=0>
  <span class="css_titlebar">
     &nbsp; EarthScience &nbsp;
  </span>
</td>
<td>
</td>
</tr>
</table>
<!-- ###   END TITLE BAR ### -->

<!-- ### BEGIN NAVIGATOR BAR ### -->
<tr>
<td align=left nowrap bgcolor=white valign=top width=100% >
  <table border=0 cellpadding=2 cellspacing=2>
  <tr>
  <td align=left nowrap width=100%>
  <script type="text/javascript">
  <!-- Begin
     var bb = new backlink();
     bb.type = "image";
     bb.src = /SoftwareLibrary/.icons/backbutton.png";
     bb.text = "back button";
     bb.write:();
  //   End -->
  </script>

  <ul id="PulldownMenu">
  <li id="PDM">
  <a><img src="/SoftwareLibrary/.icons/pathbutton.png" border=0></a>
  <ul>
        <li><a href="../SoftwareLibrary">SoftwareLibrary</a></li>
        <li><a href="EarthScience">EarthScience</a></li>
     </ul>

</td>
</tr>
</table>

</td>
<!-- ###   END NAVIGATOR BAR ### -->

<td colspan=3 align=center valign=top bgcolor=white>
<table cellpadding=10 cellspacing=2>

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="Administrative/"
  title=""

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="Administrative">Administrative</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="CampusMaps/"
  title="A single click of the icon will open this folder."

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="CampusMaps">CampusMaps</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="FloorPlans/"
  title="A single click of the icon will open this folder."

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="FloorPlans">FloorPlans</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

</tr>
<tr>

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="ImageGallery/"
  title="A single click of the icon will open this folder."

  <img src="/SoftwareLibrary/.icons/EarthScience.ImageGallery.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="ImageGallery">ImageGallery</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="Logos.For.Posters/"

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="Logos.For.Posters">Logos.For.Posters</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="Patterns.and.Textures.zip">
  <img src="/SoftwareLibrary/.icons/zip.archive.png" align=center
border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="Patterns.and.Textures.zip">Patterns.and.Textures.zip</
a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

</tr>
<tr>

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="Podcasts/"
  title="A single click will <b>download</b> this ZIP file."

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="Podcasts">Podcasts</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="Research/"
  title="A single click of the icon will open this folder."

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="Research">Research</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

<!-- ### BEGIN TABLE DATA ### -->
<td align=center valign=bottom
  width=192 bgcolor=white>

<table border=0 cellpadding=1 cellspacing=1>
<tr>
<td colspan=2 align=center valign=top>
  <a href="Timescales/"
  title="A single click of the icon will open this folder."

  <img src="/SoftwareLibrary/.icons/EarthScience.Generic.Folder.png"
align=center border=0></a>
</td></tr>
<tr><td align=center valign=top>
  <span class="css_filename">
     <a href="Timescales">Timescales</a>
  </span>
</td><td width=1 align=right valign=bottom>
  <img src=/SoftwareLibrary/.icons/transparent.1x36.png border=0
align=right>
</td></tr></table>
</td>
<!-- ###   END TABLE DATA ### -->

</td>
</tr>
<tr>
<td colspan=3>

<!-- ### BEGIN STATUS BAR ### -->
<table border=0 cellpadding=1 cellspacing=2 width=100%>
<tr>
<td nowrap halign=left valign=bottom>
  <span class="css_statusbar">
     Copyright &copy; 2007
  </span>
</td>
<td nowrap halign=right valign=bottom>
  <span class="css_statusbar">
     Last modified: Jun 25, 2007
  </span>
</td>
</tr>
</table>
<!-- ###   END STATUS BAR ### -->

</td>
</tr>
</table>
<!-- ###   END OUTERMOST TABLE ### -->
</div>
</body>
</html>

/* initialize */
#PulldownMenu,
#PulldownMenu *
  {
  margin:0;
  padding:0;
  }

/* menu bar */
#PulldownMenu
  {
  position:relative;
  margin-bottom:3.5em;
  }

/* menu items */
#PulldownMenu li ul
  {
  font-size:8pt;
  cursor:default;
  position:absolute;
  height:auto;
  display:none;
  left:+7px;
  border:1px solid #666;
  padding:1px 1px 1px 1px;
  }

/* menu bar */
#PulldownMenu li
  {
  position:relative;
  width:auto;
  max-width:100%;
  cursor:pointer;
  /* "float-left" below, if commented out, hides menu bar */
  float:left;
  list-style-type:none;
  font-weight:bold;
  }

/* menu items */
#PulldownMenu li ul li
  {
  width:auto;
  padding:0;
  border:none;
  max-width:100%;
  }

/* menu items */
#PulldownMenu li a
  {
  cursor:default;
  color:#000;
  text-decoration:none;
  display:block;
  float:left;
  padding:0 .4em;
  width:7.47em;
  height:2em;
  line-height:2em;
  }

#PulldownMenu li ul li a
  {
  width:auto;
  position:relative !important; /* ie Mac */
  float:left;
  cursor:pointer !important;
  white-space:nowrap;
  line-height:1.7em;
  height:1.7em;
  font-weight:normal;
  border:1px solid #fff;
  color:#000;
  background-position:0 50% !important;
  }

/* :hover */
#PulldownMenu li a:hover,
#PulldownMenu li a:focus,
#PulldownMenu li a:active {color:#666}

/* ***************************************************** */
/* ACTIVE COLORS for both FONT COLOR and MENU BACKGROUND */
/* ***************************************************** */
#PulldownMenu ul a:hover,
#PulldownMenu ul a:focus,
#PulldownMenu ul a:active
  {
  color:#fff !important;
  background:#336fcb;
  max-width:auto;
  }

/* display and z-index for the sub-menus */
#PulldownMenu li:hover ul,
#PulldownMenu li.msieFix ul
  {
  display:block;
  z-index:10;
  top:2em !important;
  }

#PulldownMenu li#PDM {z-index:6;}

.PDM #PulldownMenu li#PDM a {color:#000;}

.PDM #PulldownMenu li#PDM ul {display:block;top:-1000px}

/* background colors */
#PDM,#PDM li a {background-color:#ffffff;}

.PDM #PulldownMenu li#PDM ul li a:focus,
.PDM #PulldownMenu li#PDM ul li a:active
  {position:absolute !important;top:1028px !important;}
Reply to this Message
Andy Dingley - 26 Jun 2007 00:37 GMT
>Because the website is [...]

We don'tcare, we've heard it before. Put it on a web server where we can
see it.

> You can find the relevant HTML below by
>searching for ...

... or maybe not.

What part of "If you expect someone to help you for free, give them one
easy URL and don't make them work for it" are you having th eproblem
with?
Reply to this Message
paintedjazz@gmail.com - 26 Jun 2007 18:34 GMT
Okay, I've made the keyserved apps unavailable via the web. I should
first point you to the test URL in which I succeeded in getting the
output that I desire (in both Safari and Firefox on the Mac):

  http://128.111.108.19/menu.html

with stylesheet at:

   http://128.111.108.19/menu.css

The URL of my problem vertical menu is:

  http://earth.geol.ucsb.edu/SoftwareLibrary/EarthScience

The stylesheet is:

  http://earth.geol.ucsb.edu/surfmaker.menu.css

I've since discovered that the horizontal menu in Safari (which is
supposed to be vertical) is not even horizontal in Firefox.  In
Firefox, the list items pile on top of each other. Thanks for any help.
Reply to this Message
Jim Moe - 26 Jun 2007 19:32 GMT
> The URL of my problem vertical menu is:
>
>    http://earth.geol.ucsb.edu/SoftwareLibrary/EarthScience

 Perhaps you should clean up all of the validation errors first.
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fearth.geol.ucsb.edu%3A1
6080%2FSoftwareLibrary%2FEarthScience%2F>

Signature

jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Reply to this Message
Andy Dingley - 26 Jun 2007 20:39 GMT
>   http://128.111.108.19/menu.html

Lose the XHTML

Fix the validation and well-formedness errors

If you're expert, perfect and have a reason then _think_ about XHTML.
Otherwise use HTML 4.01 Strict

>   http://earth.geol.ucsb.edu/SoftwareLibrary/EarthScience

Use HTML 4.01 Strict

Lose the HTML 3.2 markup

Fix the validation and well-formedness errors

Only then start to worry about CSS problems.

If you're expert, working on lots of well-established legacy pages and
being paid for it then think about using HTML. 4.01 Transitional
Otherwise use HTML 4.01 Strict
Reply to this Message
Ben C - 26 Jun 2007 21:30 GMT
> Okay, I've made the keyserved apps unavailable via the web. I should
> first point you to the test URL in which I succeeded in getting the
[quoted text clipped - 17 lines]
> supposed to be vertical) is not even horizontal in Firefox.  In
> Firefox, the list items pile on top of each other. Thanks for any help.

Hard to see why Firefox is doing that, could even be a bug, but fix the
validation errors first.

As for Safari, you could always give the second <li> clear: left, but I
don't understand why you need to float these <li>s anyway, or the <a>s
inside the <li>s. It looks like you're using float far more than you
need to.

Why is Safari showing the two list items next to each other? It must
have an idea that more width is "available". The available width in this
case is rather complicated since you have several nested shrink-to-fit
containers, all inside a <td> with "width: 100%". But who knows, perhaps
Safari is producing a different DOM tree from your broken HTML in the
first place.
Reply to this Message
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage
Start New Thread
Enable EMail Alerts
Rate this Thread



©2009 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.