• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit dein einfügen von Styleangaben

S

supertobs

Mitglied
Hi,
ich hab ein Problem mit CSS eigenschaften. und zwar habe ich eine chatBox mit folgendem aufbau:

Code: 
echo"<ul style='float:left;' id='chatBar'>";
<li class='offline active' style='display:none;' id='chatBox1' onmouseover='showHideButton("chatBox1CloseButton")' onmouseout='showHideButton("chatBox1CloseButton")'>
    <span onclick='openCloseChatBox("1");' id='chatBox".$ID."name'>-Quirin-</span>
    <img id='chatBox1CloseButton' style='visibility:hidden;' src='styles/new/img/chatBoxClose.png'  alt='schliessen' onclick='CloseChatBox("1")'>
    <div class='chatbox' id='chatBox1drop'>
        <div class='chatMessages' id='chatBox1Messages'></div>
        <form action='javascript:sendChatMessage("1")'><input id='chatBox1input' name='chatBox1input' type='text'  ></form>
    </div>
</li>

hierbei ist das list item eine ChatBox.
Jetz habe ich das Div mit der klasse chatbox, welches über folgendes stylesheet eigentlich ein style zugewisen bekommt:

Code: 
#desk_info_bar #chatBar li .chatBox{
             position:absolute;
             top:24px;
             width:264px;
             margin-left:0px;
             height:300px;
             box-shadow:-1px 1px 5px #000000;
         
             background-color:#464641;
             color:#DFDBD2;
             z-index:999;
        }

doch leider werden alle Styleangaben ab diesem div "verschluckt", d.h. alle objekte innerhalb des div's haben ebenfalls keine Styleangaben.

Das letze ist, dass wenn ich die Website im Standardkonformen Modus anzeige es nicht funktioniert. im Quirksmodus funktioniert es aber. was mache ich falsch?

LG
Tobias
 
Werbung:
Ich sitze nun schon seit ca 16 uhr an diesem Problem und versteh immer noch nicht, wo der Fehler ist.
Das komische ist ja, dass dieser fehler nur im Standartkonformen Modus kommt. im Quirksmodus nicht.
Hier nochmal das komplette Stylesheet für den Chat. Ich hab dieses schon durch den CSS valiidator gejagt. jedoch ohne Erfolg.

Code: 
.chatList {
        width:100%;
        height:100% !important;
        overflow-x:hidden;
        overflow-y:auto;
        }
    
    .chatlist li{
    margin: 0px;
    padding: 0px;
    border: 0px;
    
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    background-image:none !important;
    width:100% !important;
    padding-right:0px;
    
    height:auto !important;
    border-bottom:1px black solid;
    padding-bottom:5px;
        
        }
        
    .chatlist li div.chatHead{
        height:32px;
    margin-bottom:5px;
    position:static;
    width: 100% !important;
        
        }
        
    .chatlist li div.chatContent{
        height:auto;
        width:100% !important;
    position:static;
    font-size:15px;
        
        }        
        
    .chatlist li div.chatHead span.chatSendDate{
       font-size:13px;
     float:right;
     display:inline !important;
     width:auto !important;
        
        } 
    .chatlist li div.chatHead span.chatSender{
       font-size:13px;
     float:left;
     display:inline !important;
     width:auto !important;
        
        } 
    
    .chatList li.user1 {
        background-color:#EDEDED;
        
        }
    .chatList li.user2 {
        background-color:#FFFFFF;
        
        }
        
 /*           #desk_info_bar #chatBar li{
        
       padding-left:0px;
       background-image:url(img/chat.png);
       background-repeat:no-repeat;
       background-position:4.5px center;
       width:260px;
       text-align:center; 
       border-right:#A7A49F 1px solid;
        }
        */

        #desk_info_bar #chatBar li .chatBox {
             position:absolute;
             top:24px;
             width:264px;
             margin-left:0px;
             height:300px;
             box-shadow:-1px 1px 5px #000000;
         
             background-color:#464641;
             color:#DFDBD2;
             z-index:999;
        }
        
        #desk_info_bar #chatBar li .chatBox input{
             position:absolute;
             bottom:5px;
             
             left:5px;
             width:254px;
             height: 25px;
             padding-left:25px;
            padding-right:2px;
             border-top:1px black solid;
             border-radius:0px;
             right:5px !important;
             background-image:url('img/bubble.gif');
             background-repeat:no-repeat;
             background-position:4.5px center;
             
        }  
        
        #desk_info_bar #chatBar li .chatBox .chatMessages{
             position:absolute;
             left:5px;
             right:5px;
             top:5px;
             bottom:30px;
             overflow-x:hidden;
             overflow-y:auto;
             background-color:white;
             color:black;
             text-align:left;
             height:265px;
             overflow: auto;
             
             
        }  
        
        #desk_info_bar #chatBar li .chatBox .chatMessages ul li .chatContent{
            text-align:left;
            padding-left:5px;
            padding-right:5px;
            
            
            }
            
            #desk_info_bar #chatBar li .chatBox .chatMessages ul li .chatSender , #desk_info_bar #chatBar li .chatBox .chatMessages ul li .chatSendDate {
                color:black;
                }
        
         #desk_info_bar #chatBar li.typing{

       background-image:url(img/pencil.png);

        
        }  
        #desk_info_bar #chatBar li.offline{
       
       background-image:url(img/chat_offline.png);
       
        
        } 
       #desk_info_bar #chatBar li.active{
       background-color:#464641;
       color:white;
        } 
         
        
        #desk_info_bar #chatBar li span{
            
            width:239px;
            display:inline-block;
            color:#DFDBD2;
            
            }
            
        #desk_info_bar #chatBar li img{
            
            
            }


