✔ Design im IE vertikal verzogen im FF nicht

Status
Nicht offen für weitere Antworten.
Headymaster

Headymaster

Erfahrenes Mitglied
Hallo!

Habe ein Problem..und zwar verzieht es mein Design in vertikaler Richtung im IE aber nicht im FF.
Habe die table zwar auf display:block gesetzt und td,th -> vertical-align:top aber nutzt auch nichts.....

Hier könnt ihr euch das Prob mal anschauen....unter der Navi ;-)

Außerdem gibt es ein Problem wenn sich der Inhalt vergrößert und übers Design rausschießt....
Ich habe es zwar so hingekommen dass das Design sich dann verlängert aber der table unter dem Design wird nicht nach unten geschoben...man kann das sehr gut im Gästebuch sehen denn dann stehen die Links für Kontakt und Impressum auf einmal mitten im Bild...
Dies ist wiedrum nur im FF und nicht im IE xD

----> Bild im Anhang

MFG Nilson
 

Anhänge

  • verzerrt2.jpg
    verzerrt2.jpg
    19,1 KB · Aufrufe: 44
  • TextÜberAndremText.jpg
    TextÜberAndremText.jpg
    43,4 KB · Aufrufe: 52
Zuletzt bearbeitet:
Hi,

könntest du auch den dazugehörigen Quellcode (HTML + CSS) oder den Link zur Seite posten?

Aus den angehängten Bildern lassen sich nämlich die Ursachen für die Darstellungsfehler nicht nachvollziehen / reproduzieren, und eine konkrete Hilfestellung ist so auch nicht möglich.
 
Ja also hier poste ich mal eben den gesamten html und css code :)

Weil die Seite ist nur auf meinem localhost online und die IP ändert sich immer das wär net so sinnvoll :)

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<base href="http://<?php echo $this->escape($_SERVER['HTTP_HOST']) . $this->escape($this->baseurl); ?>/">
<link rel="stylesheet" href="_files/css/styles.css" type="text/css" />
<script language="javascript" type="text/javascript" src="_files/js/switchpics.js"></script>
<script language="javascript" type="text/javascript" src="_files/js/dropdownnav.js"></script>
<title><?php echo $this->escape($this->title); ?></title>
</head>
<body>
<div id="gruppenangebote">
</div>
<div id="content" align="center">
<table id="Tabelle_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="10">
			<img src="_files/images/design/A-23_01.gif" width="800" height="161" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
		    <a href="veranstaltungen/" onMouseOver="Over('1', '_files/images/design/A-23_02_active.gif');" onMouseOut="Out('1', '_files/images/design/A-23_02.gif');">
			<img id="1" src="_files/images/design/A-23_02.gif" width="140" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="#" onMouseOver="Over('2', '_files/images/design/A-23_03_active.gif');" onMouseOut="Out('2', '_files/images/design/A-23_03.gif');">
			<img id="2" src="_files/images/design/A-23_03.gif" width="102" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="#" onMouseOver="Over('3', '_files/images/design/A-23_04_active.gif');" onMouseOut="Out('3', '_files/images/design/A-23_04.gif');">
			<img id="3" src="_files/images/design/A-23_04.gif" width="115" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="bands/" onMouseOver="Over('4', '_files/images/design/A-23_05_active.gif');" onMouseOut="Out('4', '_files/images/design/A-23_05.gif');">
			<img id="4" src="_files/images/design/A-23_05.gif" width="94" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="guestbook/" onMouseOver="Over('5', '_files/images/design/A-23_06_active.gif');" onMouseOut="Out('5', '_files/images/design/A-23_06.gif');">
			<img id="5" src="_files/images/design/A-23_06.gif" width="118" height="41" alt="">
			</a>
		</td>
		<td>
		    <a href="#" onMouseOver="Over('6', '_files/images/design/A-23_07_active.gif');" onMouseOut="Out('6', '_files/images/design/A-23_07.gif');">
			<img id="6" src="_files/images/design/A-23_07.gif" width="93" height="41" alt="">
			</a>
		</td>
		<td colspan="2">
		    <a href="#" onMouseOver="Over('7', '_files/images/design/A-23_08_active.gif'); showNav('gruppenangebote');" onMouseOut="Out('7', '_files/images/design/A-23_08.gif'); hideNav();">
			<img id="7" src="_files/images/design/A-23_08.gif" width="138" height="41" alt="">
			</a>
		</td>
	</tr>
	<tr>
		<td colspan="2" background="_files/images/design/A-23_12.gif">
			<img src="_files/images/design/A-23_09.gif" width="4" height="277" alt=""></td>
		<td colspan="7" rowspan="3" background="_files/images/design/A-23_10.gif" width="792" height="391">
		  <?php echo $this->render($this->subtemplate); ?>
		</td>
		<td background="_files/images/design/A-23_13.gif">
			<img src="_files/images/design/A-23_11.gif" width="4" height="277" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="_files/images/design/A-23_14.gif">
			<img src="_files/images/design/A-23_12.gif" width="4" height="64" alt=""></td>
		<td background="_files/images/design/A-23_15.gif">
			<img src="_files/images/design/A-23_13.gif" width="4" height="64" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" background="_files/images/design/A-23_12.gif">
			<img src="_files/images/design/A-23_14.gif" width="4" height="50" alt=""></td>
		<td background="_files/images/design/A-23_13.gif">
			<img src="_files/images/design/A-23_15.gif" width="4" height="50" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="_files/images/design/A-23_16.gif" width="1" height="7" alt=""></td>
		<td colspan="9">
			<img src="_files/images/design/A-23_17.gif" width="799" height="7" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="1" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="3" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="136" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="102" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="115" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="94" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="118" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="134" height="1" alt=""></td>
		<td>
			<img src="_files/images/design/Abstandhalter.gif" width="4" height="1" alt=""></td>
	</tr>
