Supportnet / Forum / Webseiten/HTML
css boxmodel, IE machts falsch, Hilfe
Frage
hi,
will blos ein paar divs zusammenbringen, aber es gelingt mir im IE nicht. rechts von <div id="logo"> ensteht immer ein spalt, der weg soll.
ihr koennt euch das ganze auch anschauen:
[url] http://salzinet.com/web-pc/webdevelopment/salzinet/new/index.html[/url]
Hat da jemand eine Idee?
der Code:
<body>
<div id="window">
<div id="header">
<div id="logo">
</div>
<div id="banner">
<div id="bannermenu"> </div>
</div>
<div id="menubar"> </div>
<div id="position"> </div>
</div>
Der CSS code:
body {margin:0px;}
div#window {
margin:0px auto 0px 0px;
width:100%;
min-width:760px;
}
div#header {
margin: 0px auto 0px 0px;
height:110px; width:100%; min-width:760px;
background-color:with;
}
div#logo {
float: left;
margin:0px;
width:150px; height:87px;
border-bottom:dotted #4474ae;
border-width: 0px 0px 3px 0px;
background-color:red;
;
}
div#banner {
margin:0px;
height:60px; width:auto;
background-color:grey;}
div#bannermenu {
float: right;
margin-bottom:0px; margin-right:10px; margin-top:40px;
height:20px; width:300px;
padding:0px;
background-color:orange;}
div#menubar {
margin:0px;
height:24px; width:auto;
border-top:solid 3px #4474ae;
border-bottom:solid 3px #4474ae;
background-color:#fff;}
div#position {
position:absolute; top:90px; left:150px;
width:350px; height:20px;
background-color:orange;}
div#left-column {
border-right: dotted #ccffff 1px;
width:150px; height:100%; min-height:400px;
}
Antwort 1 von Hergy
Hi salzi !
Versuch mal folgendeas:
Gib die Rahmenbreite von
(anstatt
und
Gruß, hergy
Versuch mal folgendeas:
Gib die Rahmenbreite von
div#logo border-bottom: border-bottom: dotted 3px #4474ae;(anstatt
border-bottom:dotted #4474ae;und
border-width: 0px 0px 3px 0px;Gruß, hergy
Antwort 2 von salzi
@ hergy,
danke war ein Versuch, hat aber nicht geklappt. Mich wuerde mal interessieren wie du zu so einer Ueberlegung gekommen bist. Gibst da bekannte Dinge, die der IE nicht schnallt, oder sowas wie "wackeligen Code"?
binfuer weitere Vorschlaege offen...
Troztdem Vielen Dank!
Salzi
danke war ein Versuch, hat aber nicht geklappt. Mich wuerde mal interessieren wie du zu so einer Ueberlegung gekommen bist. Gibst da bekannte Dinge, die der IE nicht schnallt, oder sowas wie "wackeligen Code"?
binfuer weitere Vorschlaege offen...
Troztdem Vielen Dank!
Salzi
Antwort 3 von DerWahreDenny
vielleicht wäre es besser, wenn du nicht um jedes element ein div machst. vielleicht würde header, menubar und inhalt-div ausreichen. dann in den header einfach logo und banner jeweils mit <img> nebeneinander (border,margin,padding=0)?!
Antwort 4 von derpfleger
@salzi:
Probiers mal mit Positionierung der divs:
Check das mal ab in deinem CSS.
Und im HTML:
unter
verstehe ich die Anweisung
nicht, das kann man doch eigentlich ganz löschen?
Gruss Heiko
Probiers mal mit Positionierung der divs:
div#logo {
float:left;
position:absolute;
top:0px;
left:0px;
margin:0px;
width:150px; height:87px;
border-bottom:dotted 3px #4474ae;
border-width: 0px 0px 3px 0px;
background-color:gold;
}
div#banner {
position:relative;
top:0px;
left:150px;
margin:0px 0px 0px 0px;
height:60px; width:auto; max-width:1250px;
background-image:url(banner.jpg); background-repeat:no-repeat;
background-color:#cccccc; }
div#banner-menu {position:absolute; top:0px; right:150px; float: right; margin:40px 0px 0px 5px; height:20px; width:290px; padding:0px; -moz-opacity:0.8; filter:alpha(opacity=80); text-align:center; }
div#menubar {
position:relative;
top:0px;
left:150px;
margin:0px;
height:24px; width:auto;
border-top:solid 3px #4474ae;
border-bottom:solid 3px #4474ae;
background-color:#AFC3DB;
}
Check das mal ab in deinem CSS.
Und im HTML:
unter
<div id="window">verstehe ich die Anweisung
<a id="top">
</a>nicht, das kann man doch eigentlich ganz löschen?
Gruss Heiko
Antwort 5 von salzi
@Heiko:
<a id="top">
</a>
Das ist ein Anker, denn ich nicht loeschen will, da es auf jeder Seite ein "nach oben" Link geben soll, und das ist das Ziel dafuer.
Ansonsten wollte ich absolute positionierung vermeiden. Natuerlich kann ich dann alles annageln wo ich will, aber es soll beweglich werden (in der Breite), und so hatte ich damit immer Probleme, aber ich versuche es mal.
Die Antowort 3 scheint sinn zu machen. aber ich wuerde lieber ein paar mehr dives drin haben, um evt verschiedene skins einfacher realisieren zu koenne (spaeter).
Kann gib es einen Befehl, der ein Blockelemet (wie div) immer am unteren Rand eines umgreifenden Blockelementes ausrichtet, unabhaengig von dessen Laenge?
Guss Salzi
zu sehen ist das ganze inzwischen unter www.salzinet.com/php/index.php , wenn es interessiert.
<a id="top">
</a>
Das ist ein Anker, denn ich nicht loeschen will, da es auf jeder Seite ein "nach oben" Link geben soll, und das ist das Ziel dafuer.
Ansonsten wollte ich absolute positionierung vermeiden. Natuerlich kann ich dann alles annageln wo ich will, aber es soll beweglich werden (in der Breite), und so hatte ich damit immer Probleme, aber ich versuche es mal.
Die Antowort 3 scheint sinn zu machen. aber ich wuerde lieber ein paar mehr dives drin haben, um evt verschiedene skins einfacher realisieren zu koenne (spaeter).
Kann gib es einen Befehl, der ein Blockelemet (wie div) immer am unteren Rand eines umgreifenden Blockelementes ausrichtet, unabhaengig von dessen Laenge?
Guss Salzi
zu sehen ist das ganze inzwischen unter www.salzinet.com/php/index.php , wenn es interessiert.