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

Float Bug im Internet Explorer 7

Status
Für weitere Antworten geschlossen.
D

dage

Neues Mitglied
Kein Bug, durchaus nachvollziehbar. Du hast z.B. folgende Box:

Code: 
div.film_rechts {width:50%;height:300px;margin-left:50%;}

Der IE addiert hier also Breite 50% + 50% Außenabstand nach Links. Lass diesen Außenabstand weg und du solltest kein Problem mehr haben. Wenn doch: versuch es mit "width: 49%;" da der IE gerne auch die Rahmen mit einbezieht.

Und btw.: wieso schreibst du den gesamten CSS-Code auf eine Zeile? Kann man ja kaum lesen ;ugl
 
ah stimmt der i-net explorer will ein gefloatetes element also nicht aus dem textfluss nehmen dieser böse^^
habs mit einen "+margin-left:0%;" gelöst. falls jemand einen eleganteren Weg weiß immer melden.
danke und sry wegen dem css in einer Zeile, da hab ich noch gewisse probleme was den zeilenumbruch unter windows und mac betrifft .. vergess ich immer umzustellen ;)
 
Zuletzt bearbeitet:
Hi,

dage schrieb:
ah stimmt der i-net explorer will ein gefloatetes element also nicht aus dem textfluss nehmen dieser böse^^
Zum Vergrößern anklicken....

natürlich nimmt der IE ein gefloatetes Element aus dem Textfluß. Dein Problem hat damit rein gar nix zu tun gehabt.

Vielleicht schaust du dir die Seite mal mit dem IE6 an. Sieht ziemlich scheußlich aus.
Der IE6 kann nicht mit alphatransparenten png's umgehen. Du mußt ihm per CC den alpha-Filter zuladen. Schau mal hier. :wink:

edit. endlich auch mal schneller gewesen. :D
 
Zuletzt bearbeitet:
dage schrieb:
ah stimmt der i-net explorer will ein gefloatetes element also nicht aus dem textfluss nehmen dieser böse^^
Zum Vergrößern anklicken....
Nein,
da hast du etwas falsch verstanden.
Alle IEs ab Vers.5 bis IE7 (von den noch älteren habe ich keine Ahnung) nehmen Floats aus dem Textfluss.
Nur wenn das Elternelement Layout hat, verhält es sich wie eine geclearte Box.

Ich habe mir dein Beispiel nicht genau angesehen, aber ich vermute ein Rundungsfehler im IE.

Der Hinweis mit width:49%; währe von daher nicht verkehrt.
Es dürfte aber auch width: 49.9%; für eines der gefloateten Elemente reichen.

Edit:
Koslowskis Beitrag habe ich erst nach dem absenden gelesen.
Deshalb kam es zu der Wiederholung
 
Zuletzt bearbeitet:
Tach,

neuroleptika schrieb:
Ich habe mir dein Beispiel nicht genau angesehen, aber ich vermute ein Rundungsfehler im IE.

Der Hinweis mit width:49%; währe von daher nicht verkehrt.
Es dürfte aber auch width: 49.9%; für eines der gefloateten Elemente reichen.
Zum Vergrößern anklicken....

jep, wegen dem IE sollte man nebeneinanderstehende floats nicht so "auf Kante nähen", sondern immer ein bißchen Spiel lassen. :smile:

Soweit ich weiss kommt der IE<7 nur mit glatten %-Zahlen klar, das was hinter dem Komma steht schneidet er ab.
Bei em z.B. hat er z.B. dagegen überhaupt keine Probleme zwei Stellen hinter dem Komma richtig zu berechnen.

edit. Tach Jens,
da wo ich mich sonst oft aufhalte bin ich meist zu langsam.
Jetzt hab ich auch mal Glück gehabt. :smile:
 
