Tabelle wird nur im Firefox richtig angezeigt und weitere Probleme

Aiyana · #1 (**permalink**) 27.12.2010, 18:39

Ich hoffe ich bin im richtigen Unterforum gelandet, da es sich teilweise auch auf CSS bezieht.

Und zwar geht es um diese Website: Weinwissen - Weinwelt

Mit dem Rest bin ich ganz zufrieden, aber eben nicht mit dieser Unterseite. Ich sitze da jetzt Stunden rum und ich komme nicht weiter.
Die Boxen sind in Tabellen verschachelt und jedes Tabellenfeld hat ein Bild zugewiesen bekommen. Mit CSS hatte ich die perfekte Lösung hinbekommen (allerdings offline und Regeln missachtet), nur beim hochladen im Firefox sah es schlechter aus, Internet Explorer ganz schlimm und Safari katastrophal. Der Validator hat auch natürlich nur gemeckert. Also jetzt Tabellen.

1. Problem:

Im neuen Firefox wird diese Seite korrekt dargestellt.

Beim neuen Internetexplorer sind die unteren Bilder in den Boxen irgendwie doppelt. Unten sieht man einen kleinen Streifen wo sich das Bild wiederholt.Wie bekomme ich das weg?

Bei Safari gleiches Problem wie IE, aber noch dazu: Der Header der Boxen ist nur so groß wie die Schrift, Safari scheint meinen Code "height:41px" völlig zu ignorieren.

2. Problem

Meine Vorstellung war: Klickt man auf eine Box wird man zu der jeweiligen Seite verlinkt. Bei CSS hat das geklappt (aber der Rest ja nicht) und bei Tabellen habe ich jetzt gelesen habe ich keine Chance auf eine Lösung. (Also die ganze Tabelle ist ein Link). Die einzige Lösung die ich habe ist den Text zu verlinken... semioptimal. Oder alles rauschmeißen und die Boxen als Bilder reinzustellen.
noch weniger optimal. Hat irgendeiner von den Experten hier eine Idee?

Hinweis: Ich bin Anfänger

Hier der Code für die erste Box (alle anderen sind auch so aufgebaut):

HTML-Code:

<table class="tableleft" align="left"  border="0" cellspacing="0" cellpadding="0">
       <colgroup>
       <col width="90" /><col width="210" />
       </colgroup>
<thead>
       <tr>
       <th colspan="2">Weingeschichte</th>
       </tr>
</thead>
<tbody>
       <tr>
       <td style="background-image: url(../images/foto/weingeschichtebody.png)"></td>
       <td style="background-image: url(../images/foto/weingeschichtebodylight.png)" valign="top">
        Weinreben wurden erstmals vor &uuml;ber 8000 Jahren durch
        den Menschen kultiviert. Der Nahe Osten gilt als Wiege der Weinherstellung...
       </td>
       </tr>
</tbody>
</table>

Hier der CSS Part:

Code:

.templatemo_post_area thead {

    background: url(images/foto/thead.png)repeat-y;
    font-family: Verdana, Arial;
    font-size:13px;
    color: #FFFFFF;
    height: 41px;
}

.templatemo_post_area td {

    font-family: Verdana, Arial;
    font-size:12px;
    font-weight: bolder;
    color: #000000;
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 7px;
    height: 170px;

}

.tableleft{

     font-family: Verdana, Arial;
     font-size:13px;
     color: #FFFFFF;
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 43px;
     padding-right: 10px;

}

.tableright{

     font-family: Verdana, Arial;
     font-size:13px;
     color: #FFFFFF;
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 10px;
     padding-right: 43px;

}

heiko_rs · #2 (**permalink**) 27.12.2010, 19:14

Verwende keine Zeit auf die Tabellen, denn die sind hier nicht das geeignete Element. Denkbar ist imho am ehesten eine ul, mit den li floatend mit height (und ggf. overflow: auto), oder (noch besser) als inline-block, ggf. mit min-height. thead wird dann zu h2 (solange "Weinwissen" eine h1 ist).

