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

Fri Apr 20 15:05:55 CEST 2007

so then you're saying there shouldnt be any additional code to add
within typoscript to get it to work? that this is a problem with my
structure of how it is working?

(it works fine in opera when powered by typo3)

On 4/20/07, Tyler Kraft <headhunterxiii at yahoo.ca> wrote:
> Typo3 only puts out content so if you've constructed your menu correctly
> then it will work.
>
> First check that the html is exactly the same as your static version,
> then check to make sure that the related css and javascript files are
> being included (actually included and that the path is right)
>
>
>
> 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
> _______________________________________________
> TYPO3-english mailing list
> TYPO3-english at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-english
>