[HTML] Focusrect zu groß bei Bildlink mit STRICT Variante

Fluid Byte · Beitrag von **Fluid Byte** » 16.11.2007 21:04

Wenn man ein Bild in einen <a> Tag einbindet um einen Blidlink zu erstellen wird die Gesamthöhe mit einer HTML/XHTML STRICT -Variante unterschiedlich berechnet als mit Transitional. Ich habe aber keinen Schimmer warum.

Code mit HTML Transitional:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table width="250" height="190" border="0" cellpadding="2" cellspacing="2" bgcolor="#999999">
  <tr>
    <td align="center" valign="middle" bgcolor="#FFFFFF"><a href="http://codedreality.purearea.net/"><img src="http://codedreality.purearea.net/temp/wahrsagerin.jpg"></a></td>
  </tr>
</table>
</body>
</html>

Ergebniss:
Bild

Code mit HTML Strict:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<table width="250" height="190" border="0" cellpadding="2" cellspacing="2" bgcolor="#999999">
  <tr>
    <td align="center" valign="middle" bgcolor="#FFFFFF"><a href="http://codedreality.purearea.net/"><img src="http://codedreality.purearea.net/temp/wahrsagerin.jpg"></a></td>
  </tr>
</table>
</body>
</html>

Ergebniss:
Bild

Es ist möglich den überstehenden Whitespace zu entfernen wenn man beiden <img> Tags style="display: block;" hinzufügt aber dann ist das Focusrect futsch.

DarkDragon · Beitrag von **DarkDragon** » 16.11.2007 21:11

Nur falls nichts anderes angeboten wird:
Mach den Focusrect einfach weg mit JS

Code: Alles auswählen

onfocus='this.blur()'

im HTML Tag.

Fluid Byte · Beitrag von **Fluid Byte** » 16.11.2007 21:41

Fluid Byte hat geschrieben:Es ist möglich den überstehenden Whitespace zu entfernen wenn man beiden <img> Tags style="display: block;" hinzufügt aber dann ist das Focusrect futsch.

AND51 · Beitrag von **AND51** » 16.11.2007 22:51

hast du vielleicht überflüssige Leerzeichen/Linebreaks noch innerhalb der Zelle/rund um das Image?
Ansonsten kann ich mir momentan auch keinen Reim darauf machen.

P.S.: Musst du denn unbedingt alles in STRICT machen? Oder reicht für dein Projekt nicht auch TRANSITIONAL?

> HTML/XHTML STRICT -Variante
Also bei XHTML muss definitiv jedes Tag abgeschlossen werden! Und wenn du ein Standalone Tag hast, machst du entweder

Code: Alles auswählen

<img src="and51.png"></img>

(seltenere Variante) oder das hier:

Code: Alles auswählen

<img src="and51.png" />
---------------------^

Sonst ist es kein gültiger XHTML-Code. Möglicherweise (ich hoffe, dieser Satz ist kein Blech), liegt das Fehlerhafte Focusrect daran!

Fluid Byte · Beitrag von **Fluid Byte** » 16.11.2007 23:19

AND51 hat geschrieben:hast du vielleicht überflüssige Leerzeichen/Linebreaks noch innerhalb der Zelle/rund um das Image?

Definitiv nicht.

AND51 hat geschrieben:P.S.: Musst du denn unbedingt alles in STRICT machen? Oder reicht für dein Projekt nicht auch TRANSITIONAL?

Nein, alles STRICT.

AND51 hat geschrieben:> HTML/XHTML STRICT -Variante
Also bei XHTML muss definitiv jedes Tag abgeschlossen werden! Und wenn du ein Standalone Tag hast, machst du entweder
Code: Alles auswählen
<img src="and51.png"></img>
(seltenere Variante) oder das hier:
Code: Alles auswählen
<img src="and51.png" />
---------------------^

Ganz behämmert bin ich auch nicht... Bild

AND51 hat geschrieben:Sonst ist es kein gültiger XHTML-Code. Möglicherweise (ich hoffe, dieser Satz ist kein Blech), liegt das Fehlerhafte Focusrect daran!

Ich benutze HTML, nicht XHTML. Bild

AND51 · Beitrag von **AND51** » 16.11.2007 23:32

> Ganz behämmert bin ich auch nicht
Das sag ich ja auch nicht. Aber wenn du von XHTML sprichst, gehe ich davon aus, dass du es verwenden möchtest. Daher musst du die Tags korrekt schließen. Das hast du im Beispielcode aber nicht getan.

Zum Thema:
Ich habe eine alternative Idee. Versuch doch mal, beim IMG- oder A-Tag folgendes hinzuzugügen:

Code: Alles auswählen

<a href="bla.htm" style="width:200px;height:300px;">
   <img src... />
</a>

Damit kannst du die Dimensionen des A-Tags eingrenzen (hoffe ich). Musst natürlich nur die Dimensionen des Bildes eintragen. Oder du lässt die DImensionen automatisch/dynamisch von JavaScript eintragen.

Fluid Byte · Beitrag von **Fluid Byte** » 17.11.2007 17:47

Nah, funzt nicht. Bild

AND51 · Beitrag von **AND51** » 17.11.2007 18:13

Ich denke, deine hübsche Wahrsagerin kann auch ohne Border leben, daher probier doch mal im IMG-Tag:
BORDER="0"
Denn du weißt ja, dass bei Bildern, die sich in einem Link befinden, automatisch ein Rand angefügt wird.

Fluid Byte · Beitrag von **Fluid Byte** » 17.11.2007 18:49

In wie fern hat das mit meinem Problem zu tun?

AND51 · Beitrag von **AND51** » 17.11.2007 19:32

Durch Rahmen vergrößern sich die Dimensionen eines Elements. Ich kann mittlerweile auch nur raten, da ich nicht viel in STRICT mache; aber vielleicht hat eben der Rahmen was mit diesem Problem zu tun.