Bild soll teilweise verdeckt werden

Status
Nicht offen für weitere Antworten.
Ich bekomm das nicht so eingebaut, dass es funktioniert.
In den nicht-IE-Browsern stimmt etwas mit dem Footer nicht (Text ist nicht am linken Rand und klappt, wenn man das Fenster immer kleiner macht, nach unten weg.) und die Höhe stimmt nicht.
Im IE stimmt nur die Höhe nicht.

Habe schon rumprobiert, die Höhe anzupassen, aber sobald ich "height:1px;" in "height:100%;" ändere, gibt es wieder das "min-width" Problem im IE.

Betrachten kann man das hier: min-width in IE (<= Der Linktext stimmt nicht. Da spinnt gerade was am Forum *argh*)
 
Zuletzt bearbeitet:
Der Linktext wird neuerdings aus dem Seitentitel des verlinkten Dokuments generiert, das ist mir heute auch schon aufgefallen ;)

*back to topic*

Wie es scheint, lassen sich die min-width-Workarounds nicht in deinem Layout implementieren, denn der IE ignoriert sie einfach :confused:

Das ist zumindest mein Resumé nach einigen Experimenten, wie beispielsweise diesem hier:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>min-width in IE</title>

<style type="text/css">
<!--
html, body {
margin: 0px;
padding: 0px;
height: 100%;
}

div.wrapper {
width: 100%;
min-width: 814px;
min-height: 100%;
background-color:#838483;
}

* html div.wrapper { /* Für IE */
height: 100%;
}

/* the bodge for IE6 browsers */
* html .minwidth {padding-left:814px;}
* html .container {margin-left:-814px;position:relative;}

div.header {
width: 100%;
height: 191px;
position: relative;
z-index: 5;
background-color:#009999
}

div.HeaderleftCol {
width: 342px;
float: left;
padding: 0;
height:100%;
background-image:url(Bilder/cool_design3_01.jpg);
margin-right: 0 !important;
margin-right: -3px; /* Für IE */
}

div.HeaderrightCol {
width: 472px;
float: right;
padding: 0;
height:100%;
background-image:url(Bilder/cool_design3_1_03.jpg);
margin-left: 0 !important;
margin-left: -3px; /* Für IE */
}

div.HeadercenterCol {
margin: 0 472px 0 342px !important;
margin: 0 469px 0 339px; /* Für IE */
padding: 0;
height:100%;
background-image:url(Bilder/cool_design3_1_02.jpg);
}

div.topNavi {
width: 100%;
height: 20px;
background: #fff;
}

div.leftCol {
width: 208px;
float: left;
padding: 0;
}

div.rightCol {
width: 150px;
float: right;
padding: 0;
position:relative;
z-index:5;
}

div.centerCol {
margin: 0 150px 0 208px;
padding: 0;
z-index:5;
}

div.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}

div.footer {
width: 100%;
margin: -20px auto 0 auto;
padding: 0;
height: 20px;
background: red;
position:relative;
z-index:5;
}
-->
</style>

</head>
<body>

<div class="wrapper">
     <div class="minwidth">
          <div class="container">

               <img src="Bilder/trenner_rechts.gif" alt="" style="float:right;position:absolute;right:199px;" height="100%" width="9"/>
               <img src="Bilder/trenner_rechts.gif" alt="" style="float:left;position:absolute;left:199px;" height="100%" width="9"/>

               <div class="header">
                    <div class="HeaderleftCol">z</div>
                    <div class="HeaderrightCol">z</div>
                    <div class="HeadercenterCol">z</div>
               </div>

               <div class="leftCol">leftCol</div>
               <div class="rightCol">rightCol</div>
               <div class="centerCol">centerCol</div>
               <div class="clear">&nbsp;</div>

          </div>
     </div>
</div>
<div class="footer">footer</div>

</body>
</html>
 
Ignorieren tut er diese nicht. Mein Beispiel, dass ich hochgeladen habe, funktioniert ja. Es stimmt nur die Höhe nicht.

