WinFuture-Forum.de: Rowspan Problem In Firefox - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Rowspan Problem In Firefox


#1 Mitglied ist offline   Turbokiffer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 130
  • Beigetreten: 18. November 06
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Königbsronn

geschrieben 27. April 2010 - 15:34

Hi,
schreibe für einen bekannten eine Homepage und will ein Bild neben einem Text haben. Dazu hab ich eine Tabelle erstellt. In der ersten Spalte steht der Text, in der zweiten ist das Bild. Da das Bild aber so hoch ist, hab ich zwei Zeilen erstellt und das Bild mit rowspan über beide Zeilen gestreckt, während der Text in der ersten Zeile sitzt.
Die Darstellung funzt auch im IE so wie ichs gern hätte, also Bild bündig links neben Text, aber NICHT im Firefox (ausgerechnet dem Browser auf dem die HP nachher hauptsächlich dargestellt wird.), da schiebts mir das Bild immer nach oben, so als ob der rowspan gar nicht da wäre.
Habe mir die tabelle aber mit "border" anzeigen lassen und der rowspan ist da!! Aber das Bild wird anstatt nach unten, nach oben angezeigt und schiebt dann die Tabelle entsprechend raus.

Eingefügtes Bild


<div class="post_body">

<table>

<tr>
<td>&nbsp;</td>
<td rowspan="2"><img src="Ordner/Bild.jpg" alt="Bild"></td>
</tr>

<tr>
<td>Text in der Spalte</td>
</tr>

</table>

</div>


Im Internet Explorer bekomme ich das so dargestellt wie ich will, aber die Firefox schiebt das Bild immer nach oben. Bin langsam echt am Firefox verfluchen und Verzweifeln.
<_<

EDIT: Habe ohne Tabelle und mit float="left" etc... auch schon versucht. Funktioniert ebenfalls tadellos im Internet Explorer aber bei dem sch*** Firefox zerschießt er mir mein ganzes CSS-Layout -.-

Dieser Beitrag wurde von Turbokiffer bearbeitet: 27. April 2010 - 15:37

0

Anzeige



#2 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 27. April 2010 - 15:43

Kannst du denn die zugehörige CSS einmal zeigen - oder am Besten einen Link - sonst müsste man die Glaskugel bemühen. <_<
0

#3 Mitglied ist offline   Turbokiffer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 130
  • Beigetreten: 18. November 06
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Königbsronn

geschrieben 27. April 2010 - 15:49

Der Quelltext der CSS:
Ist übrigens (Schande über mein Haupt^^) eine fertige Vorlage aus dem Netz, da ich im designen eine absolute Niete bin. Vieles von dem definierten Zeug brauch ich gar nicht, aber beim "bereinigen" hab ich auch andere Dinge aus versehen abgeschossen und daher dann meine Finger davon gelassen.

html {
	font-size: 62.5%; /* reset 1em to 10px */
	height: 100%;
}

body {
	background: #444 url('img/body.jpg');
	color: #444;
	font: normal 1.2em Verdana,Arial,sans-serif;
	height: 100%;
	padding-bottom: 1px; /* force scrollbars */
	padding-top: 64px;
}

small,.small {font-size: 0.9em;}

a {
	color: #EEC;
	text-decoration: none;
}
a:hover {
	color: #FFA;
	text-decoration: underline;
}

p {padding: 0.2em 0 1.2em;}

blockquote, code {
	background: #4A4A4A;
	border: 1px solid #333;
	color: #BBB;
	display: block;
	margin-bottom: 12px;
}
code {
	font: normal 0.9em Verdana,sans-serif;
	line-height: 1.5em;
	padding: 8px 14px;
}
blockquote {
	background: #4A4A4A url('img/quote.gif') no-repeat left top;
	padding: 6px 14px 6px 44px;
}
blockquote p {padding: 0.5em 0;}

td.imgholder img {
display:block;
margin:0;
padding:0;
}

/* --------------------------------
   Headings, titles
----------------------------------- */

h1 {font: normal 2em Georgia,sans-serif;}
h2 {font: normal 1.6em Georgia,sans-serif;}
h3 {font: normal 1.4em Georgia,sans-serif;}
h4 {font: bold 1em Georgia,sans-serif;}

h1, h2, h3, h4 {margin-bottom: 5px;}


/* --------------------------------
   Main layout
----------------------------------- */

#paper_left {
	background: url('img/paper_left.gif') no-repeat left top;
	margin: 0 auto;
	padding-bottom: 34px;
	width: 778px;
}
#paper_right {
	background: url('img/paper_right.gif') no-repeat right bottom;
}

#layout_wrapper {
	background: #50504A url('img/grain_dark.gif');
	margin: 0 auto;
	width: 736px;
}
#layout_container {padding: 8px;}
#layout_content {border: 1px solid #333;}

#header_image {
	height: 160px;
	background: #222 url('img/header.jpg') no-repeat;
	border-bottom: 1px solid #222;
	border-top: 1px solid #111;
}


/* --------------------------------
   Site title
----------------------------------- */