koslowski schrieb:
......
Soweit ich weiss kommt der IE<7 nur mit glatten %-Zahlen klar, das was hinter dem Komma steht schneidet er ab.
Bei em z.B. hat er z.B. dagegen überhaupt keine Probleme zwei Stellen hinter dem Komma richtig zu berechnen.

edit. Tach Jens,
da wo ich mich sonst oft aufhalte bin ich meist zu langsam.
Jetzt hab ich auch mal Glück gehabt. :smile:
Zum Vergrößern anklicken....
Jo Klaus, U.A deshalb bin ich hier her gekommen;-).
Hier bin ich selten der Langsamere.

Ich denke mit 49.9% sind die meistens Browser gut bedient und der IE6 bekommt genügend Platz (sein es für ihn auch nur 49%)
 
Vielleicht schaust du dir die Seite mal mit dem IE6 an. Sieht ziemlich scheußlich aus.
Der IE6 kann nicht mit alphatransparenten png's umgehen. Du mußt ihm per CC den alpha-Filter zuladen. Schau mal hier. :wink:
Zum Vergrößern anklicken....
Ist auf der to-do Liste ;)

Ok ich weiß das es ein Fehler ist aber ich versuche trotzdem zu verstehen warum das jetzt so funktioniert wie es funktioniert ;ugl
Für den i-net Explorer 7 muss also eines der div's 49% breit sein weil der nicht rechnen kann. Oder falsch zusammenzählt. Aber warum freut er sich dann noch über ein margin-left von 0% bei dem rechten div (nur width:49% verändert nix)? Sollte das dann nicht ganz nach links rutschen und das andere div überlagern (so wie es beim firefox passiert)?
Und in der Praxis muss man das rechte div kleiner als 39% machen wenn man bei dem margin-left von 50% bleiben will. Wo hat er die 10% in dem Fall versteckt?
 
Jetzt kapier ich erst was du gemacht hast.
Du floatest nur .film_links und möchtest den Inhalt von .film_rechts mit margin am umfließen hindern.
Dazu bräuchte .film_rechts kein width sondern nur ein margin.
ohne width und float nimmt .film_rechts die gesamte, zur Verfügung stehende Breite ein.

Wenn du den Inhalt von .film_rechts trotzdem eine Breite geben möchtest,
schreibe es in ein weiters Blockelement innerhalb von .film_rechts:
Code: 
div.film_links {
width:50%;
height:300px;
float:left;

}
div.film_links_ende {
height:300px;
}
div.film_rechts {
height:300px;
margin-left:50%;
}

div.film_rechts_innen {
width: 50%;
}
html
Code: 
<div class="film_rechts">
<div id="film_rechts_innen">
<h2>
<a class="film" href="/blubbfilms_v2/filme.php?film=werbefilm" >Werbefilm...</a>
</h2>
 <img src="imagines/platzhalter_trailer.jpg" alt="Bild .. />
 <p class="mittig">......</p>
</div>
 </div>
 
Ich habe auch das Problem mit dem IE7. Mein CSS sieht so aus:

Code: 
body
{
background-color: #ffffff;
font-family: Verdana;
font-size: 80%;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}

#wrapper
{
width: 1000px;
margin: 20px auto;
background-image: url(Grafiken/hintergrund1000.jpg);
}

#kopf
{
background-color: #CF2538;
}

h1
{
text-align: center;
color: #FFFFFF;
margin:0;
font-size: 2.1em;
background-image: url(Grafiken/banner.jpg);
height: 135px;
background-repeat: no-repeat;
background-position:center;
}

#menue
{
width: 140px;
margin: 0 0 0 10px;
float: left;
clear: both;
}

ul {
    margin: 10;
    padding: 0;
    list-style: none;
    width: 140px;
    }
    
ul li {
    position: relative;
    }
    
li ul {
    position: absolute;
    left: 139px;
    top: 0;
    display: none;
    }

ul li a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    background: #CF2538;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }
    

li:hover ul { display: block; }

