Browserunterschiede in Darstellung Css Reset ohne Wirkung

K

K-Asche

Mitglied
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:
HTML: 
//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 -->

Anbei noch zwei Screenshots wie sich das ganze in den beiden Browsern darstellt.

Hier im Firefox(so wie es sein soll)
ansichtff.jpg


und hier im IE7 (nicht so ganz das Aussehen)
ansichtie7.jpg


CSS Reset habe ich von dieser Site nachgebaut.
http://www.drweb.de/magazin/css-neustart/
Das hat leider keinen Erfolg gebracht.

Gruß
Karsten
 
Statt Border-Style:0px; würde ich dir empfehlen, insofern du keine bestimmten Border hast (oben und unten) einfach border: 0px;. Des weiteren vergiss nicht
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

MfG
Simon
 
Hi Tester,

ich habe den XHTML Transitional Doc Type drin.
Hab es jetzt mit dem setzen des borders auf 0px versucht und auch mit dem Strict Doc Type.
Bringt auch keine Änderung:s
 
  1. Wenn zum derzeit absolut positionierten <a> sein umschliessendes Elternelement <span> zusätzlich relativ positioniert wird, können anstelle der z.T. negativen Innen-/Außenabstände die absoluten Positionsangaben z.B. für top und right festgelegt werden, was keine diskrepante Ausrichtung / Position in den genannten Browsern zur Folge hat.

  2. Das Reset-CSS ist grundsätzlich zur Behebung des zweiten Darstellungunterschieds überhaupt nicht ausgelegt.

    Hierzu ist display:block (im Umfluß alternativ dazu float:[ left/right ]) für das Inline-Element <img> vonnöten, damit vom Browser im HTML-Code die Whitespaces (Zeilenumbrüche, Tab-Einrückungen) vor/hinter <img> nicht interpretiert werden, die in seiner Seitendarstellung die Lücken zwischen den Elementen im Textfluß zur Folge haben.

    Somit handelt es sich hier nicht um eine Art "doppelten" border, und erklärt auch, warum alle bisherigen Versuche und Vorschläge bzgl. der Rahmenformatierung ins Leere liefen.

    Ein anderer Doctype würde hier selbst dann nicht dienen, wenn tatsächlich ein unerwünschter (Bild)Rahmen im Browser auftauchen würde.

CSS: 
div#content_inner_right span
{
   display:block;
   position:relative;
}

div#content_inner_right span a
{
   position:absolute;
   display:block;
   z-index:2;
   top:65px; /* Wert per Augenmaß deklariert, Anpassung bitte evtl. vornehmen  */
   right:10px;  /* Wert per Augenmaß deklariert, Anpassung bitte evtl. vornehmen */
}

/* Abkürzung zur relevanten CSS Passage */

div#content_inner_right span img
{
   border-style:none;
   z-index:1;
   display:block;
}
 
Zuletzt bearbeitet:
@spicelab: Vielen Dank dafür so klappt es in beiden Browsern hervorragend:)

Immer wenn man denkt man hat das Boxmodell verstanden, wird man wieder eines neuen belehrt:)

Wünsche noch einen ruhigen Abend!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück