WCM Forum - Darstellung von Homepage in Mozilla

WCM Forum (http://www.wcm.at/forum/index.php)

- Internet (http://www.wcm.at/forum/forumdisplay.php?f=8)

- - Darstellung von Homepage in Mozilla - *würg* (http://www.wcm.at/forum/showthread.php?t=123706)

Darstellung von Homepage in Mozilla - *würg*

Irgendwie schaff ich es nicht, dass meine HP im Mozilla korrekt dargestellt wird. Im IE6 und Opera passt alles tadellos, nur der Mozilla hat irgendwie Probleme mit den Tabellen oder den Bildern oder was auch immer. Auf jeden Fall sind auf HP einige Bilder in Tabellen bzw. Spalten aufgeteilt, und sollte nahtlos ineinander übergehen, aber Mozilla zeigt überall Unterbrechungen daziwschen an. Was kann da schiefgelaufen sein?

Eine Webpage mit Tabellen zu formatiern ist sehr 90er. Du moechtest Dir eventuell CSS ansehen, da geht das einfacher.

Und wer sagt Dir, dass nicht die Darstellung im Mozilla richtig (== standardkonform)ist und die anderen sie falsch machen? ;) :D

Ein Codeauszug waere auch praktisch, damit wir Dir helfen koennen, oder?

Naja, dann schau ich mir halt CSS an...irgendwie hab ich mich davor bis jetzt immer gedrückt, ausser den absoluten basics halt ;)

Codeauszug:

Code:

<style type="text/css">

.unten           { vertical-align:bottom; }

A                 { color: #000000; text-decoration: none; } 

A:link                { color: #000000; text-decoration: none; } 

A:visited        { color: #000000; text-decoration: none; } 

A:active        { color: #ffffff; text-decoration: none; } 

A:hover                { color: #ffffff; text-decoration: none; } 

body                 { margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px }

</style>







</head>

<body text="#000000" bgcolor="#EEE2C8" link="#FF0000" alink="#FF0000" vlink="#FF0000">







<table width="899" border="0" cellpadding="0" cellspacing="0">

  <tr>

    <td width="225" height="84">[img]headup.jpg[/img]</td>

    <td colspan="16" valign="top">[img]spacer.gif[/img]</td>

  </tr>

  <tr>

    <td height="30">[img]headdwn.jpg[/img]</td>

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="38" valign="top" class="unten"><div 

     align="center"><font color="#000000" size="-1" face="Verdana, 

     Arial, Helvetica, sans-serif>news

     </font></div></td>

            

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="36" valign="top" class="unten"><div 

     align="center"><font size="-1" face="Verdana, Arial, Helvetica, 

     sans-serif">band

     </font></div></td>

        

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="45" valign="top" class="unten"><div 

     align="center"><font size="-1" face="Verdana, Arial, Helvetica, 

     sans-serif">media

     </font></div></td>

        

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="41" valign="top" class="unten"><div align="center">

    <font size="-1" face="Verdana, Arial, Helvetica, sans-serif">

    dates</font></div></td>

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="50" valign="top" class="unten"><div align="center">

    <font size="-1" face="Verdana, Arial, Helvetica, sans-serif">

    gallery

     </font></div></td>

            

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="55" valign="top" class="unten"><div 

     align="center"><font size="-1" face="Verdana, Arial, Helvetica, 

     sans-serif">contact

     </font></div></td>

        

    <td width="15" valign="top">[img]spacer.gif[/img]</td>

    <td width="33" valign="top" class="unten"><div align="center">

     <font size="-1" face="Verdana, Arial, Helvetica, sans-serif">

     links</font>

     </div></td>

        

    <td width="53" valign="top">[img]spacer.gif[/img]</td>

    <td width="218" valign="top"><div align="right">[img]tree_top.gif[/img]</div></td>

  </tr>

</table>







<table width="899" border="0" cellpadding="0" cellspacing="0">

  <tr>

  <td width="122" height="89" valign="top">[img]spacer.gif[/img]</td>

  <td width="559" valign="top">[img]spacer.gif[/img]</td>

  <td width="218" valign="top"><div align="right">[img]tree_middle.gif[/img]</div></td>

  </tr>

  <tr>

   <td height="301" valign="top"><div align="center">

    



[img]news.jpg[/img]</p>

     



</p>



</p>



</p>



</p>

     



<font size="-2" face="Verdana, Arial, Helvetica, sans-

      serif">&copy;2004 by 

      flummox</font></p></div></td>

Ich sollte noch erwähnen, dass ich nicht allzu viel Ahnung von dem ganze habe, aber ich bemühe mich ;). Also wenn ich da irgendwo mist gebaut hab...nicht allzu streng sein :rolleyes:

http://singles.olme.net/smileys/vomit.gif
Das ueberrascht mich nicht, dass das nicht funktioniert.
Spacer-gifs, Font-tags obwohl die mit CSS arbeitest, ...

Also sowas debugge ich nur gegen Geld.

Naja wenigstens mal ein Ansatzpunkt. Also die Font-Tags sollte ich mal alle weghauen, und lieber über CSS definieren wenn ich das richtig vertsanden habe.
Wie kann ich ohne die Verwendung von spacer.gif sicherstellen, dass die Tabellen auch in der richtigen Breite und Höhe dargestellt werden?

Zitat:

Original geschrieben von Nando
Naja wenigstens mal ein Ansatzpunkt. Also die Font-Tags sollte ich mal alle weghauen, und lieber über CSS definieren wenn ich das richtig vertsanden habe.

:ja:

Zitat:

Wie kann ich ohne die Verwendung von spacer.gif sicherstellen, dass die Tabellen auch in der richtigen Breite und Höhe dargestellt werden?

Web != Printmedium => gar nicht.
Und wenn Du schon ein Pixel-genaus layout machst, dann bitte mit CSS. http://www.w3.org/TR/CSS2/box.html

So in etwa?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Unbenanntes Dokument</title>

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

</head>

<style type="text/css">

.unten           { vertical-align:bottom; }

A                    { color: #000000; text-decoration: none; } 

A:link                { color: #000000; text-decoration: none; } 

A:visited        { color: #000000; text-decoration: none; } 

A:active        { color: #ffffff; text-decoration: none; } 

A:hover                { color: #ffffff; text-decoration: none; } 

body                 { margin-left:0px; margin-right:0px; margin-top:0px; 

margin-bottom:0px; font-family: verdana; font-size:12px;}

ul#navigation li { 

  display: inline; 

  margin: 0 0px; 

  padding: 10px; 

  font-weight:bold;

}



</style>



<body bgcolor="#EEE2C8">



<div style="position: absolute; left: 0px; top: 0px; width: 225px; height: 113px;">

[img]../Images/relief.jpg[/img]

</div>



<div style="position: absolute; left: 200px; top: 101px; width: 800px; height: 30px;">

<ul id="navigation">[*]news[*]band[*]media[*]dates[*]gallery[*]contact[*]links[/list]</div>

<div style="position: absolute; left: 700px; top: 80px; width: 225px; height: 400px;">

[img]../Images/baum2.gif[/img]

</div>





</body>

</html>

Ich weiss, es ist noch etwas sperrig und ich werd auch ne eigene css-Datei noch anlegen, aber sowas in der Richtung meintest du oder?

Ich gebs auf...ich verstehs einfach nicht. Wenn ich jetzt festlege die Schrift soll mit 0 Pixel Abstand vom oberen Rand stehen, dann klappt das beim IE und beim Opera tadellos, aber der zickige Mozilla rückt die Schrift einfach um 2-3 Pixel runter. Ich blick da nicht mehr durch :heul: