CSS logo darstellungsproblem

[koffi]

hallo!

kurze frage..
ich versuche mir gerade ein neues seitenlayout für eine webseite zu basteln (ziemlich von facebook abgeguckt).
habe mir quasi frames aus css boxen gemacht.

<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

/*kopfzeile*/
#framecontentTop {
position: fixed; 
top: 0; 
left: 0px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 40px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #222222;
color: white;
border-style:solid;
 border-color:grey;
 border-width:1px;
 z-index:1;
}

/*kopfzeile links*/
#framecontentTopLeft {
position: fixed;
padding: 0px
top: 0px; 
left: 140px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: 180px;
height: 40px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #222222;
color: white;
border-style:solid;
border-width:1px;
border-top-color: grey;
border-bottom-color: grey;
border-right-color: #222222;
border-left-color: #222222;
 z-index:2;
}

/*kopfzeile rechts*/
#framecontentTopRight {
position: fixed; 
top: 0; 
left: 322px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: 180px;
height: 40px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #222222;
color: white;
border-style:solid;
border-width:1px;
border-top-color: grey;
border-bottom-color: grey;
border-right-color: #222222;
border-left-color: #222222;
 z-index:2;
}

/*navigation*/
#framecontentLeft {
position: fixed; 
top: 40px; 
left: 140px; 
width: 180px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
border-style:solid;
 border-color:#222222;
 border-width:1px;
}

/*hauptinhalt*/
#maincontent{
position: absolute; 
left: 322px; /*Set left value to WidthOfLeftFrameDiv*/
top: 42px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: white;
}


.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

</style>

sobald ich jedoch in den oberen linken frame (#framecontentTopLeft) das logo anzeigen lassen will, verschiebt sich der frame ein bisschen nach unten und ich habe keine ahnung woran das liegt..

<div id="framecontentTopLeft">


<img src="logo.png">


</div>

EDIT: BILD ENTFERNT

weiss jemand, woran das liegt bzw hat einen besseren lösungsvorschlag, wie ich das logo sauber in dieser kleinen box anzeigen kann?

danke

 

[Arthur1901]

versuch mal das img als background-img in die box zulegen
anderes dürfte es auch gehn wenn du das image mit display: inline-block; definierst
sonst müsste ich selber schaun

 

[koffi]

oh..
beim versuch deine idee umzusetzen, ist mir aufgefallen, dass das problem auch besteht wenn ich das logo nicht anzeigen lasse..
seltsam, vorher war das nicht so.
woran könnte das liegen?

 

[Denara]

Hast du vielleicht einen Link wo man sich die Seite im Ganzen anschauen könnte? Es wäre möglich, dass das Problem garnicht an dieser einen Stelle liegt.

 

[koffi]

ich habe das problem eben gefunden..

/*kopfzeile links*/
#framecontentTopLeft {
position: fixed;
padding: 0px
top: 0px; 
left: 140px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: 180px;
height: 40px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: #222222;
color: white;
border-style:solid;
border-width:1px;
border-top-color: grey;
border-bottom-color: grey;
border-right-color: #222222;
border-left-color: #222222;
 z-index:2;
}

wenn ich "padding: 0px" lösche, wird es korrekt dargestellt. erklären kann ich mir das allerdings nicht.
danke für die hilfe!

 

[Denara]

Argh, ich kann dir sogar sagen warum es deshalb nicht funktioniert =)
Du hast ein ";" am ende der Zeile vergessen. Dadurch ist auch mindestens die nächste Zeile im CSS ungültig, also das "top: 0px;" wird ebenfalls ausgelassen. Deshalb wird das div so verschoben dargestellt.