Geschickt IE- Größen-Bug umgehen ?

cosmanova · 20. September 2007

Hallo

Ich passe gerade meine Seite an IE, Moziall und Opera an. Vom Layout lässt sich das mittels verschiedener Layout.css - Dateien noch ganz gut hinbiegen. Probleme bekomme ich nun bei der Gestaltung des Inhalts:

Während Mozilla und Opera alles einigermaßen gleich darstellen, tritt beim IE der Bug auf, dass er die Größenangaben immer verdoppelt (also zb: Breite, Höhe ect.). Wie gesagt kann ich das beim Layout noch mit einer seperaten CSS regeln, aber wie mache ich das Geschickt beim Inhalt ? Ich kann und will nicht für jede Größenangabe (z.B. Zeilenabstand) dem IE eine Extrawurscht schreiben.

Gibt es da ein Sript oder ähnliches, vielleicht auch CSS wie ich das konkret festlegen kann, dass der IE z.B die Größenangaben immer um XY% kleiner darstellt ? Wie kann man das Problem lösen ?

Ich hoffe ihr versteht einigermaßen was ich meine. Ansonsten bitte noch mal fragen.

Viele Grüße
Cosmi

fish-guts · 20. September 2007

Hallo

Um die Browserweichen wirst du wohl nicht herumkommen.

Microsoft macht diese Bugs ja ganz bewusst ("Es sind keine Bugs; es sind Features"), damit jeder weniger Erfahrene Webdesigner auf IE Norm schreibt, und die User so zwingt, den IE zu verwenden (das hab ich zumindest irgendwo gelesen)

Eine andere Lösung kenne ich leider nicht, als dass du jeder Grössenangabe zweimal setzen musst.... Sorry

Gruss

FG

// EDIT: Du könntest aber vielleicht mit JavaScript etwas versuchen.... ob das so geht, weiss ich allerdings nicht....

mackattack · 20. September 2007

cosmanova hat gesagt.:
...tritt beim IE der Bug auf, dass er die Größenangaben immer verdoppelt...

Na Hoppla... das höre ich auch zum ersten Mal

...
Es gibt durchaus diverse Probleme, die im IE auftreten, was Größen und Maßangaben betreffen, jedoch kann man diese nicht wirklich pauschalisieren.
Die wohl größten Fehler treten auf, wenn sich der IE im "Quirks"-Modus befindet. Das ist z.B. der Fall, wenn du im IE 6 keinen Doctype definiert hast... In diesem Modus nutzt der IE ein anderes Box-Modell als die anderen von dir genannten Browser.

Vielleicht kannst du die Probleme etwas genauer darstellen, wie z.B. welchen IE du jetzt explizit meinst, ob du einen Doctype gesetzt hast und natürlich sonstige Informationen, die für uns hilfreich sind.

Gruß,
MackAttack

Maik · 20. September 2007

Hi,

cosmanova hat gesagt.:
tritt beim IE der Bug auf, dass er die Größenangaben immer verdoppelt

das wäre mir neu, dass der IE die width- und height-Angaben verdoppelt.

Vielmehr kenne ich von ihm die Verdoppelung der margin-Angaben bei floatenden Boxen, auch bekannt als "Double-Margin-Bug".

Für sachdienlichere Hinweise solltest du hier besser mal den Quellcode anhängen oder einen Link zur Seite nennen.

cosmanova · 21. September 2007

Ihr habt recht - es sind wohl die margin-Angaben. Ein kleines Problem habe ich gerade gelöst... bleibt jetzt z.B. hier das Problem, dass die Textzeile unter dem Bild ein margin-left 15px hat. Mozilla und Opera zeigens richtig an, beim IE(6.0) werden weniger px angezeigt.

Wie gesagt will ich den Inhalt jetzt einigermaßen vernünftig in Mozilla (1.5.0.12), IE (6.0 und 5) und Opera(9.22) anzeigen lassen.

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>TEXT</title>

<LINK href="layout-absorber-test.css" rel=stylesheet type=text/css>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type"/>
<style type="text/css">

</style>
</head>

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie.css">
<![endif]-->

<!--[if lte IE 5.599]>
<link rel="stylesheet" type="text/css" href="style-IE5-FINAL.css">
<![endif]-->


<body>

<div id="topborder">
   <span style="height: 1px"></span>
</div>


<div class="topmenu">
   <table width="100.1%" border="0" cellpadding="0" cellspacing="0">
       <tr>
         <td class="td-hidden" align="center" width="190">&#160</td>
         <td class="td-hidden" width="555" height="100" ><h1 id="slogan" style="color: #067996">TEXT<span style="color:#7cdcf4">TEXT</span></h1>
         <td class="td-hidden" bgcolor="#e4eff6">
            <ul class="contact">
              --> NAVIGATION OBEN
            </ul>
         </td>
      </tr>
   </table>
</div>


<div class="backbox">

<div style="margin: 0 0 0 200px; padding-top: 0;">
   <a href="index.html" style="color: #df0029; font-size: 0.8em; font-weight: bold; background-color: #e4eff6">home</a>
</div>

	<div class="sidemenu">
    <ul class="navi">
          --> NAVIGATION SEITE
	   </ul>
	 <div class="menupic">&#160</div>
	</div>

 <div class="textbox" style="height: 658px;">

    <h1 align="center">Überschrift</h1>

    <div style="height: 210px; float: left; margin: 0 0 0 15px; display: inline; border: 1px solid red;"><img src="Bild">BILD 1</div>
    <div style="margin: 50px 0 0 400px; height: 180px; border: 1px solid red;">
	      <table border="0" align="center" width="260" height="100">
	         <tr>
	            <td class="td-hidden"><span class="fontstyleitalic">Text:</span></td>
	            <td class="td-hidden">1&#34</td>
	         </tr>
	      </table>
    </div>
    <p style="clear: all; margin: 5px 0 28px 15px; border: 1px solid red;">
       Text Text Text Text Text Text Text Text Text Text Text Text.
    </p>
    <div style="background-image:url(Bilder/trennlinie.jpg);">&#160</div>

    <h1 align="center">Überschrift 2 Text Text Text Text Text Text Text Text Text</h1>

    <div style="float: left; margin: 0 0 0 15px; border: 1px solid red;"><img src="Bild" height="100">BILD 2</div>
    <div style="margin: 0 0 17px 400px; border: 1px solid red; height: 150px;">
 	     <table border="0" align="center" width="260" height="100">
	         <tr>
	            <td class="td-hidden"><span class="fontstyleitalic">Text</span></td>
	            <td class="td-hidden">1&#34</td>
	         </tr>
	      </table>
    </div>

    <p style="clear: all; margin: 10px 0 0 15px; border: 1px solid red;">
       Text Text Text Text Text Text Text Text Text Text Text Text Text. Text Text Text Text Text Text Text Text Text Text Text Text.
       Text Text Text Text Text Text Text Text Text Text Text Text.
    </p>
 </div>
</div>
</body>
</html>

Layout-CSS

Code:

body {
margin: 0;
padding: 0;
background: #f0f4f6;
}

.backbox {
border: 0px;
margin-left: 15px;
background: #e4eff6;
padding: 0px 0px 15px 0px;
width: 950px;
height: 100%;
border-right: 15px solid #0084A5;
border-bottom: 3px solid #0084A5;
border-left: 2px solid #b9def4;
}

p {
margin: 15px;
font-family: Verdana, Arial, sans-serif, "Trebuchet MS";
font-size: 0.8em;

}

h1 {
color: #067996;
font-size: 1.2em;
font-family:  Verdana, Arial, sans-serif, "Trebuchet MS";
padding: 10px 0 10px 0;
margin-left: 80px;
}

h1#slogan {
font-size: 31px;
font-family: Times, Arial Narrow, Raavi;
white-space: nowrap;
padding: 0;
margin: 0;
}

h2 {
font-size: 1em;
color: #067996;
font-family:  Verdana, Arial, sans-serif, "Trebuchet MS";
margin: 0px;
padding: 0px;
}

.table {
font-size: 1em;
border-top: 1px solid #e0e0ed;
border-left: 1px solid #e0e0ed;
border-right: 1px solid #a1a1a1;
border-bottom: 1px solid #a1a1a1;
}

td {
border-top: 1px solid #a1a1a1;
border-left: 1px solid #a1a1a1;
border-right: 1px solid #e0e0ed;
border-bottom: 1px solid #e0e0ed;
}

.td-hidden {
border: 0px solid pink;
}

.tablestyle {
background: #e1f2f9;
font-weight: bold;
font-size: 12px ;
}

.fontstyleitalic {
font-family: Verdana, Arial, sans-serif, "Trebuchet MS";
font-weight: bold;
font-style: italic;
font-size: 11px;
}

#topborder {
border: 1px solid black;
margin: 10px 0 0 15px;
width: 950px;
border-top: 15px solid #a9d6ef;
border-right: 15px solid #0084A5;
border-bottom: 1px solid #0084A5;
border-left: 2px solid #b9def4;
font-size: 1px;
background: #a9d6ef;
}

.topmenu {
background: #0084A5;
border-right: 15px solid #0084A5;
border-left: 2px solid #b9def4;
margin: 0 0 0 15px;
width: 950px;
}

#stripline {
width: 99%;
border: 0px solid black;
padding:0px 0 2px 0;
margin-left: 7px;
background:transparent;
border-bottom:1px solid #0084A5;
}

.sidemenu{
float: left;
margin: 0px 0px 0px 19px;
border: 2px solid #ffffff;
height: 685px;
background-image:url(Bilder/navi_b.gif);
}

.menupic {
border-top: 1px solid #ffffff;
background-image:url(Bilder/nav.gif);
height: 295px;
width: 158px;
margin: 0;
padding:0;
}

ul {
list-style-type: none;
}

ul.contact {
border: 0px solid black;
list-style-type: none;
text-align: right;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 90%;
line-height: 150%;
margin: 1px 15px 0 0;
width: 140px;

}

