✔ runde ecken - falsch im ie7

08154711 · 16. Juni 2008

Hallo,
Habe eine Box die sich am Inhalt ausrichten soll, das klappt allerdings nur im FF im IE wird das allerdings verkehrt dargestellt

Code:

.box {
	margin:50px auto;
	width: 800px;
	background: #ff0000;
}
.box .left {
	float: left;
}
.box .right {
	float: right;
}
.box p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
	clear: both;
}
div.clear {
	clear: both;
	height: 0px;
	line-height: 0px;
}

HTML:

<div class="box"> <img src="topleft.gif" class="left" alt="" width="10" height="10"/> <img src="topright.gif" class="right" alt="" width="10" height="10"/>
  <p> Ut enim ad minim veniam, duis aute irure dolor lorem ipsum dolor sit amet. Sunt in culpa consectetur adipisicing elit, ut labore et dolore magna aliqua. Ullamco laboris nisi sed do eiusmod tempor incididunt quis nostrud exercitation. Velit esse cillum dolore sunt in culpa eu fugiat nulla pariatur. Mollit anim id est laborum.</p>
  <p>Consectetur adipisicing elit, quis nostrud exercitation ut enim ad minim veniam. Excepteur sint occaecat. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p>
  <img src="bottomleft.gif" class="left" alt="" width="10" height="10"/> <img src="bottomright.gif" class="right" alt="" width="10" height="10"/>
  <div class="clear"></div>

Sinn der Sache ist, eine flexible Box die sich nach dem Inhalt ausrichtet. Was natürlich auch geht die Sache mit Tabellen zu lösen. Dort zieht einfach nur die Höhe und Breite und passt die anderen Tabellenwerte an.
Danke

Maik · 16. Juni 2008

Hi,

mit deinem Attachment lässt sich nichts anfangen.

Datei kann nicht geöffnet werden: Offenbar handelt es sich nicht um ein gültiges Archiv.

Üblicherweise werden die runde Ecken technisch als Hintergrundbilder erzeugt.

Eine mögliche Technik findest du in dem Thread Css Grafiken wie hier die Boxen ? und weitere 25 in dem Artikel 25 Rounded Corners Techniques with CSS.

mfg Maik

08154711 · 16. Juni 2008

HI,
Im Anhang sind die 4 "runden Ecken" als Zip gepackt. Eigentlich lässt es sich mit winrar entpacken. Habe mir Deine Empfehlung mal angesehen. Auf
http://www.vertexwerks.com/tests/sidebox/
wird die Box wird bei mir allerdings zerrissen dargestellt. (Auflösung 1080x1050) Das ist nicht das erste mal, auch bei einigen Web - Designern sieht es "zerissen" aus.

08154711 · 16. Juni 2008

Hier nochmal der Anhang.

Maik · 16. Juni 2008

08154711 hat gesagt.:
HI,
Habe mir Deine Empfehlung mal angesehen. Auf
http://www.vertexwerks.com/tests/sidebox/
wird die Box wird bei mir allerdings zerrissen dargestellt. (Auflösung 1080x1050) Das ist nicht das erste mal, auch bei einigen Web - Designern sieht es "zerissen" aus.

Dann schau dir die übrigen Möglichkeiten an, eine wird im IE oder mit deiner Bildschirmauflösung sicherlich funktionieren.

mfg Maik

Maik · 16. Juni 2008

... grundsätzlich kann ich bei dem genannten Demo im IE7 überhaupt keine zerrissene Darstellung ausmachen:

mfg Maik

08154711 · 16. Juni 2008

Hi,
Im Anhang habe ich 2 Screenshots einmal FF und einmal IE. Keine Ahnung wo im IE dieses Linie herkommt.

Das ist die obere Box, die wird bei mir ebenfalls korrekt dargestellt. Das ist die zweite Box ganz unten, diese wird bei mir "zerrissen" dargestellt.

Maik · 17. Juni 2008

Hi,

der Darstellungsfehler tritt übrigens auch im IE6 auf.

Lösung:

Code:

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

Das inhaltsleere DIV.clear im Markup liesse sich auch ganz elegant durch diese Regeln ersetzen:

Code:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Code:

<div class="box clearfix"> ... </div>

Ich gehe mal davon aus, dass du lediglich hier in deinem eingangs gezeigten HTML-Code das schliessende </div> des DIVs .box vergessen hast.

mfg Maik

08154711 · 17. Juni 2008

Hi,
Danke für den Tip, mit font-size 0 passt es, wenn ich allerdings das DIV.clear einfüge - siehe Screenshot

Maik · 17. Juni 2008

Tja, da hast du dann wohl irgendwo etwas falsch gemacht, denn bei mir gibt's da mit beiden Varianten browserübergreifend keinen derartigen Darstellungsfehler.

Oder was bedeutet der "rechteckige" Block unterhalb der "abgerundeten" Box, bzw. auf welchem Element basiert er? :suspekt:

Variante 1:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_08154711</title>

<style type="text/css">
<!--
.box {
        margin:50px auto;
        width: 800px;
        background: #ff0000;
}
.box .left {
        float: left;
}
.box .right {
        float: right;
}
.box p {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
        clear: both;
}

div.clear {
        clear: both;
        height: 0px;
        line-height: 0px;
        font-size:0;
}
-->
</style>

</head>
<body>

<div class="box"> <img src="topleft.gif" class="left" alt="" width="10" height="10"/> <img src="topright.gif" class="right" alt="" width="10" height="10"/>
  <p> Ut enim ad minim veniam, duis aute irure dolor lorem ipsum dolor sit amet. Sunt in culpa consectetur adipisicing elit, ut labore et dolore magna aliqua. Ullamco laboris nisi sed do eiusmod tempor incididunt quis nostrud exercitation. Velit esse cillum dolore sunt in culpa eu fugiat nulla pariatur. Mollit anim id est laborum.</p>
  <p>Consectetur adipisicing elit, quis nostrud exercitation ut enim ad minim veniam. Excepteur sint occaecat. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p>
  <img src="bottomleft.gif" class="left" alt="" width="10" height="10"/> <img src="bottomright.gif" class="right" alt="" width="10" height="10"/>
  <div class="clear"></div>
</div>

</body>
</html>

Variante 2:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_08154711</title>

<style type="text/css">
<!--
.box {
        margin:50px auto;
        width: 800px;
        background: #ff0000;
}
.box .left {
        float: left;
}
.box .right {
        float: right;
}
.box p {
        font-family:Verdana, Arial, Helvetica, sans-serif;
        font-size:10px;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
        clear: both;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div class="box clearfix"> <img src="topleft.gif" class="left" alt="" width="10" height="10"/> <img src="topright.gif" class="right" alt="" width="10" height="10"/>
  <p> Ut enim ad minim veniam, duis aute irure dolor lorem ipsum dolor sit amet. Sunt in culpa consectetur adipisicing elit, ut labore et dolore magna aliqua. Ullamco laboris nisi sed do eiusmod tempor incididunt quis nostrud exercitation. Velit esse cillum dolore sunt in culpa eu fugiat nulla pariatur. Mollit anim id est laborum.</p>
  <p>Consectetur adipisicing elit, quis nostrud exercitation ut enim ad minim veniam. Excepteur sint occaecat. Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat.</p>
  <img src="bottomleft.gif" class="left" alt="" width="10" height="10"/> <img src="bottomright.gif" class="right" alt="" width="10" height="10"/>
</div>

</body>
</html>

mfg Maik

✔ runde ecken - falsch im ie7

08154711

Erfahrenes Mitglied

Anhänge

Maik

08154711

Erfahrenes Mitglied

08154711

Erfahrenes Mitglied

Anhänge

Maik

Maik

08154711

Erfahrenes Mitglied

Anhänge

Maik

08154711

Erfahrenes Mitglied

Anhänge

Maik

Neue Beiträge