09.09.2005, 16:51
|
|||
|
|||
IE und 3px-jog...
Hallo,
hoffe mal das mir hier geholfen wird? Gesucht und auch gelesen hab ich hier zum Thema einige Beiträge, nur werd ich da nicht schlau draus. Hab mir diese abgespeichert und auch ausprobiert, nur komme ich bei meinem Problem nicht weiter. In den Beispielen wurde stehts nur eine Box gefloatet, wie sieht das aber aus, wenn ich zwei oder mehr gefloatet habe. Siehe Codebeispiel unten... oder hier: Beispielseite... Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Beispielseite...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
body, html, td {
font: 90% Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: White;
color: Black;
margin: 0px;
padding: 0px;
}
body {
padding: 0px;
margin: 20px;
}
.clear {
clear: left;
line-height: 0px;
margin: 0px;
padding: 0px;
}
h1 {
color: #FAFAD2;
background-color: #D2691E;
margin: 2px 0px;
font: bold 18px/2 Verdana, Geneva, Arial, Helvetica, sans-serif;
text-indent: 10px;
}
#links {
margin: 0 2px 0 0;
background-color: #FFDAB9;
float: left;
padding: 10px;
width: 150px;
color: Black;
}
#mitte {
background-color: #F4A460;
margin: 0 2px 0 0;
float: left;
padding: 10px;
width: 200px;
color: Black;
}
#rechts {
background-color: #FFDAB9;
margin: 0 0 0 394px;
padding: 10px;
color: Black;
}
/*]]>*/
</style>
</head>
<body>
<h1>Überschrift...</h1>
<div id="links">Blindtext...</div>
<div id="mitte">Blindtext...
Blindtext...
Blindtext...</div>
<div id="rechts">Blindtext...
Blindtext...
Blindtext...
Blindtext...
Blindtext...
Blindtext...</div>
<br class="clear" />
<h1>Überschrift...</h1>
Hier gehts normal weiter...</p>
</body>
</html>
__________________
Gruss  Karlo
|
| Sponsored Links |
|
09.09.2005, 18:34
|
|||
|
|||
|
Code:
#links {
margin: 0;
background-color: #FFDAB9;
float: left;
padding: 10px;
width: 150px;
color: Black;
}
#mitte {
background-color: #F4A460;
margin: 0 0 0 2px;
float: left;
padding: 10px;
width: 200px;
color: Black;
}
#rechts {
background-color: #FFDAB9;
margin: 0 0 0 394px;
padding: 10px;
color: Black;
}
/*]]>*/
</style>
<!--[if lte IE 6]>
<style>
#rechts {
margin: 0 0 0 391px;
height:1%;
}
</style>
<![endif]-->
</head>
@tigerauge, in der rechten box sind die Zeilen, die neben dem mittleren float stehen, um 3px nach innen verschoben. Unter der Höhe des mittleren floats gehts normal weiter.
|
|
10.09.2005, 06:40
|
|||
|
|||
|
Hallo,
Zitat:
Zitat:
Hab's nun so gemacht, obwohl es immer noch nicht richtig hinhaut. Der letzte Div müsste noch um 1px nach links, spielt aber im Prinzip keine Rolle, da der Hintergrund ja weiß ist. Code:
#links {
margin: 0;
background-color: #FFDAB9;
float: left;
padding: 10px;
width: 150px;
color: Black;
}
#mitte {
background-color: #F4A460;
margin: 0 0 0 2px;
float: left;
padding: 10px;
width: 200px;
color: Black;
}
#rechts {
background-color: #FFDAB9;
margin: 0 0 0 394px;
padding: 10px;
color: Black;
}
*html #rechts {
margin: 0 0 0 391px;
height: 1%;
}
__________________
Gruss Karlo
|
|
10.09.2005, 07:30
|
|||
|
|||
|
Zitat:
Code:
<!--[if lte IE 6]>
<style>
#mitte {
margin-right: -3px;
}
#rechts {
margin: 0 0 0 391px;
height:1%;
}
</style>
<![endif]-->
Übrigens versteht der IE-Mac deinen star html hack auch und ist ziemlich exakt in Höhenangaben: die Box schnurrt also auf 1% Höhe zusammen. Ich habe das hier im Forum schon recht häufig gesehen, ist irgendwo eine deutsche Quelle da draußen, die den Holly Hack solchermaßen verkürzt wiedergibt? Der vollständige Hack sieht mindestens so aus: Code:
/* \*/
* html #rechts {height: 1%}
/* */
Alle anderen Browser sehen den Inhalt der "Kommentarklammer". Deswegen muss hier die Weiche für den IE-Win noch mit dem * html gestellt werden. Aber: der IE7 versteht den star html hack nicht mehr. Zum Glück soll der 3px text jog auch behoben sein. Aber wenn du dir die Seite mal im IE5.5 anguckst, musst du ja wahrscheinlich noch einen boxmodel hack anwenden. Am Ende ist es "wartungsfreier", wenn du mit Conditional Comments arbeitest, da nicht davon auszugehen ist, dass alles im neuen IE7 so funktioniert, wie beworben. Wenn wir also hacks für den IE7 anwenden müssen, musst du eh auf CC umsteigen. Warum also nicht heute?
|
|
10.09.2005, 15:22
|
|||
|
|||
|
Hallo, Ingo,
hat es einen tieferen Sinn, dass Du in dieser Fallgestaltung den '3 Pixel text jog' über margin-Dimensionierung löst, anstatt das hasLayout-flag zu setzen? Ich hätte geschrieben: ... #rechts { background-color: #FFDAB9; margin: 0 0 0 394px; padding: 10px; color: black; } </style> <!--[if lte IE 7]> <style type="text/css"> #rechts {zoom: 1.0; } </style> <![endif]--> [funktioniert in IE7 Windows Vista und IE7 Windows XP_Sp2] Was übersehe ich? Gruß Chattanooga
|
|
10.09.2005, 15:52
|
|||
|
|||
|
zoom:1 oder height: 1% setzen beide hasLayout=true, welchen du nimmst, ist IE5.5 und 6 meist egal.
(Für IE7 und darüber hinaus wäre zoom neutraler, aber wir wissen ja noch nicht, ob diese layout-bugs nicht zum Teil gelöst sind in IE7 final. float würde eigentlich auch gut gehen, aber einem float muss man wegen IEmac eh eine Weite geben) Damit wird #rechts stabiler und unabhängiger. Der 3px text jog kann nun nicht mehr in den #rechts-Block hineingreifen, um bloß den Text zu verschieben. Nun schiebt der 3px text jog aber stattdessen den ganzen #rechts-block nach rechts (zumindest in meinem IE6. im IE7beta1 nicht? Interessant) Der text jog wird ja vom float ausgelöst, der "Schub" ist immer noch da. Also löst haslayout zu setzen allein nur das Problem der Verschiebung des Textes innerhalb der #rechts-box. Nun muss man die ganze box um 3px zurückziehen (margin-left: 391 statt 394). Das geht aber nur, wenn der float auch um 3px zurückweicht (margin-right: -3px). So zeigt die unsichtbare 3px Text jog Hand, die ja trotz alledem immer noch hartgelötet rumspukt, keine Wirkung mehr. Für die anderen Browser stimmen die margins natürlich nicht mehr, deswegen die "Browserweiche". Ich muss sagen, dass mir das ganze mit dem 3px text jog eigentlich nicht klar ist, und oft holperts bei einem Lösungsversuch. Nicht immer braucht man diesen Dreiklang, aber als Checkliste hilft es: 1. der verschobenen Box "layout" geben 2. und ihren margin verkleinern um 3px 3. und allen verursachenden floats einen negativen margin von -3px geben Du verzichtest auf Schritt 2+3, und im IE7 zeigt es eine exakte Position, verglichen mit Fx? Interessant. Ich habe kein IE7, und die meisten bugs sollen ja erst in beta2 behoben sein. Ich hoffe, dass ich deine Frage halbweg srichtig verstanden habe.
|
|
10.09.2005, 17:39
|
|||
|
|||
|
Zitat:
Gegenüber IE6_Sp2 sind mir kleinere Abweichungen in der Umsetzung des style sheet aufgefallen, die ich nochmals step-by-step durchgehen möchte und dafür etwas Zeit benötige. Ich melde mich dann nochmals in diesem threat. Danke für Deine schnelle und ausführliche Antwort. Gruß Chattanooga
|
| Sponsored Links |
|
11.09.2005, 06:05
|
|||
|
|||
|
SPAM
spam gelöscht
IP: 68.197.188.120, 167.142.225.101, 66.109.49.55
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Menu Button läßt sich nicht fixen | leverkusenerjung | CSS | 7 | 05.04.2016 21:13 |
| CCS Navi im IE nur auf manchen Seiten verfügbar.. | Variomatic | CSS | 6 | 06.11.2013 10:56 |
| CSS von Plugin beisst! | expand | CSS | 0 | 28.09.2012 17:44 |
| Responsive webdesign: horizontales Menü mit angepasster Schriftgröße | Spencer | Javascript & Ajax | 3 | 18.09.2012 23:16 |
| Problem mit einem 3D-Effekt | moep0710 | CSS | 12 | 12.06.2010 14:30 |
stimmt, da muss man schon genau hinschauen, ich dachte, das Problem wäre irgendwo bei den Abständen zwischen den divs.
Linear-Darstellung