Bei deinem Code stimmt sowie so etwas nicht (hab noch nicht nachgeschaut was), aber der graue Streifen orientiert sich mit dem Rechtsabstand am Browserfenster und nicht am wrapper-Div.

EDIT:
Bei dir Ignoriert der IE es, weil du
http://www.webreference.com/programming/min-width/2.html hat gesagt.:
This now shows the text occupying the dark red border area as well as the white area giving a total width of 50%, but if you try to resize the window you'ill see that we are back to square one with the contents again continuing to shrink past the min-width of 300 pixels.

This has happened because of an Internet Explorer rendering bug which has caused the extra divs to have their 'hasLayout' property set to false (see Microsoft hasLayout property for further information).
Step 3

There are several ways to trigger 'hasLayout' again but the most common and easiest to use method is the 'Holy hack' which is used to give the divs a height of 1 pixel.
Zum Vergrößern anklicken....
nicht beachtet hast :). (weiter unten kommt noch so ein Problemchen!)
Ich suche schon eine Weile, wie man dieses Problem auch anders beheben kann, so, dass der IE es kapiert, aber die Höhe auf min 100% ist.
 
Zuletzt bearbeitet:
fanste hat gesagt.:
[...] Bei deinem Code stimmt sowie so etwas nicht (hab noch nicht nachgeschaut was), aber der graue Streifen orientiert sich mit dem Rechtsabstand am Browserfenster und nicht am wrapper-Div. [...]
Zum Vergrößern anklicken....
Das wird wohl an der fehlenden position:relative-Eigenschaft für das DIV .wrapper liegen, die ich vorhin im Eifer des Gefechts entfernt hatte.
 
Sorry für den Doppelpost.

Habe wieder eine neue Version: Es gibt jetzt nur noch ein Problem. Ich kann im IE nicht mehr die Höhe auf 100% setzten, sonst verhaut er es wieder. Aber vielleicht findet ja ihr eine Möglichkeit.

Link: http://fadz.uttx.net/design/demo3.htm



EDIT: Wurde diese automatische "Linkbenennung" wieder deaktiviert?
 
fanste hat gesagt.:
[...] Wurde diese automatische "Linkbenennung" wieder deaktiviert?
Zum Vergrößern anklicken....
Nein. Das Dokument besitzt halt keinen Seitentitel, der als Linktext generiert werden könnte.

*back to topic*

Wie gestern schon angedeutet, habe ich den Verdacht, daß die IE-Workarounds für dein Layout-Konzept mit einer 100%-Höhe nicht ausgelegt sind.

Ich habe nämlich eben versucht, das Beispiel min-width in IE - demo8.html lediglich in der Vertikalen auf 100% zu strecken, doch auch hier fällt anschliessend im IE das Layout in der Breite zusammen.

Mein Fazit: solange das Layout keine 100%-Höhe besitzt, funktionieren die diversen Workarounds, um im IE eine Mindestbreite festzulegen. Oder es verhält sich entgegengesetzt: sobald die zusätzlichen DIVs in der Vertikalen auf 100% gestreckt werden, mißachtet der IE die Mindestbreite bzw. das Layout fällt in ihm zusammen.
 
Dann muss es wohl ohne gehen.
Kann ja mit JS etwas nachhelfen. Dann sehen das halt nur die IE Benutzer, die JS aktiviert haben.

Danke für deine Hilfe.

*off topic*
Komisch, wo ist denn der Titel geblieben. Hatte das Dokument doch nur kopiert!
 
fanste hat gesagt.:
*off topic*
Komisch, wo ist denn der Titel geblieben. Hatte das Dokument doch nur kopiert!
Zum Vergrößern anklicken....
Das kann ich dir auch nicht sagen, da ich nicht dabei war, als du das Dokument kopiert und überarbeitet hast ;)
 
HI,

Hab immer noch ein Problem. Man schaue sich mal diese Seite im IE an. Wenn sich blauer und roter Bereich berühren, schrumpfen die beiden grauen balken so zusammen, dass sie unten nicht mehr bündig sind.

Wie kann ich das verhindern?
Das passiert mal wieder nur im IE. Firefox und Opera sind OK.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück