Darstellungsproblem mit IE

Big.phiL · 8. Oktober 2006

Hey Leute
Ich habe einen Code gebaut der in Firefox und in Opera wunderbar funktioniert. Nur im blö*** IE nicht.

Im IE sieht es folgender maßen aus:
geht nicht

In Firefox und Opera so:
geht doch

Wenn jemand eine Idee hat kann er sie gern posten ^^
Hier ist mal der Code für diesen Bereich.

<td style="width:776px;" colspan="3">
<img src="images/banner.jpg" class="banner" usemap="#Map" alt="banner" /><br />
<div style="background-image:url(images/index_08.gif); width:9px; height:43px; float:left;"></div>

<a href="#"><img src="images/unternehmen.gif" id="Image1" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image1','','images/unternehmen2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>

<a href="#"><img src="images/planung.gif" id="Image2" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image2','','images/planung2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>

<a href="#"><img src="images/specials.gif" id="Image3" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image3','','images/specials2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>

<a href="#"><img src="images/support.gif" id="Image4" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image4','','images/support2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>

<a href="#"><img src="images/referenzen.gif" id="Image5" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image5','','images/referenzen2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>

<div style="background-image:url(images/index_14.gif); width:17px; height:43px; float:left;"></div>
</td>

\\edit
Der "Fehler" ist erst gekommen, als ich die MouseOver eingefügt hab.

Adagio · 9. Oktober 2006

Interessanter wäre es eher zu wissen, wie dein HTML und CSS komplett ausschaut.

custus · 9. Oktober 2006

Du kannst den Effekt mal gegenchecken, in dem du die breite der Tabelle in der sich diese Zeile befindet ein wenig breiter machst.

IE hat das Problem mit DIV Layern bei breiten sowie Firefox mit Padding größen.
Probier das mal aus und sag mal was für ein Effekt das hat.

Besser ginge es natürlich wenn du den gesamten Style-Code und die vorangehende Tabelle mit posten würdest.

Adagio · 9. Oktober 2006

IE hat das Problem mit DIV Layern bei breiten sowie Firefox mit Padding größen

Das ist gelinde gesagt großer Müll.

Der IE5.0 und 5.5 haben ein fehlerhaftes CSS Boxmodell, der IE6 hat dies ohne Doctype.

Und Firefox hat überhaupt kein Problem mit padding.

Zweipunktnull · 9. Oktober 2006

kann es sein, dass der IE7 ein völlig korrektes boxmodell hat?
also zumindest ich musste meine "normalen" stylesheets kein bisschen anpassen für den IE7...

Adagio · 9. Oktober 2006

Ja, der IE7 läuft mit dem korrekten Boxmodel und hat auch die meisten CSS Fehler des IE6 nicht mehr.

Der IE6 auch, aber hier muss man einen korrekten Doctype benutzen (mit URL).

Big.phiL · 10. Oktober 2006

Das komplette Dokument sieht wie folgt aus:

HTML:

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


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<title>title</title>





<style type="text/css">


a:link                {    color:#ffffff;


                     text-decoration:none; }





a:visited             {    color:#ffffff;


                     text-decoration:none; }





a:focus             {    color:#ffffff;


                     text-decoration:none; }





a:active             {    color:#ffffff;


                     text-decoration:none; }





body               {   background-color:#515151;


                     margin-top:0px;


                     margin-bottom:0px;


                     padding:0px; }


               


.table               {   background-color:#ffffff;


                     width:776px;


                     border:0px; }


               


.banner               {   width:776px;


                     height:92px;


                     border:0px; }


               


.buttons            {   width:150px;


                     height:43px;


                     border:0px;


                     float:left; }





.text               {   margin-top:10px;


                     margin-left:20px;


                     margin-right:20px;


                     margin-bottom:30px;


                     font-family:verdana,Verdana;


                     font-size:11px;


                     text-align:justify;


                     color:#000000; }


               


.text_right            {   margin-top:10px;


                     margin-left:15px;


                     margin-right:15px;


                     margin-bottom:10px;


                     font-family:verdana,Verdana;


                     font-size:10px;


                     text-align:justify;


                     color:#777777; }


               


.big_topic            {   font-family:verdana,Verdana;


                     font-size:18px;


                     color:#202020;


                     font-weight:300; }


               


.red_topic            {   font-family:verdana,Verdana;


                     font-size:12px;


                     color:#870100;


                     font-weight:bold; }


</style>





<script type="text/JavaScript">


<!--


function MM_preloadImages() { //v3.0


  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();


    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)


    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}


}





function MM_swapImgRestore() { //v3.0


  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;


}





function MM_findObj(n, d) { //v4.01


  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {


    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}


  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];


  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);


  if(!x && d.getElementById) x=d.getElementById(n); return x;


}





function MM_swapImage() { //v3.0


  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)


   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}


}


//-->


</script>


</head>





<body onload="MM_preloadImages('images/unternehmen2.gif','images/planung2.gif','images/specials2.gif','images/support2.gif','images/referenzen2.gif')">





<map name="Map" id="Map">





<area shape="rect" coords="703,5,722,19" href="#" />


<area shape="rect" coords="725,5,744,19" href="#" />


<area shape="rect" coords="747,5,765,19" href="#" />


</map>





<table class="table" align="center" cellpadding="0" cellspacing="0">


<tr>


   <td style="width:776px;" colspan="3">


      <img src="images/banner.jpg" class="banner" usemap="#Map" alt="banner" /><br />


      <div style="background-image:url(images/index_08.gif); width:9px; height:43px; float:left;"></div>


      <a href="#"><img src="images/unternehmen.gif" id="Image1" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image1','','images/unternehmen2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>


      <a href="#"><img src="images/planung.gif" id="Image2" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image2','','images/planung2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>





      <a href="#"><img src="images/specials.gif" id="Image3" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image3','','images/specials2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>


      <a href="#"><img src="images/support.gif" id="Image4" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image4','','images/support2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>


      <a href="#"><img src="images/referenzen.gif" id="Image5" style="width:150px; height:43px; border:0px; float:left;" onmouseover="MM_swapImage('Image5','','images/referenzen2.gif',1)" onmouseout="MM_swapImgRestore()" /></a>


      <div style="background-image:url(images/index_14.gif); width:17px; height:43px; float:left;"></div>


   </td>


</tr>


<tr>


   <td align="left" valign="top" style="width:521px;">


      <div style="background-image:url(images/willkommen.gif); width:521px; height:175px; float:left;"></div>


      <div class="text">





      


<!-- Beginn "Aktuelle Geschehnisse -->      


      <div class="big_topic">Aktuelle Geschehnisse</div><br />


      <div class="red_topic">Applikation Service Provider</div>


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <br />


      <br />


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text 


      </div>


<!-- Ende "Aktuelle Geschehnisse" -->   


   


   </td>





   <td style="width:1px; background-image:url(images/dvert.gif); background-repeat:repeat-y;"></td>


   <td align="left" valign="top" style="width:255px;">


      <div class="text_right"><br /><br /><br />


      <div class="big_topic">Informationen &uuml;ber</div><br />


      


<!-- Beginn "Informationen über -->      


      <div class="red_topic">Unser Haus</div>


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text<br /><br />





      <div style="width:220px; height:1px; background-image:url(images/dhoriz.gif); background-repeat:repeat-x;"></div><br />


      


      <div class="red_topic">Auch im Bereich Support</div>


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text<br /><br />


      <div style="width:220px; height:1px; background-image:url(images/dhoriz.gif); background-repeat:repeat-x;"></div><br />


      


      <div class="red_topic">Auf unseren Seiten</div>


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 


      text text text text text text text text text text text text text text text text text text text text text<br /><br />


      <div style="width:220px; height:1px; background-image:url(images/dhoriz.gif); background-repeat:repeat-x;"></div><br />





<!-- Ende "Informationen über" -->         


      


      </div>


   </td>


</tr>


<tr>


   <td colspan="3">


      <div style="background-image:url(images/hotline.jpg); width:247px; height:181px; float:left;"></div>


      <div style="background-image:url(images/partner.jpg); width:291px; height:181px; float:left;"></div>


      <div style="background-image:url(images/adresse.jpg); width:238px; height:181px; float:left;"></div>


   </td>


</tr>





<tr>


   <td colspan="3">


      <div style="background-color:#870100; width:776px; height:30px; font-family:arial,Arial; font-size:10px; color:#ffffff;">


      <div style="margin-top:3px; margin-left:5px; float:left;">


      <strong>Copyright 2002 - 2006 by B-Soft Inh. Bernd Schuldes</strong><br />


      <div style="float:left;">Unser Unternehmen - Specials - Internet - Planung - Support - Referenzen</div>


      


      <div style="margin-right:5px; float:right;">


      <a href="#">Impressum</a> | 


      <a href="#">Kontakt</a> | 


      <a href="#">AGB</a> | 


      <a href="#">Rechtsausschluss</a>





      </div>


      </div>   


      </div>


   </td>


</tr>