#site_title {
	background: #222;
	padding: 12px 20px;
}
#site_title h1 	{
	color: #EED;
	font: normal 2em Georgia,sans-serif;
	margin: 0 0 5px;
}
#site_title h2 {
	color: #BFBFB6;
	font: normal 1.1em sans-serif;
	margin: 0;
}


/* --------------------------------
   Navigation
----------------------------------- */

.navigation {
	background: #353535 url('img/navigation.jpg') repeat-x;
	border-bottom: 1px solid #222;
	border-top: 1px solid #555;
}
.navigation ul {display: inline; margin: 0;}
.navigation ul li {
	border-right: 1px solid #303030;
	float: left;
	list-style: none;
}
.navigation a {
	color: #AAA;
	display: block;
	font: bold 1em Verdana,sans-serif;
	padding: 12px 14px;
	text-decoration: none;
}
.navigation a:hover {
	background: #444;
	color: #E5E5D5;
	text-decoration: none;
}
.navigation li.current_page_item a {
	background: none;
	color: #EEE;
}

/* Sub navigation */
#subnav a {
	padding: 10px;
	font-size: 0.9em;
}


/* --------------------------------
   Main
----------------------------------- */

#main {
	background: #4A4A4A;
	color: #CCC;
}


/* --------------------------------
   Bottom
----------------------------------- */

#bottom {
	background: #222;
	border-bottom: 1px solid #1A1A1A;
	border-top: 1px solid #2A2A2A;
	color: #AAA;
	padding: 16px;
}
#bottom ul li {
	border-bottom: 1px solid #303030;
}
#bottom ul li a {
	color: #777;
	display: block;
	padding: 4px 6px;
}
#bottom ul li a:hover {
	background: #2A2A2A;
	color: #FFC;
	text-decoration: none;
}

/* Tag cloud */
#tag_cloud a {color: #777;}
#tag_cloud a:hover {color: #FFC;}

/* --------------------------------
   Footer
----------------------------------- */

#footer {
	background: #2A2A2A;
	border-bottom: 1px solid #1A1A1A;
	border-top: 1px solid #333;
	color: #888;
	font-size: 0.9em;
	padding: 10px 12px;
}
#footer a {color: #AAA;}
#footer .right,#footer .right a {color: #555;}
#footer a:hover {color: #BBB;}


/* --------------------------------
   Floats
----------------------------------- */

.left {float: left;}
.right {float: right;}
.clear,.clearer {clear: both;}
.clearer,.block {
	display: block;
	line-height: 0;
	font-size: 0;
}
.clearer {height: 0;}


/* --------------------------------
   Misc
----------------------------------- */

/* Columns */
.col3, .col3last {width: 31%; margin-right: 3%;}
.col3last {margin-right: 0;}

