HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Browserunterschiede in Darstellung

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Browserunterschiede in Darstellung

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
CrazyPlaya



Anmeldungsdatum: 20.02.2011
Beiträge: 3

BeitragVerfasst am: 20.02.2011 14:44:23    Titel: Browserunterschiede in Darstellung Antworten mit Zitat

Hallo an alle,

ich habe das Problem das dieser Code im IE7 2 Probleme aufweist.
1. Die 2te Grafik also banner_arrow.png wird im Firefox an der gewünschten Position ausgegeben im IE 7 wird das Bild nicht drüber gelegt sondern neben dem b1, b2 etc. dargestellt. Was ist hierbei der Unterschied?

2. Im FF sind die unteren Grafiken ohne Border wie auch im CSS angegeben border-style:0px;
Im IE7 wird aber zwischen 2 Grafiken weiterhin ein Border angezeigt:s
Wie kann ich dieses Verhalten abstellen?

Hier entsprechend CSS und HTML Code:
Code:


//entsprechende CSS Styles

div#module_starthead
{
   padding-top:20px;
   width:100%;
   background-color:#FFFFFF;
   background-image: url('images/banner_bg_tail2.png');
   background-repeat:repeat-x;
   min-height:422px;
}

div#content_inner_left
{
   width:640px;
   height:400px;
   margin-left:21px;
   background-color:#FF0000;
   border-top: #6c6964 4px solid;
}

div#content_inner_right
{
   float:right;
   background-color:#FFFFFF;
   width:281px;
   margin-right:22px;
   border-top: #6c6964 4px solid;
}

div#content_inner_right span
{
   display:block;
   /*background:url('images/banner_arrow.png') no-repeat;*/
}

div#content_inner_right span a
{
   position:absolute;
   display:block;
   z-index:2;
   margin-top:-35px;
   padding-left:245px;
   /*background:url('images/banner_arrow.png') no-repeat;*/
}

div#content_inner_right span a:active
{
   text-decoration:none;
   /*background:url('images/banner_arrow.png') no-repeat;*/
}

div#content_inner_right span img
{
   border-style:none;
   z-index:1;
}

//HTML Code
<div id="module_starthead">
<div id="content_inner_right">
      <span>
         <img src="images/b1.jpg" width="281" height="100" />
         <a href="#"><img src="images/banner_arrow.png" width="20" height="20" /></a>
      </span>
      <span>
         <img src="images/b2.jpg" width="281" height="100" />
         <a href="#"><img src="images/banner_arrow.png" width="20" height="20" /></a>
      </span>
      <span>
         <img src="images/b3.jpg" width="281" height="100" />
         <a href="#"><img src="images/banner_arrow.png" width="20" height="20" /></a>
      </span>
      <span>
         <img src="images/b4.jpg" width="281" height="100" />
         <a href="#"><img src="images/banner_arrow.png" width="20" height="20" /></a>
      </span>
      <!-- <br /><br />
      <span class="terminbox">Termine</span>
      <div id="termin_field">
      </div>
      <br />
      <span class="revbox">Revival Einladung</span> -->
</div>
<div id="content_inner_left">
   <div id="unten"><img src="images/banner_img1.jpg" height="401" width="640" /></div>
   <div id="oben"><img src="images/banner_slogan.jpg" height="101" width="640" /></div>
   <br /><br />
   <!-- <span class="hwbox">Herzlich Willkommen</span> -->
</div>
</div><!-- module_head -->


Gruß
CrazyPlaya
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Elroy
Häufiger Poster


Anmeldungsdatum: 26.02.2010
Beiträge: 77

BeitragVerfasst am: 20.02.2011 19:17:31    Titel: Antworten mit Zitat

Hallo.

Welcher Doctype wurde benutzt?

Ein CSS Reset durchführen.

Ansonsten Link zu Seite zeigen.
Wir haben deine Grafiken nicht vorliegen und können deshalb kein Testcase erstellen.

Gruss
Elroy
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden Website dieses Benutzers besuchen
CrazyPlaya



Anmeldungsdatum: 20.02.2011
Beiträge: 3

BeitragVerfasst am: 20.02.2011 20:54:47    Titel: Antworten mit Zitat

Hi...doc type ist:
Code:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Die Seite ist leider noch nicht online...

Wie mache ich denn ein CSS Reset?[/code]
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
CrazyPlaya



Anmeldungsdatum: 20.02.2011
Beiträge: 3

BeitragVerfasst am: 21.02.2011 19:20:44    Titel: Antworten mit Zitat

So ich habe nun den CSS Reset probiert aber leider ohne Erfolg.

Hier mal Screenshots von den unterschiedlichen Darstellungen:

Firefox Darstellung(so wie es sein soll)


IE7 Leider nicht so ganz


Vllt hilft das ja etwas weiter.
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Kanikkl



Anmeldungsdatum: 25.02.2011
Beiträge: 2
Wohnort: DE

BeitragVerfasst am: 25.02.2011 15:40:45    Titel: Antworten mit Zitat

meißtens hilft es, den spezifischen code mal durch den w3c validator laufen zu lassen und die Fehler zu beheben Razz
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.