[TYPO3] LONG: help ! how to get css drop down menus working in typo3 on firefox and internet explorer?

Mon Apr 23 12:12:04 CEST 2007

I can't seem to figure out how to adopt your (Oliver's) example into
my needs, even after looking at how the css is setup

I tried to do it in your method, but in Internet Explorer the list of
links (the top tab items) ended up cascading like the example below
with all the dropdowns hovering in one position.

link
    link
       link
           link
          dropdown

It works fine in Firefox, but I haven't tested it on a typo3 powered page yet.

any advice as to how to solve this, or what im doing wrong?

On 4/22/07, Oliver Rowlands <oliver at liquidlight.co.uk> wrote:
> Hi Dave,
>
> I've implemented pure CSS drop-down menus in Typo3 using the
> 'conditional comments' technique in order to bypass IE's ':hover'
> limitations. Have a look at the primary navigation (#primaryNavigation)
> on the following site:
>
> http://www.spannerworks.com
>
> The advantage of this technique is that it does not require JS at all.
>
> As far as I can remember it works across the board in IE5.5+, Firefox,
> Opera & Safari.
>
> Hope this helps,
>
> Oliver
>
> dave typo wrote:
> > Hello all, I have struggled with drop down menus in typo3. So thank
> > you all in advance for your input and experience.
> >
> > How can i get a css based drop down menu to work in typo3? It works
> > completely fine on a regular html page, but once the page is within a
> > typo3 site the dropdown menu no longer works when a user rolls over
> > the visible list (the dropdown menu does still work in opera, but not
> > in firefox or in internet explorer)
> >
> > is there any code that needs to be placed within typo3 to get the css
> > dropdown rollovers to work? Or is it impossible to use css-based drop
> > down menus within typo3?
> >
> > what I have is a list like this:
> > <body>
> >
> > <div id="total">
> >         <ul id="nav">
> >                    <li class="middle"><a href="#">Resources</a>
> >                       <ul>
> >                           <li><a href="">Annual Report</a></li>
> >                           <li><a href="">Galleries</a></li>
> >                           <li><a href="">Fact Sheet</a></li>
> >                           <li><a href="">Reports</a></li>
> >                           <li><a href="">Financial Reports</a></li>
> >                      </ul>
> >                   </li>
> >        </ul>
> > </div>
> >
> > </body>
> >
> > and then css controlling it (which is placed in the header, but I have
> > written it here second for ease of explanation:)
> >
> > <style>
> >
> > #total {
> > /*this defines the total look of the menu section */
> > font-family:Arial, Helvetica, sans-serif;
> > background:url(background.gif) repeat-x;
> > height:33px;
> > width:769px;
> > font:bold;
> > color:#FFFFFF;
> > display:block;
> >
> > }
> >
> >
> > ul {
> > /*this makes it a horizontal menu and removes bullets */
> >  padding: 0;
> >  margin: 0;
> >  list-style: none;
> >
> > }
> >
> > /* this is a li class that defines a middle element within the  menu */
> > .middle{
> > font-size:10px;
> > font-weight:bold;
> >  float: left;
> >  position: relative;
> >  background:url(tabnohover.gif) repeat-x;
> >  padding: 10px 10px 10px 10px;
> >  border-right:solid 1px #000;
> > }
> > /* and its hover property */
> > .middle:hover, .middle.over {
> >  text-align:left;
> > text-decoration:none;
> > background:url(tabhover.gif) repeat-x;
> > color:#009900;
> >  float: left;
> >  position: relative;
> > }
> >
> > .middle  ul {
> > padding:10px 10px 10px 10px;
> > width:120px;
> >  /*   this hides the block of submenu items underneith the main li items */
> >  display: none;
> >  position: absolute;
> >  top: 3.1em;
> >  left: -1px;
> >  background:url(tabdrop.gif) bottom left no-repeat;
> >  border-right:1px solid #000;
> >
> > .middle:hover ul, .middle.over ul {
> > display: block;
> > /* when hovering over the middle div of the <li>the ul that
> > corresponds underneath appears because the display:none property
> > switches to display:block */
> > }
> >
> > /***************************************************/
> >
> > </style>
> >
> > the .over property of the css allows the rollovers to work via an
> > external javascript file.
> >
> > this works on a regular page, but not on a typo3 page.
> >
> >
> > the hovers of the middle li property works both in firefox and
> > internet explorer WITHIN Typo3, but the block of ul beneath the li
> > property DOES NOT DISPLAY WITHIN Typo3.
> >
> > So, how can I get the
> >
> > .middle.hover ul {
> > display.block;
> > }
> >
> > to work within typo3?? I have no idea why it's not working.
> >
> >
> > thank you for all the help all of you have given me over the past couple
> > months.
> >
> > sincerely,
> >
> > dave
> >
> > p.s.
> > I am open to alternatives, but the hypernavigation exetension does not
> > yeild the correct functionality, nor the look that I am aiming for...
> >
> > p.p.s
> > I have also tried the tutorial on
> > http://www.mcuniverse.com/Horizontal-Bulletlist-Menu.57.0.html but
> > could not get it working either
> >
> > THANK YOU again for reading this long email
>
>
> --
> Oliver Rowlands
> :: Liquid Light ::
>
> E - oliver at liquidlight.co.uk
> W - http://www.liquidlight.co.uk
>
> T - 00 44 (0)845 6 58 88 35
> F - 00 44 (0)845 6 58 44 35
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-english
>