#menue a:hover
{
color: #CF2538;
background-color: #C0C0C0;
}

#inhalt
{
width: 800px;
padding: 10px;
float: right;
color: #ffffff;
}


#fuss
{
text-align: right;
padding-right: 20px;
background-color: #CF2538;
color: #FFFFFF;
height:20px;
clear: both;
}
Ich habe ein Menü erstellt, das beim Drüberfahren mit dem Mauszeiger rechts ein Untermenü aufmacht.
Eigentlich wollte ich bei #menue den display:inline Befehl eintragen, damit der IE7 erkennt, daß das aufzuklappende Menü direkt rechts am Hauptmenüpunkt anschließen soll, aber es tut sich nichts.

Wie muß ich vorgehen?
 
Zuletzt bearbeitet von einem Moderator:
Hier mal der HTML-Code der Indexseite:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Andreas Zobel Werkzeugmaschinen - Herzlich willkommen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="abschluss.css">

<style type="text/css">
.style1 {
	font-size: x-small;
}
.style2 {
	text-align: center;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="kopf">
<h1>&nbsp;</h1>
</div> <!--Ende kopf-->

<div id="menue">

 <ul> 
    <li><a href="index.htm">Startseite</a></li> 
    <li><a href="#">An- und Verkauf</a> 
      <ul> 
        <li><a href="Maschinen/drehen.htm">Drehen</a></li> 
        <li><a href="Maschinen/fraesenhorizontal.htm">Fräsen horizontal</a></li> 
        <li><a href="Maschinen/fraesenvertikal.htm">Fräsen vertikal</a></li>
        <li><a href="Maschinen/sonstige.htm">Sonstige</a></li>
        <li><a href="zubehoer.htm">Zubehör und Teile</a></li> 
      </ul> 
    </li> 
    <li><a href="suw.htm">Service und Wartung</a></li>
    <li><a href="links.htm">Links</a></li> 
	<li><a href="kontakt.htm">Kontakt</a></li>
	<li><a href="anfahrt.htm">Anfahrt</a></li>
	<li><a href="impressum.htm">Impressum</a></li>
	<li><a href="agb.htm">AGB</a></li>
  </ul></div>

<div id="inhalt">
<p class="style2">Herzlich willkommen auf der Internetseite der Firma Andreas Zobel 
Werkzeugmaschinen</p>
<p class="style2"><img src="Bilder/DSC09251_klein.JPG" width="400" height="300"></p>
<p>&nbsp;</p>
</div><!--Ende inhalt-->

<div id="fuss" class="style1">© Andreas Zobel Werkzeugmaschinen</div><!--Ende fuss-->

</div><!--Ende wrapper-->
</body>
</html>
 
Code: 
#menue
{
width: 140px;
margin: 0 0 0 10px;
...
...
}
Ergeibt eine Breite von 150px;

Code: 
ul {
    margin: 10;
...
...
    width: 140px;
    }
Sind aber zusammen 160px Breite.
Der Fehler des IE6 besteht darin, daß er das gefloatete Elternelement auseinanderdrückt, anstelle den überstehenden Inhalt einfach nur überstehen zu lassen.
Warum die Boxen im IE7 nicht nebeneinander passten kann ich jetzt auch nicht sagen.

Richtig ist es deswegen aber nicht. Die Boxen sollten ineinanderpassen.

So passen sie jedenfalls:
Code: 
#menue
{
width: 140px;
margin: 0 0 0 10px;
float: left;
clear: both;
}

ul {
    padding: 0;
    list-style: none;
    width: 120;
    margin: 10px auto;
    }
    
ul li {
    position: relative;
    }


    
li ul {
    position: absolute;
margin: 0; /*margin aus ul zurücksetzen*/
    left: 139px;
    top: 0;
    display: none;
    }
Im html solltest du die Zeilenumbrüche auskommentieren um einen weiteren Bug im IE6 zu umgehen (whitespace-bug).
Code: 
...
       <li><a href="suw.htm">Service und Wartung</a></li><!--
   --><li><a href="links.htm">Links</a></li><!-- 
   --><li><a href="kontakt.htm">Kontakt</a></li>
...
Der IE unter Vers.7 kennt :hover nur für <a>
Ein Javascript um zum "nachrüsten" für li:hover ist auf A List Apart: Articles: Suckerfish Dropdowns zu finden.
 
Zuletzt bearbeitet:
Danke für deine Hilfe. Immerhin bleibt nun das Menü direkt am Elternelement. Aber dafür verschwindet es meistens (nicht immer), wenn man mit der Maus darüberfährt.
Und in Opera sind die Kindelemente nun so eng, daß er einen Zeilenumbruch vollzieht.

Wie kann man das beheben?

Bin ehrlich gesagt noch blutiger CSS-Anfänger und habe erst vor kurzem begonnen, mich in diese Materie einzuarbeiten.
 
Zuletzt bearbeitet:
Dr. Mottes schrieb:
Aber dafür verschwindet es meistens (nicht immer), wenn man mit der Maus darüberfährt.
Zum Vergrößern anklicken....
Kommt das nur im IE vor?
Lade mal eine Testseite mit dem aktuellen Stand hoch.
Vielleicht noch ein Bild wie es aussehen soll.

Ich würde der Navigation mehr Platz geben. Verdana ist eine Schrift mit ziemlich großer Laufweite. Da sind 120px bzw. 140px sehr knapp bemessen.
Das wird in einigen Browser auch in der Standardeinstellung sehr eng.
Längere Wörter, die sich nicht umbrechen lassen, könnten im IE6 das Layout sprengen.
 
Ich hoffe, ich habe es so richtig hochgeladen^^

Wie es aussehen soll, ist eigentlich sehr leicht zu beschreiben. Das Untermenü von "An- und Verkauf" soll direkt ans Hauptmenü anschließen, wie es für solche Menüs üblich ist.
Die Zellen sollen ohne Zeilenumbrüche auskommen. Beim Opera stehen z.B. die beiden Wörter "Fräsen horizontal" direkt untereinander.
Beim IE7 stehen sie schön nebeneinander, dafür verschwindet das Menü ständig.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Andreas Zobel Werkzeugmaschinen - Herzlich willkommen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="abschluss.css">

<style type="text/css">
.style1 {
	font-size: x-small;
}
.style2 {
	text-align: center;
}
</style>

</head>
<body>

<div id="wrapper">

<div id="kopf">
<h1>&nbsp;</h1>
</div> <!--Ende kopf-->

<div id="menue">

 <ul> 
    <li><a href="index.htm">Startseite</a></li><!-- 
    --><li><a href="#">An- und Verkauf</a><!-- 
      --><ul><!-- 
        --><li><a href="Maschinen/drehen.htm">Drehen</a></li><!-- 
        --><li><a href="Maschinen/fraesenhorizontal.htm">Fräsen horizontal</a></li><!-- 
        --><li><a href="Maschinen/fraesenvertikal.htm">Fräsen vertikal</a></li><!--
        --><li><a href="Maschinen/sonstige.htm">Sonstige</a></li><!--
        --><li><a href="zubehoer.htm">Zubehör und Teile</a></li><!-- 
      --></ul><!-- 
    --></li><!-- 
    --><li><a href="suw.htm">Service und Wartung</a></li><!--
    --><li><a href="links.htm">Links</a></li><!-- 
	--><li><a href="kontakt.htm">Kontakt</a></li><!--
	--><li><a href="anfahrt.htm">Anfahrt</a></li><!--
	--><li><a href="impressum.htm">Impressum</a></li><!--
	--><li><a href="agb.htm">AGB</a></li><!--
  --></ul></div>

<div id="inhalt">
<p class="style2">Herzlich willkommen auf der Internetseite der Firma Andreas Zobel 
Werkzeugmaschinen</p>
<p class="style2"><img src="Bilder/DSC09251_klein.JPG" width="400" height="300"></p>
<p>&nbsp;</p>
</div><!--Ende inhalt-->

<div id="fuss" class="style1">© Andreas Zobel Werkzeugmaschinen</div><!--Ende fuss-->

</div><!--Ende wrapper-->
</body>
</html>
 
Dr. Mottes schrieb:
Ich hoffe, ich habe es so richtig hochgeladen
.....
Beim IE7 stehen sie schön nebeneinander, dafür verschwindet das Menü ständig.
Zum Vergrößern anklicken....
Mit hochladen meinte ich eigentlich auf einen erreichbaren Server hochladen.
Hab ich jetzt mal gemacht:
Andreas Zobel Werkzeugmaschinen - Herzlich willkommen


Das html habe ich aus deinem letzten Post Kopiert.
Das css leicht verändert:
Code: 
body
{
background-color: #ffffff;
font-family: Verdana;
font-size: 80%;
width: 100%;
height: 100%;
margin: 0;
padding:0;
}

#wrapper
{
width: 1000px;
margin: 20px auto;
background-image: url(Grafiken/hintergrund1000.jpg);
background-color: #DADADA;
}

#kopf
{
background-color: #CF2538;
}

h1
{
text-align: center;
color: #FFFFFF;
margin:0;
font-size: 2.1em;
background-image: url(Grafiken/banner.jpg);
height: 135px;
background-repeat: no-repeat;
background-position:center;
}

#menue
{
[B][COLOR=DarkRed] width: 200px; /* so viel Platz wie möglich*/[/COLOR][/B]
float: left;
background-color: #BFDFE3;
}

ul {
[B][COLOR=DarkRed]     margin: 10px auto; /*Liste zentriert*/
    padding: 0; /*Kein Padding nötig*/
    list-style: none;
    width: 150px; /*Kann bis max. 200px erweitert werden*/[/COLOR][/B]
    }
    
ul li {
    position: relative;
    }
    
li ul {
    position: absolute;
    left: 149px;
    top: 0;
    display: none;
    margin: 0;
    }

ul li a {
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    background: #CF2538;
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }

[B][COLOR=DarkRed] * +html ul li a {
zoom: 1; /*layout für IE7 */
}

* html ul li a {
height: 1px; /*layout für IE6 */
}[/COLOR][/B] 
    

li:hover ul { display: block; }

#menue a:hover
{
color: #CF2538;
background-color: #C0C0C0;
}

#inhalt
{
width: 800px;
float: right;
color: #ffffff;
background-color:#CF6800;
}


#fuss
{
text-align: right;
padding-right: 20px;
background-color: #CF2538;
color: #FFFFFF;
height:20px;
clear: both;
}




.style1 {
    font-size: x-small;
}
.style2 {
    text-align: center;
}
Die erste ul hat etwas mehr Platz.
das padding aus #inhalt habe ich entfernt.
Du kannst ein weiteres <div> in #inhalt schreiben, welches nur padding bzw. margin enthält. Ein <div> ohne float und width (und wenige Ausnahmen) nimmt die gesamte Breite ein, die es bekommen kann.

Wie du das clearing gestaltest hängt auch von der Verwendung der Grafiken ab (repeat; Größe).

Deswegen wäre es gut gewesen es als Ganzes zu sehen.

Anstelle der background-image habe ich nun teilweise background-color werwendet.
Der "verschwindenden Inhalt" lag am fehlenden Layout für IE.
 
Zuletzt bearbeitet:
Hab 1001 Dank für deine mächtige Hilfe. Ich konnte das Ergebnis umsetzen. Dann kann ich mich nun auch langsam daran machen, unsere Vereinsseite, welche noch auf Frames basiert, endlich zu überarbeiten.

Bin dir echt dankbar.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben