zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE6/7: Image Replacement bricht Design, Col.?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2011, 17:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard IE6/7: Image Replacement bricht Design, Col.?

Hallo,
auf der Beispielseite gibt es beim Image-Replacement für die Nur-Text-Version (ohne CSS) rechts unten mit IE6 und IE7 ein Problem mit den nach rechts rauslaufenden Icons für Druck/Pdf/Email:
Screenshot

Andere Browser inkl. IE8 sind ok, die drei Icons schließen wie oben mit dem rechten Rand der mittleren Spalte ab.

Beispielseite
Zugehöriges Stylesheet

Mit Image-Replacement und Fehler:
HTML-Code:
<div id="pfadiconu">
<a href="script/druck/seite-drucken.php" target="_blank" rel="nofollow" tabindex="7" title="Neues Fenster: Druckansicht" id="printbuttonu">Neues Fenster: Druckansicht</a><br class="hide" />
<?php echo "<a href=\"".$scriptname.".php\" target=\"_blank\" rel=\"nofollow\" onclick=\"window.open('".$scriptname.".php','popup','width=430,height=450,resizable=yes,scrollbars=yes,top=40,left=40,screenX=40,screenY=40');return false\" title=\"Neues Fenster: Seite per Email empfehlen\" id=\"emailbuttonu\">";?>Neues Fenster: Seite per Email empfehlen</a><br class="hide" />
<a href="#" target="_blank" title="PDF-Datei:" id="pdfbuttonu">PDF-Datei: </a>
</div>
Code:
/*** Pfad-Icon-Container ***/

#pfad1spaltigo,#pfad1spaltigu {margin:0 30px;}
#pfad2spaltigo,#pfad2spaltigu {margin:0 20px 0 200px;}
#pfad3spaltigo,#pfad3spaltigu {margin:0 200px;}
#pfadtexto,#pfadtextu {position:relative; left:0px; float:left; margin: 5px 0 0 0; font-size:0.85em;}

#pfadicono,#pfadiconu {position:relative; right:0px; float:right; }

#pdfbuttono,#pdfbuttonu {
margin:0 3px 0 0;
float:right;
border: 0px;
padding-top:16px; width:16px; /*BildH x BildB*/
overflow: hidden;
background-image: url(../img/pdfbutton.png);
background-repeat: no-repeat;
height: 0px !important;
height /**/:16px;              /*BildH*/
}
#emailbuttono,#emailbuttonu {
margin:0 3px 0 0;
float:right;
border: 0px;
padding-top:16px; width:16px; /*BildH x BildB*/
overflow: hidden;
background-image: url(../img/emailbutton.png);
background-repeat: no-repeat;
height: 0px !important;
height /**/:16px;              /*BildH*/
}
#printbuttono,#printbuttonu {
margin:0;
float:right;
border: 0px;
padding-top:16px; width:16px; /*BildH x BildB*/
overflow: hidden;
background-image: url(../img/printbutton.png);
background-repeat: no-repeat;
height: 0px !important;
height /**/:16px;              /*BildH*/
}
Interessanterweise gibt es ohne das Image-replacement dieses Problem NICHT:
HTML-Code:
<div id="pfadiconu">
<!--<a href="#" target="_blank" alt="PDF-Datei:"><img src="img/pdfbutton.png" height="16" width="16" class="icon" alt="PDF-Datei" title="PDF-Datei:" /></a>-->
<a href="script/druck/seite-drucken.php" target="_blank" rel="nofollow" tabindex="7"><img src="img/printbutton.png" height="16" width="16" class="icon" alt="Neues Fenster: Druckansicht" title="Neues Fenster: Druckansicht" /></a>
<?php echo "<a href=\"".$scriptname.".php\" target=\"_blank\" rel=\"nofollow\" onclick=\"window.open('".$scriptname.".php','popup','width=430,height=450,resizable=yes,scrollbars=yes,top=40,left=40,screenX=40,screenY=40');return false\">";?><img src="img/emailbutton.png" height="16" width="16" class="icon" alt="Neues Fenster: Seite per Email empfehlen" title="Neues Fenster: Seite per Email empfehlen" /></a>
</div>
Code:
/*** Pfadcontainer ***/

#pfad1spaltigo,#pfad1spaltigu {margin:0 30px;}
#pfad2spaltigo,#pfad2spaltigu {margin:0 20px 0 200px;}
#pfad3spaltigo,#pfad3spaltigu {margin:0 200px;}
#pfadtexto,#pfadtextu {position:relative; left:0px; float:left; margin: 5px 0 0 0; font-size:0.85em;}
#pfadicono,#pfadiconu {position:relative; right:0px; float:right; }
Warum laufen die Icons mit Image-Replacement raus und wie kann man dies abstellen?
Der Pfadcontainer ist IMHO doch identisch zur 'normalen' Version mit eingebetteten Bildern....

Ein dickes DANKE!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2011, 17:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Gib dem Element #pfad3spaltigu hasLayout.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2011, 17:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Uiii, was gaaaanz Neues , danke.
Wie genau setzt man das ein, damit es nicht die CSS-Validierung bricht?
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2011, 18:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Lesestoff: 19. Patchwork: Flicken im CSS - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Ich bevorzuge Conditional Comments.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.02.2011, 19:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Aha, so funktioniert es, die Icons werden korrekt eingerückt:
im <head>
HTML-Code:
 <!--[if lt IE 7]><style>
    /* style for IE6 + IE5.5 + IE5.0 */
    .gainlayout { height: 0; }
    </style><![endif]-->
     
    <!--[if IE 7]><style>
    .gainlayout { zoom: 1; }
    </style><![endif]-->
und dann #pfad3spaltigu class="gainlayout" mitgeben:
HTML-Code:
<div id="pfad3spaltigu" class="gainlayout">
<div id="pfadtextu">
Verständnisfrage:
Macht es Sinn, allen 'default layout elements' diese Eigenschaft 'hasLayout' per default mitzugeben (um auch hier Sonderbarkeiten der älteren IEs zu umschiffen) oder nur bei Fehlern?
Ich denke da analog an den defalut reset mit
Code:
* {
margin:0;
padding:0;
}
Danke für den Tipp ...

Geändert von newcoder (05.02.2011 um 20:20 Uhr) Grund: Korr.
Mit Zitat antworten
  #6 (permalink)  
Alt 05.02.2011, 20:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

"default layout elements" haben bereits haslayout per default (hence the name ...).
Für alle anderen gilt:
Zitat:
Don't give layout to all: * {_height: 1px;}. Poison in that concentration, having layout is not the cure, it changes the rendering fundamentally.
Mit Zitat antworten
  #7 (permalink)  
Alt 05.02.2011, 20:19
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Ok, da hatte ich einen Verständnisfehler, aber ich arbeite ja dran....
Danke.
Mit Zitat antworten
  #8 (permalink)  
Alt 05.02.2011, 22:59
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Hmmm, nach Übertragen diese Ansatzes auf das reduzierte 2-spaltige Layout ohne die rechte Teaserspalte gibt es einmal mehr mehrwürdiges Verhalten unter IE6/7 .

Mit
HTML-Code:
<div id="pfad2spaltigo" class="gainlayout">
ergibt sich diese Bild: Screenshot 3a
Der Abstand des Pfad-Textes ist in IE6/7 nicht mittig (oben/unten).

Nimmt man das hasLayout wieder weg
HTML-Code:
<div id="pfad2spaltigo">
, sieht es so aus: Screenshot 3b
Der Pfad wird regelrecht zerrupft.

Auch eine Vergabe des hasLayout an die divs #pfadicono oder #pfadtexto brachte keinen Erfolg.

Die rechte Teaserspalte war in einem eigenen div #rightside untergebracht, was ich für 2-spaltig rausgenommen habe.

Die alten IEs sind anscheinend recht tricky, was tun ?
Url zur CSS

Eigene CSS für 2-spaltig anlegen?

Danke....
Mit Zitat antworten
  #9 (permalink)  
Alt 05.02.2011, 23:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Warum willst du #pfad2spaltigo (man, sind das Namen) hasLayout geben?

#pfadicono schrumpft nicht mehr auf die Inhaltsbreite. Gib eine Breite dafür an.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 06.02.2011, 11:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Das hat funktioniert, klasse :
Code:
#pfadicono,#pfadiconu {position:relative; right:0px; float:right; width:60px;}
Allerdings hat der Opera-8.54 unter Win beim 2-spaltigen Layout immer eine horizontale Scrollleiste, auch wenn das Browser-Fenster breiter ist als die min-width von 770px:
Code:
#container {
background:#f0f0f0 url(../img/bodybg.jpg) repeat-x;
color:#303030;
margin:0;
min-width:770px;
padding:0;
text-align:left;
width:100%;
}
Das 3-spaltige Layout ist auch im Opera-8.54 in Ordnung und schaltet die Scrollleiste erst bei Unterschreitung der 770px Breite zu.

Die vertikale Scrollbar schalte ich zu mit:
Code:
html {
height:101%;  /*vert.Scrollbar an*/
}
Einzelne Seiten werden kürzer als der Screen und ich möchte das horizontale 'Hüpfen' damit verhindern.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
image replacement mit phark method Timoslav CSS 4 16.06.2009 23:09
Imagemap Zugriff bei einer Gallery Sarah14 Javascript & Ajax 3 12.11.2007 15:06
fahrner image replacement alejandro CSS 1 19.08.2007 03:03
Input Button Image Replacement Pablo CSS 0 17.08.2007 02:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:23 Uhr.