@Mike: sorry, don't know why the images aren't displaying. but 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
Problem in Firefox...
How it suppose to look...
Reason:
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.
Solution:
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>
4
5 <div id="bottom_element">
6 /* --- whatever goes here -- */
7 </div>
8
This will change to:
1 <div id="menu">
2 /* --- menu stuff here -- */
3 </div>
4
5 <div style="clear:both; float: none;"></div>
6
7 <div id="bottom_element">
8 /* --- whatever goes here -- */
9 </div>
10
Hope this helps someone!
Cheers!
shalan