Vertical Menu not rendering in Firefox

Mar 19, 2008 at 7:54 PM
Hi everyone!

Ok, this issue has been troubling me for days now, and I just cant seem to get this right. Using the CSS Adapters, I have a vertical Menu which renders fine usually, but as soon as I introduce some content directly below it, it gets messed up in Firefox...the content that supposed to appear below the menu, now gets "layered" underneath the menu, the menu is literally on top of it. It renders fine in IE6 & IE7 though.

I know this is a CSS issue, but I cant figure this out. If someone has experienced this before, and has a solution, please let me know. I didn't want to include my current styling here, but I will make it available along with my html markup if need be.

Thank you!

Mar 20, 2008 at 4:31 PM
OK...problem sorted out!! and what a stupid error on my part. To help those who might experience this, let me explain the problem and then the solution

Problem (Firefox only):

* CSS Adapted vertical menu, with sub-menu items
* any element in HTML that is laid out below the a menu
* when page renders, the bottom element apperears halfway underneath (literally) the menu


Now I mentioned above that the bottom element appeared "halfway" underneath the menu...which is at the same point that my sub-menu items began. So when I began digging into the adapter CSS more carefully, I realised that Sub-menu items have a css "float" property. Therefore, in firefox, any block elements below any other element with a float property will not render properly.


This float needs to be "cleared" before any other element is written in markup. So if your markup was as follows:

1 <div id="menu">
2 /* --- menu stuff here -- */
3 </div>
5 <div id="bottom_element">
6 /* --- whatever goes here -- */
7 </div>

This will change to:

1 <div id="menu">
2 /* --- menu stuff here -- */
3 </div>
5 <div style="clear:both; float: none;"></div>
7 <div id="bottom_element">
8 /* --- whatever goes here -- */
9 </div>

Hope this helps someone!