/* Images */
img.bordered {padding: 3px; background: #666;}

/* Text */
.tleft {text-align: left;}
.tcenter {text-align: center;}
.tright {text-align: right;}
.vtop {vertical-align: top;}

/* Icons */
span.comment {background: url('img/icon_comment.gif') no-repeat left center; padding-left: 18px;}

/* Label */
.label {
	background: #222 url('img/post_top.gif') repeat-x left top;
	border-bottom: 2px solid #555;
	color: #BBB;
	margin: 0;
	padding: 0.5em 0.8em 0.6em;
}

/* Margin, padding, width, height */
.ptb10 {padding: 10px 0;}

/* --------------------------------
   Posts
----------------------------------- */

.post {
	background: #363636;
	border-bottom: 1px solid #111;
}
.post_top {
	background: #222 url('img/post_top.gif') repeat-x left top;
	border-bottom: 4px solid #777;
	border-top: 1px solid #3A3A3A;
	padding: 10px 16px 13px;
}
.post_title h2 {
	font-size: 2em;
	margin: 0;
	padding: 0;
}
.post_body {
	background: url('img/post_body.jpg') no-repeat left top;
	border-top: 1px solid #333;
	padding: 16px 16px 0;
}
.post_metadata {padding: 10px;}
.post_metadata .content {
	background: #424242;
	color: #999;
	font-size: 0.9em;
	padding: 10px 12px;
}
.post_metadata a {color: #BBB;}
.post_metadata a:hover {color: #DDD;}

.post_body ul, .post_body ol {margin: 0 0 1em 1.5em;}
.post_body ul {list-style: disc;}
.post_body ol {list-style: decimal;}


/* ----------------------------------------
  Forms
------------------------------------------- */

form {margin: 0; padding: 0;}

/* Inputs */
input#s, textarea, input.styled {
	background: #DDD;
	border: 3px solid #555;
	font: normal 1em Verdana,sans-serif;
	padding: 3px;
	width: 160px;
}
textarea {width: 440px;}

/* Seachform */
table.search {
	border-collapse: collapse;
	width: 250px;
}
table.search td {vertical-align: top;}


/* ----------------------------------------
   Comments
------------------------------------------- */

.comment_gravatar {width: 48px;}
.comment_gravatar img {
	background: #666;
	border: 1px solid #444;
	padding: 2px;
}
.comment_author {
	color: #EEE;
	padding-top: 2px;
}

/* ----------------------------------------
   Lists
------------------------------------------- */

.nicelist {padding: 0;}
.nicelist ol {margin: 0;}
.nicelist ol li {
	border-bottom: 1px solid #333;
	border-top: 1px solid #505050;
	list-style: none;
	padding: 8px 10px 1px;
}
.nicelist ol li:first-child {border-top: none;}
.nicelist li.alt {background: #444;}
.nicelist .body {padding-top: 5px;}
.nicelist .date {
	color: #999;
	font-size: 0.9em;
	padding-top: 4px;
}
.nicelist .date a {
	color: #BBB;
	text-decoration: none;
}
.nicelist .date a:hover {text-decoration: underline;}


/* ----------------------------------------
   Archives
------------------------------------------- */

.archive_title {font: normal 1.4em sans-serif;}
.archive_title a {text-decoration: none;}
.archive_title a:hover {text-decoration: underline;}
.archive_postinfo {padding-bottom: 6px;}


/* ----------------------------------------
   Pagination
------------------------------------------- */

.pagenavigation {
	background: #555;
	border-top: 1px solid #444;
	font-size: 0.9em;
	padding: 7px 8px 9px;
}
.pagenavigation a {
	color: #CCC;
	text-decoration: none;
}
.pagenavigation a:hover {
	color: #FFF;
	text-decoration: underline;
}

Dieser Beitrag wurde von Turbokiffer bearbeitet: 27. April 2010 - 15:50

0

#4 Mitglied ist offline   Turbokiffer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 130
  • Beigetreten: 18. November 06
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Königbsronn

geschrieben 27. April 2010 - 18:11

Sorry für den Doppelpost, aber bevor jemand die ewig lange CSS durchsucht:

Daran liegts nicht !! Habe Sie mal umbenannt und das HTML - Dokument geöffnet. Das unformatierte HTML - Dokument hat das gleiche Problem, d.h. die CSS ist nicht schuld!
Hier nochmal so wie's im IE aussieht und auch aussehen soll und was Firefox für Mull macht!

Eingefügtes Bild
0

#5 Mitglied ist offline   tobias86 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.690
  • Beigetreten: 14. August 06
  • Reputation: 6
  • Geschlecht:Männlich
  • Wohnort:localhost

geschrieben 28. April 2010 - 07:32

Also ich habe genau deinen Quellcode in ein leere HTML Dokument eingefügt. Ergebnis es funktioniert im FireFox

Eingefügtes Bild

Ich denke das du vorher vergisst eine Tabelle zu schließen? bzw. vielleicht irgendwo ein Tag vergessen hast?

Edith: Rechtschreibfehler angepasst :)

Dieser Beitrag wurde von tobias86 bearbeitet: 28. April 2010 - 07:33

0

#6 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 28. April 2010 - 08:04

Ja, das denke ich auch. Installiere entweder die Webdeveloper Toolbar für Firefox (oder benutze F12 für IE8) und validiere die Seite, oder benutze http://validator.w3.org/ dafür. Wenn die Seite nur lokal vorhanden ist wähle den Quelltext der Seite komplett (!) aus und füge ihn dort ein. Dann werden normalerweise auch alle Fehler angezeigt. Manchmal auch sehr viele...
0

#7 Mitglied ist offline   Turbokiffer 

  • Gruppe: aktive Mitglieder
  • Beiträge: 130
  • Beigetreten: 18. November 06
  • Reputation: 0
  • Geschlecht:Männlich
  • Wohnort:Königbsronn

geschrieben 28. April 2010 - 22:46

Alles falsch...^^

Bin nun doch nach Opferung des Nachmittags draufgekommen, das eine Zeile in einer von 3 der Kilometerlangen CSS-Dateien lag
"vertical-align: baseline;"

--> immer diese Fertig - Vorlagen ausm Netz^^

Jetzt funzts auf jeden Fall, Danke mal für die Hilfe :D
0

#8 Mitglied ist offline   tobias86 

  • Gruppe: aktive Mitglieder
  • Beiträge: 1.690
  • Beigetreten: 14. August 06
  • Reputation: 6
  • Geschlecht:Männlich
  • Wohnort:localhost

geschrieben 29. April 2010 - 07:30

Beitrag anzeigenZitat (Turbokiffer: 28.04.2010, 23:46)

Bin nun doch nach Opferung des Nachmittags draufgekommen, das eine Zeile in einer von 3 der Kilometerlangen CSS-Dateien lag
"vertical-align: baseline;"

--> immer diese Fertig - Vorlagen ausm Netz^^


tja, kommt davon wenn man eine vorgefertige CSS-Datei nimmt und sich nicht mit der Thematik beschäftigt :D
0

#9 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 30. April 2010 - 07:58

Unterschiedliche Darstellungen von Tabellen tauchen eigentlich immer dann auf, wenn man invaliden HTML-Code verwendet und sich die Browser dadurch im Quirks-Modus befinden.
Daher heißt es nicht über die Browser schimpfen, sondern über sich selbst! Und bloß nie den entsprechenden Doc-Type vergessen!

Der IE ist übrigens der Beste, wenn es heißt kaputten HTML-Code zu rendern.
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0