a.contact {
text-decoration: none;
color: #0084A5;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}


a.contact:hover {
background-color: #e4eff6;
color: #df0029;
}

ul.navi {
list-style-type: none;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 14px;
line-height: 180%;
border: 0px;
background: #f0f4f6;
width: 158px;
margin: 0px;
padding: 0px;
}

a.navi {
display: block;
text-decoration: none;
background-image:url(Bilder/button_background.gif);
border-bottom: 1px solid #ffffff;
font-weight: bold;
padding: 0px 14px;
margin: 0 0 0px 0;
width: 130px;
color: #0084A5;
}

a.naviebene2 {
text-decoration: none;
color: #000000;
}

a:hover {
background-color: #f0f4f6;
color: #df0029;
}

.dot {
font-weight: bold;
color: #0084A5;
background-repeat:no-repeat;
}

.list {
margin: 10px 0 1px 0;
color: #067996;
font-weight: bold;
font-family:  Verdana, Arial, sans-serif;
font-size: 0.8em;
}

.textbox {
border: 1px solid #b9def4;
background-color: #f0f4f6;
width: 710px;
height: 100%;
margin-left: 190px;
padding: 15px 15px 15px 15px;
}

style CSS - IE Version 7:

Code:

h1 {
width: 520px;
}

#topborder {
width: 951px;
}

ul.contact {
width: 185px;
}


.sidemenu {
margin: 0 0 0 9.5px;
}

.menupic {
border-top: 0px solid #ffffff;
}

style CSS - IE Version 5:

Code:

.backbox {
margin-left: 0px;
padding-bottom: 15px;
background: #e4eff6;
width: 980px;
}

#topborder {
margin: 10px 0 0 0;
width: 980px;
}

.topmenu {
background: #0084A5;
margin: 0 0 0 0;
width: 979px;
}

#stripline {
width: 100%;
margin: 0px;

}

ul.contact {
line-height: 105%;
width: 170px;

}

a.contact {
width: 30%;
}

.tablewidth-ie5-1 {
width: 210px;
}

.tablewidth-ie5-2 {
width: 560px;
}


.sidemenu{
width: 188px;
margin: 0px 0px 0px 0px;
padding: 8px 0 8px 0;
border: 1px solid #b9def4;
}

.menupic {
border: 2px solid #ffffff;
height: 345px;
width: 160px;
margin-left: 17px;
}



ul.navi {
border: 0px;
}

a.navi {
width: 160px;
margin: 0px;
}

.divboxtext {
margin-left: 205px;
height: 698px;
}

Viele Grüße
Cosmi

===> Habe gerade eine Lösung gefunden: Es handelte sich wohl um den Double-Float Margin Bug . Habe display: inline; in der Box von Bil1 ergänzt und es scheint zu funktionieren.

Mal sehen ob ich bei der Anpassung nun noch auf weitere Probleme stoße

Ist es normal, dass Mozilla & Co die Seite bei einem *clear:left;* falsch darstellen ? Wenn ich stattdessen *clear: all;* nehme funktioniert das ?

Vielen Dank schon mal

Maik · 21. September 2007

Hi,

cosmanova hat gesagt.:
Ist es normal, dass Mozilla & Co die Seite bei einem *clear:left;* falsch darstellen ? Wenn ich stattdessen *clear: all;* nehme funktioniert das ?

einen Wert all für die clear-Eigenschaft gibt es überhaupt nicht, sondern:

none
left
right
both
inherit

Meines Erachtens ist für die beiden Textabsätze die clear-Eigenschaft aber überhaupt nicht erforderlich, und dürfte daher der Grund dafür sein, dass die Browser die Seite falsch darstellen, wenn du clear:left deklarierst, denn clear:all hat dieselbe Wirkung, wie wenn die clear-Eigenschaft überhaupt nicht angegeben wird.

cosmanova · 21. September 2007

Danke für den Hinweis

Das clear:all gibts schon, aber in diesem Zusammenhang:

<br clear="all">

http://de.selfhtml.org/html/grafiken/ausrichten.htm

Maik · 21. September 2007

Der Wert both für die CSS-Eigenschaft clear entspricht dem Wert all für das HTML-Attribut clear.

Maik · 21. September 2007

cosmanova hat gesagt.:
bleibt jetzt z.B. hier das Problem, dass die Textzeile unter dem Bild ein margin-left 15px hat. Mozilla und Opera zeigens richtig an, beim IE(6.0) werden weniger px angezeigt.

Du hast für die zweite Box mit Bild Nr.2 die display:inline-Deklaration vergessen, weshalb der IE (5 + 6) den linken margin-Wert weiterhin verdoppelt.

Geschickt IE- Größen-Bug umgehen ?

cosmanova

Mitglied

fish-guts

Erfahrenes Mitglied

mackattack

Mitglied

Maik

cosmanova

Mitglied

Maik

cosmanova

Mitglied

Maik

Maik

Neue Beiträge