Home/ Questions/Q 8609447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T03:52:54+00:00

I have a web page that also has a popup where the user can

  • 0

I have a web page that also has a popup where the user can search. I naturally want to make the user able to print the search results. But when I try the use case and print a search result from the popup that is supposed to be included with the page, the popup becomes transparent. Could you tell me what to do to make the popup print as not transparent?

The beginning of my HTML is

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <link href="css_js/styles.css" rel="stylesheet" type="text/css">
    <link href="css_js/positions.css" rel="stylesheet" type="text/css">
    <link href="css_js/dialog_box.css" rel="stylesheet" type="text/css">
    <link href="css_js/floats.css" rel="stylesheet" type="text/css">
    <script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js"
        type="text/javascript"></script>
    <script language="JavaScript1.2" src="css_js/sorttable.js"
        type="text/javascript"></script>
    <script language="JavaScript1.2" src="css_js/general_arendeprocess.js"
        type="text/javascript"></script>
    <script language="JavaScript1.2" src="css_js/dialog_box.js"
        type="text/javascript"></script>
    <script language="JavaScript1.2" type="text/javascript">
        function ingVar(x) {
            var applicationDependence;
            applicationDependence = x;
            document.getElementById('ff').style.display = 'none';
            document.getElementById('avd').style.display = 'none';
            document.getElementById('utb').style.display = 'none';
            document.getElementById('oepa').style.display = 'none';
            document.getElementById('aooep').style.display = 'none';
            if (applicationDependence == 'ff') {
                document.getElementById('ob').style.display = 'none';
                document.getElementById('ff').style.display = '';
            }
            if (applicationDependence == 'avd') {
                document.getElementById('ob').style.display = 'none';
                document.getElementById('avd').style.display = '';
            }
            if (applicationDependence == 'utb') {
                document.getElementById('ob').style.display = 'none';
                document.getElementById('utb').style.display = '';
            }
            if (applicationDependence == 'oepa') {
                document.getElementById('ob').style.display = 'none';
                document.getElementById('oepa').style.display = '';
            }
            if (applicationDependence == 'aooep') {
                document.getElementById('ob').style.display = 'none';
                document.getElementById('aooep').style.display = '';
            }
            if (applicationDependence == 'ob') {
                document.getElementById('ob').style.display = '';
            }
        }
    </script>
    <title>Ingivningsdag - NAT. - Pandora</title>
    </head>


    <body id="content"
        onload="if(document.getElementById('beroende') != null) { ingVar(document.getElementById('beroende').value);}">

    ...

<div class="popup" id="popupSokNamn" style="position: absolute; top: 200px; ">



<table width="100%" border="0" cellspacing="0" cellpadding="2" align="center" class="TB_nb">
    <tbody><tr>
        <td colspan="3" class="pusher TB_nb"><h2>Sök person/företag</h2>
        </td>
        <td align="right"><a href="javascript:void(0)" onclick="document.getElementById('popupSokNamn').style.display = 'none';">X&nbsp;&nbsp;</a>
        </td>
    </tr>
</tbody></table>
<br>
<div id="Vsok">

    <div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;">
        <span onclick="document.getElementById('sokF').style.display='', document.getElementById('bottomA').style.display='none', document.getElementById('bottomV').style.display='', document.getElementById('Vsok').style.display='none'" class="link_sm">Visa sökformulär</span>
    </div>

</div>

