house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: 
|
Verfasst Mi 09.02.2011 12:46
Titel IE: Problem mit Overflow |
  |
|
Hallihallo, ich hätte da mal wieder ein Problem. Ich arbeite gerade an einer Webvisitenkarte für einen Kunden von uns. D.h. der ganze Webauftritt besteht nur aus Start - Datenschutz - Impressum. Diese Tatsache brachte mich auf die Idee, den Auftritt in einer einzigen HTML umzusetzen, als horizontal Scroll.
Dazu habe ich hier eine passende Vorlage gefunden und diese auf das vorhandene Layout angepasst.
Im Beispiel ist der Contentbereich fest definiert mit 300x400 px oder so. Das ist bei mir leider nicht der Fall. Die Datenschutz-Seite ist schon ziemlich lang. Das war an sich kein Problem, ich habe das CSS so abändern können, so dass man in allen Browsern scrollen kann. Alle Browser bis auf einen... -.-
Im IE (9 - einen andern kann ich leider nicht beachten) wird der Inhalt soweit angezeigt, wie groß das Fenster ist. Ich habe jetzt schon verschiedene Sachen ausprobiert, overflow x und y geändert, alle möglichen Zustände ausprobiert und auch mal position, height usw. geändert aber leider hat mich nichts zu einem annehmbaren Ergebnis gebracht. Habt Ihr eine Idee?
HTML:
| Code: |
<body>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="navi">
<a href="#item2" class="panel">Datenschutz</a>
<a href="#item3" class="panel">Impressum</a>
</div>
<div class="content">
<img src="00_img/portrait.jpg" class="portait" height="210" width="150" />
<h1>H1</h1><br/>
<p class="item1"> Adresse
</p>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="navi">
<a href="#item1" class="panel">Start</a>
<a href="#item3" class="panel">Impressum</a>
</div>
<div class="content">
<h2>Datenschutz</h2>
<p class="item3">+++langer Text</p>
<h3>Hinweise zum Tracking mit Google Analytics</h3>
<p class="item3">+++langer Text+++</p>
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="navi">
<a href="#item1" class="panel">Start</a>
<a href="#item2" class="panel">Datenschutz</a>
</div>
<div class="content">
<h2>Impressum</h2>
<h3>Anbieterinformation</h3>
<p class="item3">Adresse</p>
<h3>Verantwortlich für den Inhalt</h3>
<p class="item3">
(Kontakt wie oben)</p>
<h3>Haftungsausschluss</h3>
<p class="item3">+++langer Text+++</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body> |
CSS:
| Code: |
body {
height:100%;
width:100%;
margin:0;padding:0;
background-color:#003399;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
overflow-x:hidden;
overflow-y:visible;
}
#mask {
width:300%;
height:100%;
position:relative;
overflow-x:hidden;
background-color:#003399;
background-image:url(../00_img/flaeche.gif);
background-position:top left;
background-repeat:repeat-y;
}
.item {
width:33%;
height:100%;
float:left;
bottom:20px;
}
.content {
width:350px;
top:120px;
margin-left:853px;
position:relative;
overflow-x:hidden;
overflow-y:visible;
}
.navi {
margin-top:10px;
margin-left:833px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.3em;
color:#fff;
}
|
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst Mi 09.02.2011 15:07
Titel
|
|
|
Update
NA TOLL! Ich glaub ich platze gleich. Habe jetzt mal weiter am CSS rumgefriemelt und gedacht ich hätte eine Lösung gefunden, die auch der IE verträgt... hab aber natürlich im 9er IE getestet. Im IE 7 funzte es nich und ich geh gleich weinen...
hier mal n CSS-Update:
| Code: |
body {
height:100%;
width:100%;
margin:0;padding:0;
background-color:#003399;
}
#wrapper {
width:100%;
height:100%;
position:relative;
top:0;left:0;
overflow-x:hidden;
overflow-y:visible;
}
#mask {
width:300%;
height:100%;
position:relative;
overflow-x:hidden;
background-color:#003399;
background-image:url(../00_img/flaeche.gif);
background-position:top left;
background-repeat:repeat-y;
}
.item {
width:33%;
height:100%;
float:left;
bottom:20px;
}
#item1 {
background:url(../00_img/pfeil.gif) no-repeat top left;
min-height:791px;
min-width:678px;
}
#item2 {
background-image:url(../00_img/logo.gif);
background-repeat:no-repeat;
background-position:top left;
}
#item3 {
background-image:url(../00_img/logo.gif);
background-repeat:no-repeat;
background-position:top left;
}
.content {
width:350px;
top:120px;
margin-left:853px;
position:relative;
overflow-x:hidden;
overflow-y:visible;
}
.portait {
border:1px solid #fff;
clear:both;
}
.navi {
margin-top:10px;
margin-left:833px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.3em;
color:#fff;
}
.navi A{
margin-left:20px;
}
.navi A:hover{
color:#aaa;
text-decoration:none;
}
|
Hat jemand ne Idee außer einen Strick zu nehmen? 
|
|
Willkommen auf dem Portal für Mediengestalter
