Placing boxes beneath BrotherCake's UDM4 navigation

Attempting to position boxes beneath navigation without absolute position

[grfxgirl]

I have a site which uses BrotherCake's UDM4 navigation. Using absolute positioning, I am able to place items below the navigation but there is overlap in some browsers and when text size is increased. When I try to position the boxes within a div that wraps the UDM4, they stack over the navigation.

Basically I need some hints on placing items under the UDM4.

[html sample]

<ul id="udm" class="udm">
<li><a href="index.htm">Home</a>
<ul style="width:12.5em">
<li><a href="blah/index.htm">Blah</a></li>
</ul>
</li>
</ul>
</div>
<div id="boxes">
<div id="work">
<h4>Nifty Title</h4>
<p><a href="nifty.htm">Nifty Link</a></p>
</div>
<div id="info">
<h4>Information Title</h4>
<p>Information Copy</p>
</div>
</div>

[css sample]

#boxes {
position: absolute;
left: 52px;
top: 426px;
width: 140px;
}
* html #boxes {
top: 388px;
}
#work {
background: #f7efe2;
border: 1px solid #e39e3e;
font-size: 80%;
position: relative;
width: 140px;
}
#work h4 {
color: #187f47;
font-family: Arial, Lucida, Helvetica, sans-serif;
font-size: 95%;
line-height: normal;
padding-top: 6px;
}
#work p {
line-height: 140%;
padding: 4px 4px 0 4px;
}
#info {
background: #ecf3eb;
border: 1px solid #accdb8;
font-size: 80%;
margin-top: 8px;
position: relative;
width: 140px;
}
#info h4 {
color: #187f47;
font-family: Arial, Lucida, Helvetica, sans-serif;
font-size: 95%;
line-height: normal;
padding-top: 10px;
}
#info p {
line-height: 140%;
}

[The UDM4 css out of the box with positioning/size tweaking]

Thanks.

[a0731370]

Are you using Internet Explorer to test
this out or Fire Fox?

[grfxgirl]

I have checked on IE6, IE7 beta, Firefox on windows, Firefox on linux, Opera 9 on windows, and Netscape 8.1 on windows. Being able to place the boxes beneath the navigation relatively positioned would negate my need to cross browser hack.