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

Fri Apr 20 15:32:03 CEST 2007

Thats right, all you need to do is put out the same content as matches 
your static version, and then it should all work with your css.

If the html IS the SAME then perhaps there is a css clash - turn off all 
the stylesheets except yours.

dave typo wrote:
> 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
>>