css alert box help

[blwow]

Hi everyone I found this useful alert box on this site (rollover A Pop-up!!):
http://www.cssplay.co.uk/menu/alert.html#nogo

I am trying to change the span tag to a div because I have added an OL / LI inside the span tag and I have been told I cant use an OL and LI's within the span tag so I need to change the span to a div.

This is where I am testing this div alert pop up (rollover Need Help? to see the alert box effect):
http://www.newmedia.lincoln.ac.uk/je...ests/test.html

Now that I have changed the span to a div I am experiencing some problems. The first problem is that it won't even work in IE6 any more? The other obvious problem is that the text that should be inside the alert box displays on screen underneath Need help? and then it disappears when you roll over Need help?

I am testing this in FF, IE6, IE7 and Opera.

Please can someone help me fix this so it works in all browsers?

[insanemonkey]

ok this is what you have to do...
one problem is that your code looks like this

<div id="popup" href="#">Need help?
<div id="popbox">
<div id="poptop">&nbsp;&nbsp;test test </div>
<ol><li class="quicktime_installation">test test </li>
<li>test test <acronym>"test"</acronym> test test <acronym>"test"</acronym> test test test test test test test test </li>
<li>test test <acronym>"test "</acronym> test test test test test test test test test test test test </li>
<li>test test test test test test test test test test test test </li></ol>
<div id="popcodec">&nbsp;&nbsp;test test </div>
<ol class="codec_installation"><li>test test </li>
<li>test test <acronym>"test"</acronym> test test  <acronym>"test"</acronym>test test test test test test test test </li>
<li>test test test test test test test test test test test test </li>
<li><strong>test test:</strong> test test test test test test test test test test test test test test test test test test </li></ol>
</div>
</div>

</div>

andyou have all three divs together so its trying to send it all together like its stuck together, this is what you have to do..

<a id="popup" href="#nogo">
A Pop-up!!
<b>
<div id="popbox" title="This is my attempt at producing a javascript type alert box">
<div id="poptop">&nbsp;&nbsp;TITLE</div>
<div id="warning"></div>
<div id="warningbox" title="Warning viewing this made blow your eyes!">!</div>
<div id="x" title="No it doesn't close the window">X</div>
All the text you can imagine! I love lucy haha
</span>
</b>

</a>

thats what i got from the page, all you have to do is edit your css not the div stuff.... thats why its all screwed up... anymore problems let me know and show your css and ill help you...

[blwow]

the code you have provided doesnt make sense.. there is a closing </span> tag but no opening <span> and when i have tried to make yours work it doesnt..

click here to see my attempt at making yours work:
http://www.newmedia.lincoln.ac.uk/je...sts/test2.html
If you have a link to show your working example i would like to see please.

I would like to get my first attempt to work because i have styled the alert box to how i need it to look:
http://www.newmedia.lincoln.ac.uk/je...ests/test.html

I have added an OL and LI inside the div id popbox but all the info i want to show in the alert box appears underneath the rollover Need Help? this then disappears when you rollover Need help? and is in the correct place showing in the alert box which i have styled to look how i want. I just want the alert box to show when the user rolls over Need Help?

This is my CSS:

div#popup:visited {color:#000; text-decoration:none;}
div#popup {color:#000; text-decoration:none; position:relative;}
div#popup b {display:block; position:absolute; left:0; top:0;}
div#popup span {display:none;}
div#popup:hover {color:#000; cursor:default;}
div#popup:hover div#popbox {display:block; position:absolute; top:-200px; left:-155px; width:400px; background-color:#fff; color:#000; border:2px solid #30327e; text-align:left; font-family:verdana; font-size:11px;}
div#popup:hover div#popbox2 {display:block; position:absolute; top:-150px; left:-155px; width:400px; background-color:#fff; color:#000; border:2px solid #30327e; text-align:left; font-family:verdana; font-size:11px;}
div#popup:hover div#poptop {display:block; position:absolute; top:0; left:0; width:400px; height:18px; color:#00c; background-color:#90aef8; color:#fff; text-align:left; font-weight:bold; border-bottom:2px solid #000066; line-height:20px;}
div#popup:hover div#popcodec {display:block; position:absolute; left:0; width:400px; height:18px; color:#00c; background-color:#90aef8; color:#fff; text-align:left; font-weight:bold; border-bottom:2px solid #000066; border-top:2px solid #000066; line-height:20px;}
acronym {color:#123; border-bottom:2px dotted #c00;}

ol 	{
margin: 0px;
padding-left:25px;

}
li.quicktime_installation {
margin:0px;
padding-top:18px;
}	
ol.codec_installation {
margin: 0px;
padding-left:25px;
padding-top:25px;
}

HTML:

<div id="popup" href="#">Need help?
<div id="popbox">
<div id="poptop">&nbsp;&nbsp;test test </div>
<ol><li class="quicktime_installation">test test </li>
<li>test test <acronym>"test"</acronym> test test <acronym>"test"</acronym> test test test test test test test test </li>
<li>test test <acronym>"test "</acronym> test test test test test test test test test test test test </li>
<li>test test test test test test test test test test test test </li></ol>
<div id="popcodec">&nbsp;&nbsp;test test </div>
<ol class="codec_installation"><li>test test </li>
<li>test test <acronym>"test"</acronym> test test  <acronym>"test"</acronym>test test test test test test test test </li>
<li>test test test test test test test test test test test test </li>
<li><strong>test test:</strong> test test test test test test test test test test test test test test test test test test </li></ol>
</div>
</div>

[insanemonkey]

oops its supposed to be div, like you said you switched from span to div, change it to div,

But i do not know how you changed it becuase on the other page its totally different...

That site that you got it from uses this css for it...

<style type="text/css">

#info {height:300px; position:relative;}
#adsie {position:absolute; bottom:0; left:0; z-index:1;}
#info:hover {background-color:#fff;}

a#popup:visited {color:#000; text-decoration:none;}
a#popup {color:#000; text-decoration:none; position:relative; left:75px; font-weight:bold;}
a#popup b {display:block; position:absolute; left:0; top:0;}
a#popup span {display:none;}
a#popup:hover {color:#000; cursor:default;}
a#popup:hover #popbox {display:block; position:absolute; top:-40px; left:-55px; width:150px; height:80px; background-color:#fff; color:#000; border:2px solid #04e; text-align:left; font-family:verdana; font-size:11px; padding-left:40px; padding-top:20px;}
a#popup:hover #poptop {display:block; position:absolute; top:0; left:0; width:190px; height:18px; color:#00c; background-color:#04e; color:#fff; text-align:left; font-weight:bold; border-bottom:4px ridge #00f; line-height:20px;}
a#popup:hover #warningbox {display:block; position:absolute; top:29px; left:5px; width:30px; height:27px; background-color:transparent; text-align:center; font-size:25px; font-weight:bold; font-family:serif; overflow:hidden;}
a#popup:hover #warning {display:block; position:absolute; top:30px; left:5px; width:0px; height:0px; border-left:15px solid #fff;border-right:15px solid #fff;border-bottom:25px solid #ee0; border-top:0px; overflow:hidden;}
a#popup:hover #x {display:block; position:absolute; top:0px; left:172px; width:15px; height:15px; border:1px solid #fff; background-color:#c00; color:#fff; font-weight:bold; text-align:center; overflow:hidden; cursor:pointer;}
acronym {color:#123; border-bottom:2px dotted #c00;}


</style>

So try this and see if it works, it should....

[blwow]

i know what code that site uses coz i modified it to the 'test' url i have provided in my first post..... i dont think you know how to fix the modified version because your not teaching me nothing new.