<div id="sokF">

    <div style="text-align: right; width: 100%; padding-right: 5%; padding-top: 5px;; padding-bottom: 5px;">
        <span onclick="getElementById('sokF').style.display='none', getElementById('bottomA').style.display='none', getElementById('bottomV').style.display='', getElementById('Vsok').style.display=''" class="link_sm">Dölj sökformulär</span>
    </div>

    <div style="width: 100%; margin-left: 15px; margin-right: 15px;">
        <fieldset style="border: 1px solid Grey; display: inline;">
            <input type="hidden" name="currentSearchMode" value="">
            <legend><i>Fysisk person</i></legend>
            <div class="fl30">&nbsp;Förnamn:</div>
            <div class="fl40">
                <input type="text" size="40" name="searchFornamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
            </div>
            <div class="clear"></div>
            <div class="fl30">&nbsp;Efternamn:</div>
            <div class="fl40">
                <input type="text" size="40" name="searchEfternamn" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
            </div>
        </fieldset>

        <fieldset style="border: 1px solid Grey; display: inline;">
            <legend><i>Juridisk person</i></legend>
            <div class="fl30">&nbsp;Företag:</div>
            <div class="fl40">
                <input type="text" size="40" name="searchForetag" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
            </div>
            <div class="clear"></div>
            <div class="fl30">&nbsp;Organisationsnummer:</div>
            <div class="fl40">
                <input type="text" size="40" name="searchOrgNummer" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
            </div>
        </fieldset>
        <br>
        <br>
        <div class="fl1">&nbsp;</div>
        <div class="fl20">Postort:</div>
        <div class="fl40">
            <input type="text" size="40" name="searchPostort" onkeyup="doSubmitByEnter('Namnsokning', 'search')">
        </div>
        <div class="clear"></div>

        <div class="fl1">&nbsp;</div>
        <div class="fl20"><label for="searchLandKod">Land</label>:</div>
        <div class="fl60">
            <input type="text" size="2" maxlength="2" name="searchLandKod" id="searchLandKod" value="" onkeyup="setListbox(event, this, 'searchLand');loaddiv(this);onkeyup=doSubmitByEnter('Namnsokning', 'search');"> 
            <select name="searchLand" id="searchLand" onchange="setSearchbox(this, 'searchLandKod');loaddiv(this);">
                        <option value="">Välj land</option>



                ...

    <tr class="g1" onmouseover="javascript:setStoreStyle(this)" ;="" onmouseout="javascript:getStoreStyle(this)" onclick="javascript:doSubmitWithModifierAndIndex('Grunduppgifter','editSearchPerson', '', '0')" style="cursor: pointer;">


        <td></td>
        <td></td>

        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

    <tr class="g1" onmouseover="javascript:setStoreStyle(this)" ;="" onmouseout="javascript:getStoreStyle(this)" onclick="javascript:doSubmitWithModifierAndIndex('Grunduppgifter','editSearchPerson', '', '0')" style="cursor: pointer;">


        <td></td>
        <td></td>

        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>

</tbody></table>


<div id="bottomV">
    <table width="100%" align="center">
        <tbody><tr>
            <td align="left"></td>
            <td align="right"><input type="button" value="Avbryt" style="width: 150px;" class="checkmargin" onclick="document.getElementById('popupSokNamn').style.display = 'none';">
            </td>
        </tr>
    </tbody></table>
</div>

<div id="bottomA" style="display: none">
    <table width="100%" align="center">
        <tbody><tr>
            <td align="left"><input type="button" value="Ändra i register" style="width: 150px;">
            </td>
            <td align="right"><input type="button" value="Avbryt" style="width: 150px;" class="checkmargin"><input type="button" value="Infoga" style="width: 150px;">
            </td>
        </tr>
    </tbody></table>
</div>
        </div>

…

The CSS is

*  {font-family:arial;}

.avnamn{ 
                color: #90002b; 
                font-size: 140%; 
                display: inline; 
                vertical-align: 3%; 
                margin-left: 1%;
                }