//EDIT:
es scheint scheinbar an dem div zu liegen. alle anderen objekte haben das stylesheet, auser diesem div container -.-
 
Zuletzt bearbeitet:
Werbung:
Hallo,

bist du sicher dass es am css liegt?
In dieser Zeile
HTML: 
 <span onclick='openCloseChatBox("1");' id='chatBox".$ID."name'>-Quirin-</span>

schaltest du mit Javascript die Chatbox ein und aus und ich denke die ID hat was damit zu tun. An die ID hängst du dynamisch noch was dran, so dass die ID dann so ähnlich lautet wie chatBox3name .

Ich kann leider nicht erkennen wo deine Chatbox anfängt und wo sie aufhört, somit habe ich auch schwierigkeiten die Referenzen im CSS wiederzufinden.

Ich denke es geht einigen so. Es fehlt zum Verständnis der Zusammenhang, was im Javascriptcode passiert.

Zum Firebug kann noch Webdeveloper zugeben. Beides für Firefox.
 
ja firebug und webdeveloper hab ich installiert und der zeigts mir nicht an. er zeigt mir nur die eigenschaften der reset.css datei für dieses objekt an.

@Wusteros:
@Wusteros: Ja stimmt, der Quellcode wird eigentlich dinamisch durch PHP generiert. hier fürs Forum hab ich jedoch zum besseren verständniss das ganze ohne den PHP schnichschnack eingefügt. den hab ich jedoch vergessen ;)
zum bessern verständniss hier nocheinmal der aufbau:



die unsotierte liste mit dem ID chatBar enthällt die Chatboxen.
darin sind dann jedes list-item mit einem id wie chatBox1 eine chatbox.

darin wird das ganze ausenherum geregelt.

Das div chatBox1drop ist eine box, welche nach unten ausklappt. darin ist wieder ein div mit dem ID chatBox1Messages.
in diesem wird dann per ajax der chatinhalt geladen.

Der betreffende CSS Code ist folgender:

Code: 
           #desk_info_bar #chatBar li{                 padding-left:0px;        background-image:url(img/chat.png);        background-repeat:no-repeat;        background-position:4.5px center;        width:260px;        text-align:center;         border-right:#A7A49F 1px solid;         }                   #desk_info_bar #chatBar li .chatBox {              position:absolute;              top:24px;              width:264px;              margin-left:0px;              height:300px;              box-shadow:-1px 1px 5px #000000;                        background-color:#464641;              color:#DFDBD2;              z-index:999;         }                  #desk_info_bar #chatBar li .chatBox input{              position:absolute;              bottom:5px;                            left:5px;              width:254px;              height: 25px;              padding-left:25px;             padding-right:2px;              border-top:1px black solid;              border-radius:0px;              right:5px !important;              background-image:url('img/bubble.gif');              background-repeat:no-repeat;              background-position:4.5px center;                       }                    #desk_info_bar #chatBar li .chatBox .chatMessages{              position:absolute;              left:5px;              right:5px;              top:5px;              bottom:30px;              overflow-x:hidden;              overflow-y:auto;              background-color:white;              color:black;              text-align:left;              height:265px;              overflow: auto;                                     }                    #desk_info_bar #chatBar li .chatBox .chatMessages ul li .chatContent{             text-align:left;             padding-left:5px;             padding-right:5px;                                       }                          #desk_info_bar #chatBar li .chatBox .chatMessages ul li .chatSender , #desk_info_bar #chatBar li .chatBox .chatMessages ul li .chatSendDate {                 color:black;                 }                   #desk_info_bar #chatBar li.typing{         background-image:url(img/pencil.png);                   }           #desk_info_bar #chatBar li.offline{                background-image:url(img/chat_offline.png);                          }         #desk_info_bar #chatBar li.active{        background-color:#464641;        color:white;         }                             #desk_info_bar #chatBar li span{                          width:239px;             display:inline-block;             color:#DFDBD2;                          }                      #desk_info_bar #chatBar li img{                                       }


Tobias
 
Ich hab den fehler!
Es ist ganz simpel:

Im Quirksmodus wird (natürlich) nicht zwischen groß und kleinschreibung unterschieden.

Im standartkonformen schon.

In der CSS datei stand somit chatBar statt chatbar. damit hat sich die sache erledigt :D
 
Werbung:
Edit: hat sich erledigt
 
Zuletzt bearbeitet von einem Moderator:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben