|
|||
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*/ } 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; } Der Pfadcontainer ist IMHO doch identisch zur 'normalen' Version mit eingebetteten Bildern.... Ein dickes DANKE! |
Sponsored Links |
|
|||
Gib dem Element #pfad3spaltigu hasLayout.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Lesestoff: 19. Patchwork: Flicken im CSS - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Ich bevorzuge Conditional Comments.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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]--> HTML-Code:
<div id="pfad3spaltigu" class="gainlayout"> <div id="pfadtextu"> 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; } Geändert von newcoder (05.02.2011 um 20:20 Uhr) Grund: Korr. |
|
|||
"default layout elements" haben bereits haslayout per default (hence the name ...).
Für alle anderen gilt: Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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">
Der Abstand des Pfad-Textes ist in IE6/7 nicht mittig (oben/unten). Nimmt man das hasLayout wieder weg HTML-Code:
<div id="pfad2spaltigo">
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.... |
|
|||
Warum willst du #pfad2spaltigo (man, sind das Namen) hasLayout geben?
#pfadicono schrumpft nicht mehr auf die Inhaltsbreite. Gib eine Breite dafür an.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
Das hat funktioniert, klasse :
Code:
#pfadicono,#pfadiconu {position:relative; right:0px; float:right; width:60px;} Code:
#container { background:#f0f0f0 url(../img/bodybg.jpg) repeat-x; color:#303030; margin:0; min-width:770px; padding:0; text-align:left; width:100%; } Die vertikale Scrollbar schalte ich zu mit: Code:
html { height:101%; /*vert.Scrollbar an*/ } |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |