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
|
| Sponsored Links |
|
07.04.2005, 13:48
|
|||
|
|||
|
Zitat:
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| IE9: Höhe von Zeilen kann nicht fixiert werden | MarkP1972 | CSS | 5 | 05.02.2014 15:52 |
| CSS: Unterer Pfeil der Scrollbar nicht sichtbar - bessere Möglichkeit? | Stadtmensch | CSS | 13 | 13.06.2013 19:20 |
| :nth-child / :nth-of-type und Klassen | UnnamedProphet | CSS | 10 | 24.03.2011 16:32 |
| Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren | Alien | CSS | 17 | 20.03.2011 10:23 |
| Input Felder, IE und Firefox zeigen Unterschiede | priscylla | CSS | 2 | 21.01.2010 09:57 |
Linear-Darstellung