.b{border:1px solid #000;}

.readonly{background-color: #CCC;}

.Webdings{
    font-family: Webdings;
    }

ul{margin-top: 0px}

.mt3{margin-top:-3px;}
.mt5p{margin-top:5px;}

.fontS80 {font-size: 80%;} 
a:link{color:#000; text-decoration:none; }
a:visited{color:#000; text-decoration:none; }
a:hover{color:#000; text-decoration:none; }
a:active{color:#000; text-decoration:none; }

.fontS75 {font-size: 75%;} 

.link{color: #003366;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;}

.link_sm{color: #003366;
    text-decoration: underline;
    cursor: pointer;}

.link_sm{font-size: 70%;cursor: pointer;}

.small{font-size: 75%;}

.smallg{font-size: 75%;
color: #555;}

.ssmall{
    font-size: 65%;
    font-weight: bold;
    color: #555;
}
.small60{font-size: 60%;}
.small50{
    font-size: 50%;
    color: #333;
}
.smallb{font-size: 85%;}
table{display:inline;}

h1{font-size: 130%;display:inline;}
h2{font-size: 100%;display:inline;}
h3{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}
h4{font-size: 70%;display:inline;}
h5{
    font-size: 80%;
    display:inline;
    font-family: "Arial Unicode MS", Arial, Helvetica, sans-serif;
}

.hthin{
    font-size: 125%;
}

.th {text-align: left;}

td, th{font-size: 75%;
    vertical-align: text-top;}
.td_link{cursor: pointer;}
.td40{height:40px;}
.td60{height:60px;}



.thkant{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 70%;
        text-align: left;
}



.bb{border-bottom: 1px solid #000;}
.bbV{border-bottom: 1px solid #FFF;}
.TB_nbA {background-color:#CCC;}
.TB_bt, .TB_nb, .TB_db, .TB_bb {background-color:#efefdc;}

.hk {background-color:#d9ddb3;}

.hknot {background-color:#f9faf2;}
/*<!--F8F8F1-->*/
.TB_bt{border-top: 1px solid #FFF;}
.TB_bt5{border-top: 5px solid #FFF;}
.TB_bb{border-bottom: 1px solid #999;}
.TB_bb2{border-bottom: 2px solid #c1c1b3;}
.TB_db{border-bottom: 1px solid #000; border-top: 1px solid #000;}
.TB_tb{border-top: 2px solid #efefdc;}

.TB_bo{border: 2px solid #efefdc;}
.TB_bo_hk{border-top: 1px solid #efefdc;}


.TB_bo2{border: 1px solid #efefdc;}

.TB_bo2B{
border-top: 2px solid #c1c1b3;
border-left: 3px solid #efefdc;
border-right: 3px solid #efefdc;
border-bottom: 2px solid #c1c1b3;
}

.TD_bo{
    border-right: 1px solid #c1c1b3;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.TD_bo2{

    border-right: 0;
    width: 9%;
    font-size: 70%;
    text-align: center;
}

.ytb{
    border-left:3px solid #efefdc;
    border-right:3px solid #efefdc;
}

.datum {
    font-size: 70%;
    padding-right: 5px;
    vertical-align: text-top;} 
.sub {background:#EAEAEA;}
.sub_meny, .sub_meny_r, .sub_meny_active, .sub_meny_sm{
    font-size: 70%;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: text-top;}

.sub_meny_sm {
    font-size: 60%;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
}    

.sub_meny_search{
    position: absolute;
    right: 265px;
    font-size: 70%;
    vertical-align: text-top;
}

.sub_meny_r{
    float:right;
    font-size: 70%;
    padding-left: 8px;
    padding-right: 8px;}

.sub_meny_rm{margin-top:4px;}
.sub_meny_active{font-weight: bold;}

.flikkant1 {
    background-image: url(../images/fl1k.jpg);
    background-position: center;
    z-index: -1;}

.inl_namn{
    font-weight: bold;
    font-size: 70%;
    color: Black;
    text-decoration: none;}

.th{text-align: left;}
.tr{text-align: right;}

.g1{
    background-color: #FFF;
    line-height: 20px;
}

.g2{
    background-color: #EEE;
    line-height: 20px;
}

.g3{
    background-color: #DCDCDC;
    line-height: 20px;
    font-weight: bold;
    font-size: 100%;
}
.g4{
    background-color: #CCC;
    line-height: 20px;
}

.popuphandlaggare{ 
    border-color: #000;
    border-style: groove;      
    border-width: 2px;      
    padding: 0px;      
    background-color: #FFF;     
    font-size: 70%;     
    position: absolute;     
    top: 900px; 
    }

.popupN{
    background-color: #F0F0E3;
    color: #000;
    width: 100%;
    display: inline;
    font-weight: bold;
    height: auto;
    padding: 2px;
    border-bottom: 1px solid #000;
}
.pin{padding: 6px;}

.fl10, .fl20, .fl30, .fl40, .fl50, .fl60, .fl70, .fl80, .fl90, .fl100 {
    padding-bottom:4px;color: #000000;
}

.over{
    background-color: #EFEFDC;
    line-height: 20px;
}

.half{
line-height:50%;
}

.quarter{
line-height:25%;
}

.lh10{
line-height:10%;
}

.checkmargin {margin-right: 25px;}    
.checkmarginL {margin-left: 25px;}    

.pusher {padding-left: 15px;}
.pusherR {margin-right: 40px;}

.rand3{background-color: #FFF; line-height: 3px;}
.rand1{background-color: #FFF; line-height: 1px;}

.whiteborder {     color: #ffffff;      border: 4px solid #ffffff;      padding: 10px;      margin: 10px; }
#details { width: 700px; color: #ffffff; }
.column1 {     color: #000000; margin: 0;      padding: 0;     width: 600px;     border:0;     float: left; }
.column2 {     color: #000000;margin: 0;      padding: 0;     border:0;     width: 80px;     float: right; }

.f200 {
    color: #000000;
}

.f210 {
    color: #000000;float: left;
}
.f220 {
    width: 400px;
}
.f1450 {
    width: 600px;
    float:left;
}
.f1550 {
    width: 150px;
    float:left;
    padding:15px;
}
.paddedcell {
    padding:15px;
}
.b2{border:2px solid #efefdc;}
.inp_sel{width: 80%;}

.fl21{float:left; padding:5px; margin:5px; width:150px;} .fl455{float:left; padding:5px; margin:5px; width:120px;} 

.form-bg {
  background: #eeefdf;
  width:1000px;
  overflow:hidden;
}
.form-bg2 {
  background: #eeefdf;
  width:100%;
  overflow:hidden;
}
.data-bar {
  border-bottom:1px solid #fbfbf7;
  display:inline-block;
  padding:10px 10px;
}

.left {
float:left;
width:200px;

}
.discount {
float:right;
width:500px;

}
.discounts {
width:900px;

}
.right {
float:right;
width:700px;
}
.yta20 {
background: #eeefdf;
width:1100px;
}

.yta2 {

width:1100px;
}

.data-box {
width:650px;
height:100px;
border:1px solid #cbcbcb;
}
#table td { 
margin:120px; 
} 

#personName {     float:left;     width:300px;   }  #otherDetails {     float:right;     width:450px;      }

.th_rad_sort {border-bottom: 2px solid #000000; text-decoration: none;}

a img { border: 0; outline:0;}


.f { float: right;     color: white; }


.handlaggare { width: 1000px; }

div.data-box-nat{
    margin-bottom: 10px;
    padding: 2px;
    border: 2px solid gray;
    width: 600px;
}
div.data-box-pct{
    margin-bottom: 10px;
    border: 2px solid gray;
    width: 600px;
}

.popup{
    border-color: #000; 
    border-style: groove; 
    border-width: 2px; 
    padding: 0px; 
    background-color: #FFF;
    font-size: 75%;
}

.horizontal-gradient {
    background: #1a2adb; /* Old browsers */
    background: -moz-linear-gradient(left,  #1a2adb 0%, #a1e6ed 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1a2adb), color-stop(100%,#a1e6ed)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* IE10+ */
    background: linear-gradient(left,  #1a2adb 0%,#a1e6ed 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a2adb', endColorstr='#a1e6ed',GradientType=1 ); /* IE6-9 */
    color: white;
    width: 1055px;
}

#topBar {width:100%; background-color:#EFEFDC; display:inline-block;}
#topBar h2 {float:left}
#close {position:relative; float:right;}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since I’m guessing this is the issue of browsers not printing the backgroundcolor (if not selected by the user) the only solution without knowing more is to use print stylesheets to remove everything else that is beneath the popup so that the transparent background is not an issue. If the page should print normally (when the popup isn’t open) you need to, for instance, add/remove a class to the body to let the CSS know when a popup is available or not.

    • 0