Popup positioning changing question.....

[diesel13]

Hi! I just started learning about code a few months ago and managed to put together 3 css boxes that contain the numbers 1,2 and 3. When the numbers are hovered over, they show a popup of text ..... as can be seen here: http://www.ipagio.com/blue1/index2.html . I've learned that if a different resolution is used than the position of the text changes....

The CSS I'm using is for the 3 boxes and the span tag for the popup are:


*******
.menu1325{margin:0; padding:0; float:left; font:bold 26px Arial; width:270px; background-color:fff; border-top-color:#000; margin-right:10px; margin-left:15px; margin-top:0px; margin-bottom:5px}
.menu1325 li{display:inline}
.menu1325 li a{float:left; color:#153564; padding:0px 22px; text-decoration:none; border-bottom:#153564 8px solid; border-right:#153564 8px solid; border-left:#153564 8px solid; border-top:#153564 8px solid; margin-right:7px; margin-top:0px}
.menu1325 li a:hover{color:#6996bd; border-bottom:#6895bc 8px solid; border-right:#6895bc 8px solid; border-left:#6895bc 8px solid; border-top:#6895bc 8px solid; margin-right:7px; background-color:#F0F0F0; margin-top:0px}
.menu1325 li .current{color:#6996bd; border-bottom:#6895bc 8px solid; border-right:#6895bc 8px solid; border-left:#6895bc 8px solid; border-top:#6895bc 8px solid; margin-right:7px; background-color:#F0F0F0; margin-top:0px}
.menu1325 a span{display:none}
.menu1325 a:hover span{display:block; position:absolute; top:166px; left:0; width:325px; padding:5px; margin:272px; z-index:100; text-align:left; background:white; font:14px Arial; color:#606060 }

**********
The html is:

*******
<ul align class="menu1325">
<li><a href="#" class="current">1<span >#1 Consolidating debt is the first step in improving credit scores and repairing credit. Paying off unpaid debts and reducing your credit utilized are two important steps and beginning a new life of financial well-being.</span></a></li>
<li><a href="#" >2<span >#2 Getting cash out for home improvements is not only an investment in your home and lifestyle today, but can help you reap greater rewards when you sell your home in the future. Maintaining your home today will reduce repair bills tomorrow. </span></a></li>
<li><a href="#">3<span >#3 Converting your adjustable rate mortgage to a fixed rate mortgage can give you the security of knowing where your monthly payments will be every month. Fixed rate mortgage rates are still very competitive to adjustable rate mortgage rates. </span></a></li></ul>

******
I tried changing from absolute to relative positioning, but than the boxes started going haywire.... i'm surprised I was even able to get the boxes, let alone the popups going in the first place as I'm so new to this stuff, so there are probably major errors in my "code".... basically I just hacked away for hours until something seemed to work...

I truly appreciate anybody's feedback on possible solutions...hopefully I've given all the info you need.......

[diesel13]

I'm not getting any responses, but really need the problem fixed, so does anyone want to volunteer to fix the issue for money? I will gladly hire somebody with more knowledge than myself to fix the issue and I'm pretty sure it will take you less than five minutes... let me know!!!

[Veronica]

I'm not sure if this will help. But if you put an absolutely positioned box inside a relatively positioned box, the absolutely positioned box moves with that containing box, even as the resolution changes. (or should) It's confusing, but it's like sitting still in a moving car; your position stays the same within the car, but moves as the car does.

It doesn't look as it the ul containing the span has a position. So try adding position:relative for the ul menu 1325. And see if that helps.

[diesel13]

Gotcha... that worked, thank you so much... I knew it was something simple... just didn't know what!