当定位div容器白色背景时

Question

我有这张照片

它在灯箱中的内联iFrame中打开（我使用colorobx）。 内联iFrame包含以下内容：

<div style="display:none">
    <div id="trivia_helecho">

    <!-- HTML PART OF QUIZ-->
    <p class="question">1. What is the answer to this question?</p>        

    <ul class="answers">            
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>          
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>            
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>            
    <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>       
    </ul>  
    </div>        

    <div id="results">            
    Show me the answers!       
    </div>
    </div>

它是一个测验，它使用外部链接的JS脚本运行。 我希望按钮和文本在speekinbubble中定位。 这样做，我在外部链接样式表中进行了定位。

.question {
    position: absolute;
    right: 35px;
    top: 40px;
}

.answers {
    position: absolute;
    right: 155px;
    top: 65px;

这就是我如何为Lightbox包含backgroundpicture：

 <style>
 #trivia_helecho {
 background-image: url("paramo_plantas_preguntas_pajonal.png");
 }
 </style>

只需将位置添加到.question即可。没有“白色的东西”。但是将答案移到右边会添加这些白条。我已经为我的回答课程删除了<ul> tag。这删除了白色条，但定位不再起作用。从<p>中取出<ul>会再次产生白条。 它们来自哪里？

请求JAVASCRIPT

这是在我的HTML文档中。

<script>
//PRELOAD THE IMAGES
originale = new Image(698, 233);
originale.src = "paramo_plantas_sin_selecion.png";

helecho = new Image(698, 233)
helecho.src = "paramo_plantas_selecion_pajonal.png";

//JS FUNCTION TO HIGHLIGHT THE PICTURES. IMAGEFLIP IS USED HERE
function resaltarHelecho() {
    document.getElementById('juego_paramo').src = helecho.src;
    return true;
}

function originalJuego() {
    document.getElementById('juego_paramo').src = originale.src;
    return true;
}

//COLORBOX
$(function(){
$("#paramo area").colorbox({width:"698px", innerHeight:"400px", inline:true});
});
</script>

这就是测验，让我的无线电按钮互动。链接在HTML文档的头部。

$(document).ready(function() 
{    $("#results").click(function() {                

if (!$("input[name=q1]:checked").val()             
) {            
alert("You're not done yet!");        
}        

else {            
var cat1name = "1";            
var cat2name = "None";
var cat1 = ($("input[name=q1]:checked").val() != "a")
var cat2 = (!cat1); 
var categories = [];   
if (cat1) { categories.push(cat1name) };            
if (cat2) { categories.push(cat2name) };
var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';                     
$("#categorylist").text(catStr);                        
$("#categorylist").show("slow");
if (cat1) { $("#category1").show("slow"); };            
if (cat2) { $("#category2").show("slow"); };            
{ $("#closing").show("slow"); };
}

//TO OPEN THE RESULTS IN A NEW WINDOW
{            
alert(catStr);        
} 
    });});