Für die optimale Umsetzung siehe CSS tests and experiments.

Scheppertreiber · #3 (**permalink**) 27.12.2010, 19:56

Die Tabelle ist ja eigentlich korrekt, nur der IE vesteht das so nicht richtig.
Mach's wie es Heiko vorgeschlagen hat.

heiko_rs · #4 (**permalink**) 27.12.2010, 20:36

Die Tabellen sind hier absolut nicht korrekt

Aiyana · #5 (**permalink**) 27.12.2010, 22:25

Danke!! Es hat tatsächlich mit inline-block geklappt. Darauf wäre ich nicht gekommen. Und sogar ziemlich platzsparend.

Aber jetzt weiß ich nicht wie ich den Text auf das verlinkte Bild bekommen soll... egal wie ich es versuche, er erscheint entweder darüber oder darunter. Und ich brauche ja sogar zwei "Textfelder" in dem Sinne.

Das ist jetzt meine Lösung (der Server scheint grade übrigens down zu sein)

HTML-Code:

<ul id="inline-block">
<li><a href="weingeschichte.html"><img src="../images/foto/weinwissen1.png" /></a></li>
<li><a href="weinanbau.html"><img src="../images/foto/weinwissen2.png" /></a></li>
<li><a href="weinherstellung.html"><img src="../images/foto/weinwissen3.png" /></a></li>
<li><a href="weingenuss.html"><img src="../images/foto/weinwissen4.png" /></a></li>
<li><a href="weinspezial/weinspezial.html"><img src="../images/foto/weinwissen5.png" /></a></li>
<li><a href="weinquiz.html"><img src="../images/foto/weinwissen6.png" /></a></li>
 </ul>

Code:

ul#inline-block li {

    display: inline-block;
    width: 300px;
    height: 210px;
    font-family: Verdana, Arial;
    font-size: 13px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 5px;
}

a img { border: none;}

Mir fällt auf, dass das Thema jetzt eigentlich eher ins CSS Forum gehört.

fricca · #6 (**permalink**) 28.12.2010, 00:35

Was du da als Bilder einsetzt gehört als Hintergrund ins Stylesheet. Dann kannst du auch deinen Inhalt draufschreiben.

Wie Heiko bereits schrieb: inline-block ist sinnvoll, wenn die Höhe nicht fest ist. Wenn du feste Höhen vergibst tut's auch float.
inline-block ist eine junge Eigenschaft, die für ältere Browser einiges an Sonderbehandlung erfordert.

Was auch immer du anwenden willst: Little Boxes eignet sich zum erlernen der Grundlagen.

Aiyana · #7 (**permalink**) 28.12.2010, 01:43

Mit float hatte ich das schon ausprobiert. Da kam es zu Darstellungsfehlern bei den anderen Browsern. Mit inline-block sieht es (bei den neuen Browsern zumindest) perfekt aus. Die älteren werd ich mir natürlich auch noch mal anschauen.

Klar sollte es als background-url. Da bin ich auch grade wieder am ausprobieren.
Dann kann ich zwar den Text setzen, aber ich kann das ganze wieder nicht verlinken, höchstens den Text selber.

Also nochmal: ich möchte eine Box (Grafik), diese wird mit 2 "Textfeldern" beschriftet und sollte als Ganzes verlinkt werden zu einer html Seite.
Unlösbar? Oder stehe ich auf dem Schlauch?

Entweder ich mache es so wie ich den Quellcode gepostet hab: Dann kann ich nicht schreiben. Oder packe die Grafik in die CSS Datei, dann kann ich die Grafik nicht verlinken! Argh...

So neue Idee: Ich mache einen zweiten Layer (transparentes gif) und versuche diesen über alles andere zu positionieren und lege per Image-Map fest das die Boxen verlinken sollen. Würde das funktionieren?
Oder hat jemand noch eine bessere Lösung?

fricca · #8 (**permalink**) 28.12.2010, 01:50

Zitat:

Mit float hatte ich das schon ausprobiert. Da kam es zu Darstellungsfehlern bei den anderen Browsern.

Dann zeig bitte, was du gemacht machst. Wie soll dir sonst jemand helfen?

Zitat:

Also nochmal: ich möchte eine Box (Grafik), diese wird mit 2 "Textfeldern" beschriftet und sollte als Ganzes verlinkt werden zu einer html Seite.
Unlösbar? Oder stehe ich auf dem Schlauch?

Ja, wahrscheinlich letzteres.
Da du aber nicht zeigst, was du machst, kann dir niemand sagen, was du falsch machst.

Zitat:

So neue Idee: Ich mache einen zweiten Layer (transparentes gif) und versuche diesen über alles andere zu positionieren und lege per Image-Map fest das die Boxen verlinken sollen. Würde das funktionieren?

Vergiss das bitte ganz schnell.

Du würdest dir selbst den größten Gefallen tun, wenn du dich hinsetzt und erstmal Little Boxes komplett durcharbeitest. Dann hast du Grundlagen, auf die du aufbauen kannst.
CSS kann man nicht erraten. Man muss es lernen.

Aiyana · #9 (**permalink**) 28.12.2010, 02:15

Gut mein momentaner Versuch: Bild als Background definieren. Problem: Verlinkung funktioniert nicht, da man Backgrounds ja nicht verlinken kann.

Und hochladen kann ich es nicht, da der ftp Zugang Probleme macht auf dem Server (nicht nur bei mir).
Aber wer es sich bildhaft vorstellen möchte: Es sieht aus wie auf der Website derzeit, nur das der Text drin steht in den Boxen und die Boxen nicht verlinkt sind.

HTML-Code:

<ul>
<li class="weinwissen1"><b>Weingeschichte</b><p class="weinwissen">text</p></li>
<li class="weinwissen2"><b>Weinanbau</b><p class="weinwissen">text</p></li>
<li class="weinwissen3"><b>Weinherstellung</b><p class="weinwissen">text</p></li>
<li class="weinwissen4"><b>Weingenuss</b><p class="weinwissen">text</p></li>
<li class="weinwissen5"><b>Wein Spezial</b><p class="weinwissen">text</p></li>
<li class="weinwissen6"><b>Wein-Quiz</b><p class="weinwissen">text</p></li>
</ul>

Code:

p.weinwissen  {
    font-family: Verdana, Arial;
    font-size:	13px;
    text-align: left;
    color: #000000;
    margin-top: 30px;
    margin-left: 100px;
}


li.weinwissen1  {

    background: url("http://xhtmlforum.de/images/foto/weinwissen1.png");
    display: inline-block;
    width: 300px;
    height: 210px;
    font-family: Verdana, Arial;
    font-size:	13px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 5px;
}

li.weinwissen2  {

    background: url("http://xhtmlforum.de/images/foto/weinwissen2.png");
    display: inline-block;
    width: 300px;
    height: 210px;
    font-family: Verdana, Arial;
    font-size:	13px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 5px;
}

usw.

So: Wo stehe ich nun auf dem Schlauch?

Apropos float: Das kann ich hinterher immer noch ändern, an dem Problem "text und link" ändert sich dadurch nichts...

fricca · #10 (**permalink**) 28.12.2010, 02:44

Du kannst keine Hintergrundbilder verlinken. Aber du kannst Links Hintergrundbilder geben. Du willst auch keine Bilder verlinken, sondern deine Inhalte. Also schreib sie rein, deine Links.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfänger -> CSS wird bei Firefox 100% angezeigt aber beim IE nicht	mscheller	CSS	14	08.01.2008 11:43
padding funzt net so richtig im Firefox	big-a	CSS	12	25.05.2005 14:32
Tabelle wird bei display:block nur zur Hälfte angezeigt	shunny	CSS	5	18.05.2005 16:24
html tabelle in div steht im firefox rechts neben div	Holger (HMR)	CSS	2	08.01.2005 18:45
Tabelle im Firefox 0.9.2	Dieter	(X)HTML	4	09.08.2004 16:01