mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 08.12.2016 12:52 Benutzername: Passwort: Auto-Login

Thema: [CSS] Problem - Darstellung IE / FF vom 27.01.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [CSS] Problem - Darstellung IE / FF
Autor Nachricht
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 36
Geschlecht: Männlich
Verfasst Fr 27.01.2006 15:37
Titel

[CSS] Problem - Darstellung IE / FF

Antworten mit Zitat Zum Seitenanfang

Hola,

folgendes:
hab ne Startseite mit ner Tabelle. 4 Bilder als Links, Roll-Over per CSS (zumindest versucht Grins). Zusätzlich noch Bilder um Schatten darzustellen (siehe Quelltext, die xxshadow.gif´s)
Im IE sieht alles Top aus, im FF hab ich nen Table-Versatz von ca. 2px. Oben und seitlich sieht man nen weißen Rand den man nicht sehen soll...Hab leider nicht soviel Plan von CSS, deswegen weiß ich auch nicht ob ich das mit den CSS-Formatierungen richtig gemacht habe. kam mir etwas kompliziert vor, aber der Mouse-Over klappt Grins.

Hier mal ein Screenshot

Und hier der HTML und CSS-Text:

Code:

<body leftmargin="0" rightmargin="0" topmargin="0" bgcolor="#CBD5CC" marginheight="0" marginwidth="0">

<table valign="top" align="center" cellpadding="0" cellspacing="0" height="550" width="450" border="0">
   <tr>
      <td colspan="3" bgcolor="#CBD5CC" valign="top"><img src="gfx/leftshadow.gif" align="right" border="0"></td>
      <td bgcolor="#FFFFFF" valign="top">
         <table valign="top" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
               <td bgcolor="#FFFFFF" valign="top"><img src="gfx/topshadow.gif" alt="" width="400" height="50" border="0"></td>
            </tr>
            <tr>
               <td bgcolor="#FFFFFF">
                  <table  cellpadding="0" cellspacing="0" height="450" width="400" border="0">
                     <tr>
                        <td class="spring"><a href="pages/spring.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="118" border="0"></a></td>
                     </tr>
                     <tr>
                        <td class="summer"><a href="pages/summer.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="107" border="0"></a></td>
                     </tr>
                     <tr>
                        <td class="autumn"><a href="pages/autumn.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="107" border="0"></a></td>
                     </tr>
                     <tr>
                        <td class="winter"><a href="pages/winter.html" target="_self"><img src="gfx/main/blank.gif" width="400" height="118" border="0"></a></td>
                     </tr>
                  </table>
               </td>
            </tr>
            <tr>
               <td bgcolor="#FFFFFF" valign="top"><img src="gfx/bottomshadow.gif" alt="" width="400" height="50" border="0"></td>
            </tr>
         </table>
      </td>
      <td colspan="3" bgcolor="#FFFFFF" valign="top"><img src="gfx/rightshadow.gif" alt="" width="50" height="550" border="0"></td>
   </tr>
</table>

</body>


und das CSS-File:

Code:


.spring a:link,.spring a:active,.spring a:visited {
 display: block;
 text-decoration: none;
 width: 400px;
 height: 118px;
 background-image: url(gfx/main/spring_1.jpg);
 background-repeat: no-repeat;
}

.spring a:hover {
 display: block;
 text-decoration: none;
 width: 400px;
 height: 118px;
 background-image: url(gfx/main/spring_2.jpg);
 background-repeat: no-repeat; 
}

.spring {
 display: block;
 width: 400px;
 height: 118px;
 background-image: url(gfx/main/spring_1.jpg);
 background-repeat: no-repeat;
}


.summer a:link,.summer a:active,.summer a:visited {
 display: block;
 text-decoration: none;
 width: 400px;
 height: 107px;
 background-image: url(gfx/main/summer_1.jpg);
 background-repeat: no-repeat;
}

.summer a:hover {
 display: block;
 text-decoration: none;
 width:400px;
 height: 107px;
 background-image: url(gfx/main/summer_2.jpg);
 background-repeat: no-repeat; 
}

.summer {
 display: block;
 width: 400px;
 height: 107px;
 background-image: url(gfx/main/summer_1.jpg);
 background-repeat: no-repeat;
}

.autumn a:link,.autumn a:active,.autumn a:visited {
 display: block;
 text-decoration: none;
 width: 400px;
 height: 107px;
 background-image: url(gfx/main/autumn_1.jpg);
 background-repeat: no-repeat;
}

.autumn a:hover {
 display: block;
 text-decoration: none;
 width:400px;
 height: 107px;
 background-image: url(gfx/main/autumn_2.jpg);
 background-repeat: no-repeat; 
}

.autumn {
 display: block;
 width: 400px;
 height: 107px;
 background-image: url(gfx/main/autumn_1.jpg);
 background-repeat: no-repeat;
}

.winter a:link,.winter a:active,.winter a:visited {
 display: block;
 text-decoration: none;
 width: 400px;
 height: 118px;
 background-image: url(gfx/main/winter_1.jpg);
 background-repeat: no-repeat;
}

.winter a:hover {
 display: block;
 text-decoration: none;
 width:400px;
 height: 118px;
 background-image: url(gfx/main/winter_2.jpg);
 background-repeat: no-repeat; 
}

.winter {
 display: block;
 width: 400px;
 height: 118px;
 background-image: url(gfx/main/winter_1.jpg);
 background-repeat: no-repeat;
}



Könnt ihr nen Fehler sehen oder wisst ihr von nem bekannten Prob was die FF/IE-Darstellung angeht. Wahrscheinlich hab ich irgend ne Angabe vergessen bzw. zu viel.

Danke im voraus

CU
Lio

P.S. Bevor das Blabla wieder losgeht: Ja, ich hab die Suche benutzt, und SelfHTML Grins.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
13pixelchen
Account gelöscht


Ort: -

Verfasst Fr 27.01.2006 16:00
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

img {display: block}


?
 
Anzeige
Anzeige
LioGetz
Threadersteller

Dabei seit: 24.03.2003
Ort: Aachen
Alter: 36
Geschlecht: Männlich
Verfasst Fr 27.01.2006 16:21
Titel

Antworten mit Zitat Zum Seitenanfang

Was willst du mir wohl damit sagen?
Naja, ich habs mal überall gelöscht...und es ist (fast) die Lösung des Problems. Der Versatz in der Table ist weg, es passt jetzt rein, ABER, die Bilder sind jetzt im unteren Teil abgeschnitten und wiederholen sich in der td. Seltsam, obwohl kein Repeat drin steht, und die Bilder von den px auch eigentlich genau in die <td>´s passen sollten.
Dafür auch ne Idee ?

Thx im voraus
CU
Lio


//edit: das "block"-Attribut hab ich mal irgendwo gelesen und dachte es müsste rein...nicht?


Zuletzt bearbeitet von LioGetz am Fr 27.01.2006 16:23, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
13pixelchen
Account gelöscht


Ort: -

Verfasst Fr 27.01.2006 16:41
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, ich wollte, dass Du es so mal reinmachst, aber nicht auf die DIVs, sondern auf die IMG, hab aber nicht exakt über deinen Post gelesen.
 
 
Ähnliche Themen [CSS Problem] Darstellung der Links
[CSS + AJAX] Problem mit Darstellung im IE
ie 8 darstellung css
CSS Navigation - Darstellung im IE
Dreamweaver - Darstellung von CSS-Layout
CSS - unterschiedliche Darstellung der Schrift
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.