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:

Probier mal statt

Code:

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

das hier:

Code:

BODY { margin: 0 0 0 0; }

Hilft auch nicht...die Schrift wird beim Mozilla immer eine Spur weiter unten angezeigt, als vorgesehen. Die Grafiken jedoch passen alle und sind richtig ausgerichtet...ist mir ein absolutes Rätsel.

BIn gerade draufgekommen, dass es ein Bug ist. Mozilla kann Listenelemente, die als inline formatiert sind nicht korrekt ausrichten oder so. :mad:
Schön langsam frage ich mich was manche an Mozilla finden...bei mir ist er um einiges langsamer als IE oder Opera, hat bei vielen Seiten Probleme...

Da ich die Leiste jetzt nicht mehr als Liste darstellen kann/will, hab ich ja jetzt auch keine direkte Möglichkeit den Abstand zwischen den Einträgen zu beeinflussen. Habe das jetzt mit Leerzeichen gelöst (siehe Code).

Code:

<div style="position: absolute; left: 225px; top: 101px; width: 

675px; height: 12px; font-weight: bold; margin-left: 10px;"> 

news&nbsp&nbsp&nbsp

band&nbsp&nbsp&nbsp

media&nbsp&nbsp&nbsp

dates&nbsp&nbsp&nbsp

gallery&nbsp&nbsp&nbsp

contact&nbsp&nbsp&nbsp

links&nbsp&nbsp

</div>

Ist das jetzt extremer Pfusch oder eine passable Lösung???

das ist extremer pfusch :D

";" nach den &nbsp fehlt ;)

Zitat:

Original geschrieben von valo
das ist extremer pfusch :D

";" nach den &nbsp fehlt ;)

Wie könnte ich das sonst noch auf halbwegs einfache Weise angehen?

der ";" fehlt absichtlich, weil sonst nur Leerzeichen hier angezeigt werden würden ;)

EDIT: aber auch wenn es "pfusch" ist...es erfüllt doch den Zweck, wird in allen Browsern gleich dargestellt, ist webkonform...also eigentlich dann doch wieder ein praktikable lösung