</table>





</body>


</html>

\\edit
Ich werde es morgen (oder wohl eher heute) früh mal Probieren indem ich den kompletten Pfad angebe.

custus · 10. Oktober 2006

Adagio schrieb:
Das ist gelinde gesagt großer Müll.

Der IE5.0 und 5.5 haben ein fehlerhaftes CSS Boxmodell, der IE6 hat dies ohne Doctype.

Und Firefox hat überhaupt kein Problem mit padding.

Sorry Adagio, aber bevor du etwas als Müll bezeichnest solltest du dir überlegen, ob du danach eine Aussage schon wieder bestätigst wie bei meiner.
Das IE ein Problem mit der Beite hat, liegt am Boxmodell und an der Unfähigkeit des alten IE die Breite der gesamten Box zur Sollgröße zu addieren.

Der Firefox hat ein Problem mit dem Padding und zwar bei der Kombination wenn du Bilder oder Blöcke nicht explizit als display:block bezeichnest und kein Doctype angeben ist, Opera und IE arbeiten an dieser Stelle korrekt, wenn ein Padding angegeben wurde.

Adagio · 10. Oktober 2006

Ein Blockelement (deine "Blöcke") nimmt padding an. Bei Bildern ist das als Inlineelement nicht erlaubt und daher korrekt.

Kannst du mir ein konkretes Beispiel von deiner Behauptung zeigen?

@Big.phiL:
Du hast doch schon so schön begonnen, ein wenig mit CSS zu arbeiten. Ich würde dir empfehlen, die komplette Navigation ganz sauber mit CSS zu erstellen, auch die MouseOver Zustände - halt ohne JavaScript von DreamWeaver.

Hier findest du massig Beispiele, wie das geht:
http://cssplay.co.uk/menus/index.html

custus · 10. Oktober 2006

Adagio schrieb:
Ein Blockelement (deine "Blöcke") nimmt padding an. Bei Bildern ist das als Inlineelement nicht erlaubt und daher korrekt.

Kannst du mir ein konkretes Beispiel von deiner Behauptung zeigen?

Wenn ich wieder darauf stoße sag ichs dir. Aber ich geh jetzt nicht noch extra auf Problemsuche, bin froh wenn das nicht mehr bei mir Auftaucht.
Hier ist noch jemand der das Problem hatte:
http://archivist.incutio.com/viewlist/css-discuss/52908

Das das Inlinelement das abblockt mag tatsächlich der Grund sein.

Adagio · 10. Oktober 2006

you will notice a small gap between the image and the bottom border of a
DIV

Das ist kein Bug, sondern normal. Ein Inlineelemt (was ein Bild, aber halt auch normaler Text sein kann) hat ca. 3px Rand ab der Grundlinie - das ist nötig für Buchstaben wie das y oder j. Das ist korrekt und wird vom Firefox auch entsprechend richtig umgesetzt.

Ändern kann man es halt, indem man aus dem Inlineelement ein Blockelement macht.

custus · 10. Oktober 2006

Hmm, ich glaub ich muss mir nochmal die genauen Definitionen der Elemente durchlesen.
Ist glaub ich schon zu lange her, das ich mit CSS so viel gearbeitet hab.
Danke für die Aufklärung.

Adagio · 10. Oktober 2006

Hier hast du ein wenig Infos zu diesem "Problem":
http://www.dodabo.de/html+css/img-table/

Gilt nicht nur für Tabellen.

Big.phiL · 11. Oktober 2006

Adagio schrieb:
@Big.phiL:
Du hast doch schon so schön begonnen, ein wenig mit CSS zu arbeiten. Ich würde dir empfehlen, die komplette Navigation ganz sauber mit CSS zu erstellen, auch die MouseOver Zustände - halt ohne JavaScript von DreamWeaver.

Hier findest du massig Beispiele, wie das geht:
http://cssplay.co.uk/menus/index.html

Ich hatte es ja mit CSS probiert, ... also die MouseOver, aber ich habs nicht hinbekommen. Drum musste ich auf "das Normale" ausweichen ^^
Den Link von dir werde ich mir gleich mal angucken

Danke

Suche

Darstellungsproblem mit IE

Big.phiL

Cadet 4th Year

Adagio

Gast

custus

Gast

Adagio

Gast

Zweipunktnull

Commander

Adagio

Gast

Big.phiL

Cadet 4th Year

custus

Gast

Adagio

Gast

custus

Gast

Adagio

Gast

custus

Gast

Adagio

Gast

Big.phiL

Cadet 4th Year

Ähnliche Themen