Avatar billede silmarillion Juniormester
16. april 2009 - 23:33 Der er 3 kommentarer og
1 løsning

Problemer med centreret hjemmeside ved brug af Thickbox

Hej Eksperter,

Jeg er rendt ind i et problem, når jeg laver en hjemmeside med centreret indhold, og laver et link til Thickbox css-filen vises siden ikke længere centreret, men venstre justeret. Problemet opstår kun i Firefox og Google Chrome. Den vises fortsat korrekt i Explorer.

Her vises siden korrekt:
http://www.logeroyal.dk/thickbox/ctest1.php

Men når jeg inkluderer linket til css-filen, går det galt:
http://www.logeroyal.dk/thickbox/ctest.php

css-filen ser ud som følger:

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> 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(file:///C|/Users/AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.IE5/87F5Q9CX/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: 4px solid #525252;
    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: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #666;
    border-left: 1px 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;
}
Avatar billede fusion-it Nybegynder
17. april 2009 - 07:44 #1
Jeg har nu uppet det hele til min server og alt står fint, det eneste jeg har anderledes er fulkd adresse på dine js filer.

Underlig er det dog det står center både med og uden css:

med css
http://fusion-it.eu/ex/1.asp


uden
http://fusion-it.eu/ex/2.asp


Good luck
Avatar billede silmarillion Juniormester
17. april 2009 - 15:45 #2
Hej Fusion-it,

Hvis du skal lave et link til den css-fil jeg her liggende hedder linket:

<link href="http://www.logeroyal.dk/thickbox/thickbox.css" rel="stylesheet" type="text/css" />

ikke:
<link href="http://www.logeroyal.dk/thickbox.css" rel="stylesheet" type="text/css" />

siden er centreret da tabellen ikke er centreret via css-filen
Avatar billede fusion-it Nybegynder
17. april 2009 - 17:06 #3
Ja det ser jeg, har du evt valideret den css du her bruger ?

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Ffusion-it.eu%2Fex%2Ft.css&profile=css21&usermedium=all&warning=1&lang=en

Det giver en del fejl.

Hvad med at gå  over til div?

Du kan finde noget her :
http://www.dynamicdrive.com/style/layouts/category/C12/


Good luck
Avatar billede silmarillion Juniormester
20. april 2009 - 21:15 #4
alternativ løsning fundet
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester