why doesnt this work in firefox/chrome yet seems ok ik in ie
IE is broken: do not look at it for guidance.
Height 100% is often misunderstood.
I guess none of the height 100% does anything: remove them: you do not need that for a menu.
Your <li> are floated: the then stop expanding the parent vertically.
Since the <ul> contains nothing else it will collapse to no height.
The text_nav div will also collapse vertically as it has no reference chain leading to an explicitly set height (or to the root), and hence the height will be "auto" (the default). Sinc eit has no inline content: it will collapse.
Since you added a background here, that's obviously not your intend.
There are a number of paths to solve this:
eg: you could not float the <li>, just make them inline instead of blocks.
eg: you could float the <ul> to make it expand around the <li> and move the background there adn then deal with the consequences further on
There are plenty of example menus out there that solve all of it, why not use one of those to start from ?
I'd also try to reduce the number of divs you have.