</table>
<div>
<a href="#" class="footer">Kontakt</a> | <a href="#" class="footer">Impressum</a><br />
Last Update: <?php echo $this->Time(); ?></font>
</div>
</div>
</body>
</html>

Code: 
html,input,textarea {
  font-family: Arial, Helvetica, sans-serif; font-size: 100.01%;
}
hr {
  border: none; border-top: 1px dotted; border-color:#CCCCCC;
}
h1 {
  font-size: 1.3em; margin: 0em; padding: 0em;
}
h2 {
  font-size: 1.1em; margin: 0em; padding: 0.2em;
  background-color: rgb(223, 237, 215);
}
legend {
  font-weight: bold;
  padding: 0.2em 0.4em;
}
input,textarea {
  width: 100%;
}

table {
  display:block;
}

th,td {
  vertical-align: top;
}

a {
  border:0;
  text-decoration:none;
}

img {
  border:0;
}

.button {
  width: auto;
}
.error {
  background-color: rgb(244, 225, 225); border: 1px solid rgb(204, 0, 0);
  padding: 0.2em; color: rgb(204, 0, 0);
}

body {
			  background-image:url(../images/design/background.gif);
}

a.footer {
  text-decoration:none;
  color:#000000;
  font-weight:bold;
  font-size:14px;
}

table.contenttable {
  width:90%;
  text-align:left;
}

div.pagnitation {
  text-align:left;
}

/* ### Naviagtion ### */

/* --> Gruppenangebote */
div.gruppenangebote {
  position:absolute;
  display:none;
  background-color:#999999;
}

/* ### Guestbook ### */
div.gb_entry_head {
  background-color:#20CFDD;
  margin-top:10px;
  width:100%;
  font-size:14px;
  color:#000000;
  font-weight:bold;
  text-align:left;
}

div.gb_entry_text {
  background-color:#88DCF4;
  width:100%;
  font-size:10px;
  color:#000000;
  text-align:left;
}

/* ### Impressum ### */

table.im_head {
  text-align:left;
}

/* ### Veranstaltungen ### */
div.veranstaltungen_head {
background-color:#20CFDD;
  margin-top:10px;
  width:100%;
  font-size:16px;
  color:#000000;
  font-weight:bold;
  text-align:left;
}

div.veranstaltungen_main {
background-color:#88DCF4;
  width:100%;
  font-size:12px;
  color:#000000;
  text-align:left;
}

/* ### Bands ### */

div.Bands_Head {
  text-align:left;
  background-color:#20CFDD;
  margin-top:10px;
  font-size:14px;
  font-weight:bold;
}

div.Bands_Text {
  text-align:left;
  background-color:#88DCF4;
}


MFG Nilson
 
Die vertikale Verschiebung im IE wird wohl an den "White Spaces" im HTML-Code liegen, also an den Leerzeichen / Zeilenumbrüchen / Einrückungen zwischen <td> ... </td> und den Grafik-Links bzw. Grafikelementen.

Lösungsvorschlag: die display:block-Eigenschaft für die Grafiken bestimmen.

Code: 
a img, img {
display:block; 
}
 
Ja super also Im IE wirds nun auch richtig dargestellt... :)

Nur ist nur noch das Prob....dass im FF der unterste div-block mit den links für Kontakt und Impressum bei einem background-repeat des Contentbereichs nicht mit nach unten verschioben wird...

Sprich der Contentbereich verlängert sich durch background-repeat und die Daten werden ausgegeben.....nur der unterste div-block steht immer noch da wo er vorher war...sprich mitten über den ausgegebenen Daten und nicht unter dem Content...

MFG Nilson
 
Hi,

dass der Footer bei zunehmenden Inhalt nicht nach unten wandert, liegt einfach an der fixen Höhenangabe für die Tabelle.

Alternativ kannst du mit der folgenden CSS-Regel arbeiten und das height-Attribut aus dem table-Element entfernen:

Code: 
#Tabelle_01 {
min-height: 601px; /* Mindesthöhe für moderne Browser */
height: auto !important; /* !important-Regel für moderne Browser */
height: 601px; /* "Mindesthöhe" für IE */
}
 
Ja super das klappt nun auch wunderbar :)

Sag mal gibbet da eigentlich mal nen schönes Tut zu CSS für mehrere Browser?
Weil das brauch ich unbedingt mal ^^

MFG Nilson
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück