06.04.2005, 13:06
|
|||
|
|||
:after / Clear ohne Markup / Cross-Browser Test
Moin,
durch diesen Artikel inspiriert habe ich mal ein wenig CODE zusammen gestellt. <edit date="22.09.2005"> ...leider ist der genannte Artikel nicht mehr Verfügbar, aus diesem Grunde verweise ich direkt zur Quelle:  http://jassesnee.de/easyclear/index.html </edit date="22.09.2005"> Worum geht es hier -> Dieses THEMA mit neuen Techniken zu bewältigen. Nun wäre es natürlich wichtig zu wissen welche Browser evtl. nicht damit zurecht kommen. Mit anderen Worten ein Cross-Browser Test. Bisher getestet: IE6 - Okay IE6(Quirks) - Okay Firefox 1.02 - Okay Code:
<!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="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/
* {
margin: 0;
padding: 0;
/* Tabellen
*/
border-collapse:collapse;
border-spacing: 0;
}
html,
body {
color: #000000;
background: #FFCC22;
/* line-height ohne Einheit - sonst Vererbung
*/
line-height: 1.45;
}
body {
/* Nur hier, sonst gibt es
* eventuell Vererbungsprobleme.
*/
font-size: 100.01%;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
div {
margin: 1em ;
border: 1px solid #000000;
padding: 0;
background-color: #FFFFFF;
}
p {
float: left;
clear: left;
margin: 0 1em 0 0;
border: 1px solid #00FF99;
padding: .5em;
background-color: #22CCFF;
}
.containing-float:after
{
/* Inhalt pseudo-Element :after;
* somit [clear] moeglich
*/
content: ".";
/* [content] verbergen;
*/
visibility: hidden;
height: 0;
/* Block-Level fuer [clear];
*/
display: block;
/* [float] clearing;
* einbeziehen der Float-Container;
*/
clear: both;
}
* html .containing-float
{
/* nur fuer IE-Win;
* definierte groeße (height or witdh)
* fuer automatisches einbeziehen
* der Float-Container (auto-clearing);
*
* verbergen IE-Mac \*/
height: 1%;
/* ende verbergen IE-Mac */
}
/*]]>*/
</style>
</head>
<body>
<div class="containing-float">
Floating Container</p>
Normaler Container....
Floating Container</p>
....continue.....
Floating Container</p>
....continue.....
</div>
</body>
</html>
__________________
</ulle> 
|
| Sponsored Links |
|
06.04.2005, 13:14
|
|||
|
|||
|
Unter WinXP:
IE 5.5 ok IE 5.01 ok Opera 7.04 ok Mozilla 1.6 ok Netscape 7.0 ok 
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
|
| Sponsored Links |
|
06.04.2005, 13:30
|
||||
|
||||
|
Was ähnliches zum Thema - hier werden vier verschiedene Varianten gezeigt, um ein clear zu "sparen" im Markup:
http://www.sitepoint.com/blog-post-view?id=238086
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic 
|
|
06.04.2005, 20:59
|
|||
|
|||
|
@^uncool; Danke für den umfangreichen Test.
So, nun habe ich diese Klasse [.containing-float] eingesetzt und konnte dafür einige andere Workorunds und einiges an Markup rauswerfen. ] ist das Ei des Kolumbus. ________ Schön wäre noch eine Safari-Test, und andere Browser
__________________
</ulle>
|
|
07.04.2005, 09:06
|
|||
|
|||
|
@philippp
Habe ich mir noch nie gedanken darüber gemacht. Im CSS sind auch 3 Byte mehr pro Farbangabe unrelevant. Wichtiger ist alle Kommentare und sonstigen Müll, wie White-Spaces zu entfernen, das spart eine Menge Byte's ein. Wobei es für den normalen Client-Browser nicht so dramatisch wäre, da ja nur einmal Übertragen, sofern nicht der Cache manipuliert ist. Anders sieht es mit Suchmaschinen-Spidern aus. Diese kommen sehr oft und saugen permanent das volle Programm. Der Rucksack mit unnötigem Markup wiegt Schlimmer.... Mit obiger CLASS [.containing-float] habe ich ein schönes äquivalent zum Containing Block. Für mich eine saubere Vorgehensweise.  Trenne Inhalt und Design (besser wäre eigentlich Layout zu sagen) !! Wenn nun aber zusätzliches Markup für eine Style-Eigenschaft wie FLOAT benötigt wird, dann ist dieser Grundsatz schon gebrochen.
__________________
</ulle>
|
|
07.04.2005, 11:19
|
|||
|
|||
|
Hier noch ein MacOSX-Test:
Safari: klappt Camino: klappt NN7: klappt IE5.2: klappt nicht; float wird nicht gecleared (gecleart?) und die fälschliche Verlängerung des IE Win macht er auch nicht.
|
|
07.04.2005, 12:41
|
|||
|
|||
|
Zitat:
http://positioniseverything.net/easyclearing.html -> display:inline-table für den mac IE. der hack exisitiert übrigens schon ne ganze weile. mittlerweile gibt es noch eine einfachere variante: Code:
.containing-float { overflow: auto; }
/* für IE */
* html .containing-float { height: 1% }
|
|
07.04.2005, 13:10
|
|||
|
|||
|
Zitat:
Zitat:
Nebenwirkungen in anderen Browsern hab' ich jetzt nicht getestet. Hast du mal Beispiele, wo's funktioniert? Im Moment würde ich noch die IEMac-hack-lose Variante bevorzugen (dann stimmt wenigstens bloß die Höhe des Containers nicht...) Grüße fricca
|
|
07.04.2005, 13:48
|
|||
|
|||
|
Zitat:
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Setzen von Minimalhöhe bei Kontentbox | Christophe | CSS | 4 | 17.06.2009 08:24 |
| Css Drop Down Menü Mehere Probleme | Katrin_286 | CSS | 5 | 10.10.2008 16:22 |
| 4 Grafiken - oben links, oben rechts, unten link, unten rechts - mittig text - wie? | flobox | CSS | 1 | 03.09.2008 21:58 |
| Problem mit div und Höhe | deep4 | CSS | 2 | 13.11.2007 20:03 |
| 3 Spalten Layout - Div Höhe aneinander angleichen | Simsi | CSS | 3 | 01.01.2006 18:04 |
Linear-Darstellung
