[CSS] Thickboxfenster ohne Scrollbalken

mutated form

Ensign
Registriert
Juni 2008
Beiträge
173
Guten Abend,

zurzeit sitze ich an einer Homepage, in der sich die einzelnen Kategorien in einer Thickbox öffnen (zur erklärung: http://jquery.com/demo/thickbox/ ). Alles kein Problem im Firefox (version: 3.0.10). Jedoch im Internetexplorer (Version 7) hat das Thickboxfenster zwei lästige Scrollbalken, die im Firefox nicht zu sehen sind. Ich habe schon im Linkcode "scrolling="no" oder overflow="no" ausprobiert. Leider ohne Erfolg. Ich schätze das Problem liegt in der thickbox.css . Leider kenne ich mich da nicht so aus. Ich poste euch einfach mal den CSS Code. Und hoffe ihr versteht was ich meine :)


CODE:

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}

#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}

.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}

* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border:
text-align:left;
top:50%;
left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 0px solid #ccc;
border-bottom: 0px solid #ccc;
border-top: 0px solid #666;
border-left: 0px solid #666;
}

#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}

#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}

#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}

#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}

#TB_title{
background-color:#e8e8e8;
height:27px;
}

#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
padding:15px;
}

#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}

#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}
 
Zuletzt bearbeitet:
Normalerweise kann man die balken mit "overflow: hidden; " abschalten.

gruß
dominic
 
Zuletzt bearbeitet:
im Link oder in der CSS? was für euch auch noch wissenswert ist: Ich öffne über die Thickbox .html Dateien. Mit der Thickbox Funktion "iFramed Content"

Im link hab ichs schon ausprobiert => geht nicht

Hier der Code:

<a href="me.html?keepThis=true&amp;TB_iframe=true&amp;height=319&amp;width=776" title="Name der Seite" class="thickbox" overflow="hidden">Name der Seite</a>

Und wiegesagt. Dieses Problem habe ich nur im Internetexplorer. Im Firefox wird alles einwandfrei dargestellt.
 
Das Overflow: Hidden; ist ein CSS-Attribut, kein HTML. Also entweder baust du es in einen STYLE-HTML-Attribut ein oder du setzt es in die CSS.
 
Zurück
Oben