Problem with aligning UL Property

[awl19]

Hello WDF Community!

Today I come to you with a problem related to my website. I have decided to use JS in order to run alot of the functions on my website that would not be possible without it or wouldn't look as smooth. One of those is a rollover effect (credited here: http://www.shopdev.co.uk/blog/animated-menus-using-jquery/) Now, I have successfully made the roll-over effect active on my navigation, however I can't figure out how to align it correctly to the rest of my website.

Hope this is okay, I will be providing a link to my website page I am working on so everyone can see what I am dealing with.

http://andrewliesenfeld.com/navigation2.html
http://andrewliesenfeld.com/css.css

BTW if anyone has suggestions on aligning the text without using the "position: *value*" - "top/left/right/bottom: *value*" it would be greatly appreciated.

Thanks,
Andrew

[bradgreens]

Your graphics are split into different table cells, which is pretty much a poor layout choice. Aside from that, looking at the second cell, which has...

<td colspan="2">
<img height="59" width="65" alt="" src="images/wb-1_13.jpg"/>
</td>

menu should be moved over and styled accordingly...

<td colspan="2">
<img height="59" width="65" alt="" src="images/wb-1_13.jpg" style="float:left;"/><ul id="menu" style="padding:0;margin:18px 0 0;">
<li><a class="home" href="index.html"><span style="opacity: 0;"/></a></li>
<li><a class="contact" href="contact.html"><span style="opacity: 0;"/></a></li>
<li><a class="about" href="about.html"><span style="opacity: 0;"/></a></li>
</ul>
</td>

The styles are obviously inline. You'll want to move those to your .css file

Not sure where right right border-piece is, and I didn't check cross-browser, just FireFox.

gl