Bug: abstand wo kein abstand sein sollte

lynox

hallo leute!

auf http://www.shrimpz.de kann man sehen wo mein problem liegt.

wenn man diese seite mit dem IE öffnet ist ja alles bestens. aber sobald man mit dem firefox draufgeht hat man ein problem. er macht ganz oben, zwischen rahmen und header ein par milimeter abstand rein... ich hab keine ahnung warum, hab schon total viel herumprobiert und herumgeschoben, der abstand ist immerwieder drin.

jetzt hab ich mal gegoogelt und bin auf dieses forum gestoßen, ich hoffe mal hier kann mir wer helfen!

hier gibt es den code der kompletten index seite. http://www.shrimpz.de/index2.htm

hoffe ihr findet den fehler und könnt mir helfen.

lg, lynox

Ronald

Moin!

Lösche zunächst mal den unnötigen leeren Span-Tag in der ersten Zelle, obwohl der wohl nicht das Problem macht.
Du hast die Grafik in P-Tags gesetzt, damit forderst du ja einen Zeilenumbruch. Dass der IE das nicht anzeigt ist ein Bug vom IE, der Firefox macht es richtig.

Code

...
    <td colspan="10" style="border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" height="113"><span style="border-style: solid; border-width: 0"> 
      </span>

Dann solltest du dich mal näher mit Stylesheets beschäftigen, vieles in deinem Quelltext ist doppelt oder unnötig.

Beispiel:

HTML

<html>


<title>www.shrimpz.de</title>


<script language="JavaScript">
<!--
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_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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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>




<link href="_stylesheet.css" rel="stylesheet" type="text/css">
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
</head><body bgcolor="#CCCCCC" bottomMargin=0  leftMargin=0
topMargin=0 rightMargin=0 marginheight="0" marginwidth="0"  onLoad="MM_preloadImages('new_images/header/newshover.jpg','new_images/header/fileshover.jpg','new_images/header/memberhover.jpg', 'new_images/header/forumhover.jpg','new_images/header/matcheshover.jpg')" background="new_images/hintergrund7.jpg">






<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="333A48" style="border-collapse: collapse" height="784">


  <tr> 
    <td colspan="10" style="border-left: 1px solid #000000; border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000" height="113"><span style="border-style: solid; border-width: 0"> 
      </span> 



[img]new_images/header.jpg[/img]</p>
    </td>
  </tr>

Alles anzeigen

Da kann man einiges sinnvollerweise zusammenfassen:

HTML

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>www.shrimpz.de</title>
   <link href="_stylesheet.css" rel="stylesheet" type="text/css">
   <script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
</head>
<body style="background-image:url(new_images/hintergrund7.jpg);margin:0px;text-align:center">


<table style="border-collapse: collapse;height:784px;width:900px;border:0px;margin:10px auto 0px" cellpadding="0" cellspacing="0">
  <tr> 
    <td colspan="10" style="border:1px solid #000000;height:113px">[img]new_images/header.jpg[/img]</td>
  </tr>
... u.s.w.

Alles anzeigen

Alles was ich rausgelöscht hab war entweder völlig falsch eingesetzt (z.b. 'bordercolor" = so etwas gibt es nur bei Framsets) überflüsssig, doppelt oder ohne Funktion (z.B. das komplett wirre Javascript).

Was noch zu beachten ist: das "align=center" im Table-Tag ist zwar nach wie vor zulässig, aber eine HTML-eigene Formatierung. Selbstverständlich kann man es mit CSS mischen, ist aber 'ein schlechter Stil'. Um die gleiche Funktion nur mit Stylesheets zu erreichen, muß man wissen, daß die Browser unterschiedlich reagieren:

- der IE zentriert fälschlicherweise mit dem Stylesheet "text-align:center" alles, was nachfolgt. Richtig wäre nur den Text zu zentrieren und keine Objekte wie Tabellen.
- Mozilla zentriert mit margin:auto. Bei margin ist wie bei vielen anderen Stylesheets zu beachten, daß man bis zu 1 bis 4 Werte eingeben kann, dabei gilt:
1 Wert: für alle vier Seiten
2 Werte: 1. Wert = oben und unten, 2. Wert = links und rechts
3 Werte: 1. Wert oben, 2. Wert = links und rechts, 3. Wert = unten
4 Werte: 1. Wert = oben, 2. Wert = rechts, 3. Wert = unten, 4. Wert = links

Beispiel: mit

Code

<table style="margin:10px auto 40px">

schaffe ich eine horisontal zentrierte Tabelle, die oben 10 Pixel Abstand zum darüberliegenden Element (z.B. dem Body-Tag) hält und unten 40 Pixel.

So, ich hoffe das war einigermaßen verständlich.

G.a.d.M.

Ronald

lynox

alles klar vielen dank!

ich hätte eventuell dazusagen sollen das ich von html etc. nicht viel ahnung habe. der code allgemein ist von webspell.org und die index.php hat vor langer zeit jemand gemacht der nichtmehr bei uns im clan ist.

jetzt hatte ich mit meinen beschränkten kentnissen die aufgabe die bilder einzufügen. das dabei einiges falsch gemacht wurde glaube ich gerne

habe deinen rat auf jedenfall befolgt und es funktioniert jetzt. vielen dank nochmal

Tags

Benutzer online in diesem Thema