Darstellung Firefox falsch

dirtyone · #1 (**permalink**) 19.07.2011, 09:12

Hallo an die Community,

habe eine neue Seite aufgebaut und erweitert, wobei ich das Layout (.css) erworben habe.

Nach einigen Änderungen, stehe ich jetzt vor dem Problem, dass die Seite im Firefox falsch dargestellt wird.

vgl. VDLZ-Vereinsdienstleistungszentrum

Jetzt habe ich gestern abend/nacht damit verbracht das ganze script XHTML mässig in Ordnung zu bringen in der Hoffnung den Fehler zu finden. Leider ohne Erfolg.

Kann mit jemand weiterhelfen?

Grüße Walter

zeji · #2 (**permalink**) 19.07.2011, 09:15

Wär natürlich noch gut zu wissen, was daran jetzt nicht passt, bzw wie es richtig auszusehen hat.

Was ich aber sofort sehe ist, dass du das Ganze allein vom html eigentlich schon in die Tonne kloppen, bzw komplett überarbeiten kannst, da man Tabellen NIEMALS zum layouten benutzten sollte.

Darf man Fragen von was für einem "Fachmann" du das Layout erworben hast?

dirtyone · #3 (**permalink**) 19.07.2011, 09:28

Das Layout wird meines Errachtens im Internet Explorer richtig dargestellt.
Zumindest soll es so aussehen wie im Internet Explorer.

Tja, wenn ich das noch wüsste wo ich das her hab, war auf jedenfall so'n .css Template Portal, war aber ned so teuer. Solange es nicht bearbeitet wurde war es auch ok, aber jetzt wird's immer schwieriger.

LG Walter

zeji · #4 (**permalink**) 19.07.2011, 09:51

Wie gesagt solltest du ganz schnell von diesem Tabellenlayout weg und anstatt mit spacerbildern mit margin/padding arbeiten.

Ich tus zwar ungern, aber...

Die Lösung des Problems lautet wie folgt:
Füge der css-datei folgendes hinzu, damit zentrierst du alles Einheitlich und der weiße Balken sitzt auch so wie er sollte

Code:

table{margin:0 auto;}

Gruß

dirtyone · #5 (**permalink**) 19.07.2011, 10:11

Besten Dank zeji,

das sieht sehr gut aus...

Für mich als "noob" ist das ein riesen Ding die Tabellen "verschwinden" zu lassen?

Ich habe nicht soviel Erfahrung mit .css aber meine eigenen Entwürfe scheiterten schlussendlich daran, dass vor lauter Verschachtelung nichts mehr funktioniert hat. Daher habe ich dann ein "schönes" Layout gekauft und nach meinem Gusto umgebaut...

Wie würde ich am besten vorgehen?

1. Homepage lesen (Quelltext) und die Tabellen definieren und skizzieren
2. CSS neu aufbauen mit Container Elementen für jede Tabelle
3. Quelltext umformatieren
... So in etwa?

Grüße Walter

fricca · #6 (**permalink**) 19.07.2011, 10:42

Man kann sowas nicht einfach "umbauen". "Layout mit CSS" erfordert eine komplett andere Herangehensweise als der Tabellenmissbrauch.
A List Apart: Articles: 12 Lessons for Those Afraid of CSS and Standards
Du müsstest das, was derzeit besteht, wegwerfen und von vorne beginnen. Ja, das klingt hart, ist aber das einzige, was wirklich zielführend ist.

Der erste Schritt wäre dann die sinnvolle Auszeichnung mit HTML.
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
Danach kommt das Layout per CSS.
LB Teil 1 (von 2009) kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS (von Peter Müller)
Ja, das wird Aufwand und Zeit kosten.

Wenn es schnell gehen muss, hast du wohl nur zwei Möglichkeiten:
a) Das Tabellenlayout behalten und möglichst wenig daran herumbasteln. Dann hast du eine Website, die technisch hoffnungslos veraltet ist.
b) Es von jemandem machen lassen, der es kann. Das kostet dann sicher mehr als dieses ... Template.

dirtyone · #7 (**permalink**) 19.07.2011, 23:11

Ich danke Euch Allen für die Hilfe.

Ich verspreche, dass ich mich um die Tabellen kümmern werde, aber woher nehm ich die Zeit mich damit zu befassen. Ist ja ansich schon mein Anspruch das Ding auf Topniveau zu bringen.

Habe mich heut den ganzen Nachmittag an die Struktur dieser Seite gesetzt und versucht die Bereiche ohne Inhalt darzustellen. Naja mäßig Erfolg, wenn ich dann daran denke dass der untere "Footer" noch besondere Stolperfallen für mich parat hat, na Prima

Wenn ich noch zu einem kleinen Schönheitsfehler auf meiner Seite Euren Rat erfragen darf....

VDLZ-Vereinsdienstleistungszentrum

rechts unten in der Ecke vom "Flashplayer" zieht es das Layout um wenige Pixel auseinander. Habe es Versucht mit align und größen Änderungen zu fixen, aber irgendwie komm ich nicht auf den grünen Zweig.

Wenn wer eine Idee hat... ...schon mal vielen Dank.

Seite

Code:

<!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" />
<title>VDLZ-Vereinsdienstleistungszentrum</title>
<meta name="author" content="Walter Doornveld" />
<meta name="keywords" content="Verein, Verband, Dachverband, Steuern, Recht, Presse, Corporate Identity, VDLZ, Dienstleistungen, Service, Realisation, Beratung, Pflege, Steuererklärung, e.V.," />
<meta name="description" content="Mehr Zeit für die wesentliche Vereinsarbeit, wir können Ihnen helfen" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="news-ticker/style.css" type="text/css" media="screen" />
<script src="news-ticker/jquery-latest.pack.js" type="text/javascript">
</script>
<script src="news-ticker/jcarousellite_1.0.1c4.js" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(function() {
        $(".newsticker-jcarousellite").jCarouselLite({
                vertical: true,
                hoverPause:true,
                visible: 3,
                auto:1000,
                speed:2000
        });
});
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
 td.c8 {background-image: url(images/homepage20.gif);}
 table.c7 {background: url(images/homepage11.gif) no-repeat;}
 td.c6 {background-image: url(images/homepage16.gif);}
 td.c5 {background-color: #FFFFFF;}
 table.c4 {background-color: #FFFFFF;}
 input.c3 {float: right;}
 h2.c2 {margin-bottom:14px;}
 td.c1 {height: 99px; padding-left: 10px;}
/*]]>*/
</style>
</head>
<body class="bg1">
<!--
|  chCounter 3.1.3
|  a counter and statistics script written in PHP
|  (c) Christoph Bachner and Bert Koern 2007 - released under the GNU GPL
|  see at [ http://chCounter.org/ ]
-->
<!-- BEGIN chCounter 3.1.3 additional statistics -->
<script type="text/javascript">
// <![CDATA[
document.write("<script type=\"text/javascript\" src=\"http://www.vdlz.de/chcounter/additional.php?res_width=" + screen.width + "&res_height=" + screen.height + "&js=true\"><\/script>");
// ]]>
</script><!-- END chCounter 3.1.3 additional statistics -->
<table width="729" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="bg2 c1">
<table width="598" border="0" align="center" cellpadding="0" cellspacing="0">
<tr align="center">
<td width="118"><a href="/" class="link1">home</a></td>
<td width="2"><img src="images/subpage1_01.gif" alt="" width="2" height="70" /></td>
<td width="118"><a href="#" class="link1">über uns</a></td>
<td width="2"><img src="images/subpage1_01.gif" alt="" width="2" height="70" /></td>
<td width="118"><a href="customers.php" class="link1">referenzen</a></td>
<td width="2"><img src="images/subpage1_01.gif" alt="" width="2" height="70" /></td>
<td width="118"><a href="services.php" class="link1">leistungen</a></td>
<td width="2"><img src="images/subpage1_01.gif" alt="" width="2" height="70" /></td>
<td width="118"><a href="#" class="link1">kontakt</a></td>
<td width="2"><img src="images/subpage1_01.gif" alt="" width="2" height="70" /></td>
<td width="118"><a href="impressum.php" class="link1">impressum</a></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="729" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td width="21"><img src="images/homepage05.jpg" alt="" width="21" height="141"/></td>
		<td width="491"><img src="images/homepage07.jpg" alt="" width="491" height="141"/></td>
		<td width="196" valign="top" class="bg4"><table width="176" border="0" align="center" cellpadding="0" cellspacing="0" class="bg5">
				<tr>
					<td><form method="get" action="/isearch2/index.php">
							<table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td><img src="images/spacer.gif" alt="" width="100" height="20"/></td>
								</tr>
								<tr>
									<td><h2 class="text1" style="margin-bottom:14px;"><span>schnell zum Ziel</span></h2></td>
								</tr>
								<tr>
									<td class="text2">Schlüsselwörter:</td>
								</tr>
								<tr>
									<td><img src="images/spacer.gif" alt="" width="100" height="5"/></td>
								</tr>
								<tr>
									<td><label>
										<input maxlength="255" name="s" size="12" class="input1" />
										</label></td>
								</tr>
								<tr>
									<td><img src="images/spacer.gif" alt="" width="100" height="5"/></td>
								</tr>
								<tr>
									<td><table width="146" border="0" cellspacing="0" cellpadding="0">
											<tr>
												<td><label>
													<input type="submit" class="input2" value="suchen" style="float: right;" />
													</label></td>
											</tr>
										</table></td>
								</tr>
								<tr>
									<td>&nbsp;</td>
								</tr>
							</table>
						</form></td>
				</tr>
			</table></td>
		<td width="21"><img src="images/homepage06.jpg" alt="" width="21" height="141"/></td>
	</tr>
</table>

<table width="697" border="0" align="center" cellpadding="0" cellspacing="0" class="c4">
<tr>
<td class="text7"><img src="images/spacer.gif" alt="" width="100" height="5" /></td>
</tr>
</table>
<table width="729" border="0" align="center" cellpadding="0" cellspacing="0" class="bg3">
<tr valign="top">
<td width="21"></td>
<td width="486">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right">
<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript" src="swfobject.js">
</script> <script type="text/javascript">
//<![CDATA[
                var s1 = new SWFObject("imagerotator.swf","rotator","486","156","7");
                s1.addParam("flashvars", "file=madrid.xml&autostart=true&allowscriptaccess=always&showicons=false&transition=slowfade&shownavigation=false&overstretch=false&backcolor=#FFFFFF&repeat=true&rotatetime=7&shuffle=true&linktarget=_self&linkfromdisplay=true&width=486&height=156");
                s1.write("container");
//]]>
</script>
</td>
</tr>
<tr>
<td class="c5"><span class="text7"><img src="images/spacer.gif" alt="" width="100" height="5" /></span></td>
</tr>
</table>
<table width="486" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="239">
<table width="239" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/homepage13.gif" alt="" width="239" height="20" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="195" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<h2 class="text3"><span>willkommen</span></h2>
</td>
</tr>
<tr>
<td>
<p><img src="images/homepage14.jpg" alt="" width="72" height="72" class="img1" /></p>
<p>Herzlich willkommen auf der Homepage des <strong>Vereins Dienstleistungs Zentrum</strong>, der Beratungsstelle für Vereinsmitarbeiter.</p>
<p>Wenn wir Ihnen bei einem konkreten Projekt oder bei der Bewältigung Ihrer fortlaufenden Vereinsarbeit beratend oder untertstützend zur Seite stehen können, würden wir uns über eine <a href="contact.php">Kontaktaufnahme</a> freuen.</p>
</td>
</tr>
<tr>
<td><img src="images/spacer.gif" alt="" width="100" height="5" /></td>
</tr>
<tr>
<td class="c6"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><img src="images/homepage17.gif" alt="" width="7" height="9" hspace="5" /><a href="#" class="link3">Learn more…</a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="5"><img src="images/spacer.gif" alt="" width="5" height="30" /></td>
<td width="242" class="bg4">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="c7">
<tr>
<td><img src="images/spacer.gif" alt="" width="100" height="20" /></td>
</tr>
<tr>
<td>
<table width="190" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td>
<h2 class="text1"><span>consequat</span></h2>
</td>
</tr>
<tr>
<td class="text4">
<p><strong>Lorem ipsum dolor</strong> sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
<p><img src="images/homepage15.jpg" alt="" width="72" height="72" class="img1" />Ut wisi enim ad sed minim veniam, quis etiam nostrud exerci tation ullamcorper. Et nullam consequat.</p>
<p> </p>
<p><strong>Duis autem vel eum</strong> iriure dolor in hendrerit in vulputate velit esse mole stie consequat, vel illum dolore.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nullam. Velit esse mole stie consequat, vel illum dolore. Lorem ipsum dolor sita met consectetuer adipiscing elit sed diam nullam tempus etiam dolor.</p>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="32"> </td>
<td width="144">
<div class="newsticker-jcarousellite" id="newsticker-demo">
<ul>
<li>
<div class="thumbnail"><img src="images/1.jpg" alt="" /></div>
<div class="info"><a href="http://www.vladstudio.com/wallpaper/?knight_lady">The Knight and the Lady</a> <span class="cat">Category: Illustrations</span></div>
<div class="clear"></div>
</li>
<li>
<div class="thumbnail"><img src="images/2.jpg" alt="" /></div>
<div class="info"><a href="http://www.vladstudio.com/wallpaper/?family_of_colors">The Family of Colors</a> <span class="cat">Category: Creatures</span></div>
<div class="clear"></div>
</li>
<li>
<div class="thumbnail"><img src="images/3.jpg" alt="" /></div>
<div class="info"><a href="http://www.vladstudio.com/wallpaper/?teddybear_mac">Teddy Bear and MacBook</a> <span class="cat">Category: Photos</span></div>
<div class="clear"></div>
</li>
<li>
<div class="thumbnail"><img src="images/4.jpg" alt="" /></div>
<div class="info"><a href="http://www.vladstudio.com/wallpaper/?rainbow_butterfly">Rainbow Butterfly</a> <span class="cat">Category: Abstract art</span></div>
<div class="clear"></div>
</li>
<li>
<div class="thumbnail"><img src="images/5.jpg" alt="" /></div>
<div class="info"><a href="http://www.vladstudio.com/wallpaper/?space_travel">Space Travel</a> <span class="cat">Category: Abstract art</span></div>
<div class="clear"></div>
</li>
<li>
<div class="thumbnail"><img src="images/6.jpg" alt="" /></div>
<div class="info"><a href="http://www.vladstudio.com/wallpaper/?traveling_tree">The Traveling Tree</a> <span class="cat">Category: Creatures</span></div>
<div class="clear"></div>
</li>
</ul>
</div>
<table width="144" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="144"><img src="images/spacer.gif" alt="" width="100" height="20" /></td>
</tr>
<tr>
<td>
<h2 class="text1"><span>News</span></h2>
</td>
</tr>
<tr>
<td class="c8"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h3 class="text6">Lorem ipsum dolor</h3>
<p class="text5">11.27.2006</p>
</td>
</tr>
<tr>
<td class="text4">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td class="c8"><img src="images/spacer.gif" alt="" width="1" height="1" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h3 class="text6">Lorem ipsum dolor</h3>
<p class="text5">11.27.2006</p>
</td>
</tr>
<tr>
<td class="text4">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td width="46"> </td>
</tr>
</table>
<table width="729" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/homepage04.jpg" alt="" width="729" height="20" /></td>
</tr>
<tr>
<td class="text7"><span class="text7">Copyright (c) 2010 VDLZ-Vereinsdienstleistungszentrum. Alle Rechte vorbehalten.</span></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

CSS

Code:

/** BASIC */

body {
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
}
table {margin:0 auto;}
/** FORMS */

form {
	margin: 0px;
	padding: 0px;
}

.input1 {
	width: 143px;
	padding: 2px 0px;
	background-color: #FFFFFF;
	border-top: 1px solid #696969;
	border-right: 1px solid #EEEEEE;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #EEEEEE;
}

.input2 {
	width: 46px;
	height: 16px;
	background: url(images/homepage10.gif) no-repeat left top;
	border: none;
	text-transform: lowercase;
	font-size: 9px;
	font-weight: bold;
	color: #FFFFFF;
}

/** HEADINGS */

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
}

/** TEXTS */

body, th, td, input, textarea, select {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #434343;
}

p, blockquote, ul, ol, dl {
	margin-top: 0px;
	margin-bottom: 1em;
	text-align: justify;
}

.text1 {
	margin-bottom: 30px;
}

.text1 span {
	padding-bottom: 5px;
	background: url(images/homepage08.gif) repeat-x left bottom;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

.text2 {
	font-size: 9px;
	font-weight: normal;
	color: #FFFFFF;
}

.text3 span {
	padding-bottom: 5px;
	background: url(images/homepage08.gif) repeat-x left bottom;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #565656;
}

.text3 {
	margin-bottom: 30px;
}

.text4 {
	color: #FFFFFF;
}

.text5 {
	margin-bottom: 15px;
	font-size: 10px;
	font-weight: normal;
	color: #C6C6C6;
}

.text6 {
	font-size: 11px;
	color: #FFFFFF;
}

.text7 {
	text-align: center;
	font-size: 10px;
	color: #7C878F;
}

/** LISTS */

.list1 {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
	line-height: 160%;
}

/** LINKS */

a {
	color: #434343;
}

a:hover {
	text-decoration: none;
}

.link1 {
	padding-bottom: 5px;
	background: url(images/homepage08.gif) repeat-x left bottom;
	text-transform: lowercase;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
}

.link2 {
	font-size: 10px;
	color: #FFFFFF;
}

.link3 {
	color: #7F7F7F;
}

/** STYLES */

.style1 {
}

.style1 a {
}

.style1 a:hover {
}

/** BACKGROUNDS */

.bg1  { background: #394748 url(images/homepage01.jpg) repeat-x left top; }
.bg2  { background: url(images/homepage02.jpg) no-repeat left top; }
.bg3  { background: url(images/homepage03.jpg) repeat-y left top; }
.bg4  { background: #5E7578 url(images/homepage09.gif) repeat-x left top; }
.bg5  { background: url(images/homepage11.gif) no-repeat center top; }
.bg6  { background: url(images/homepage13.gif) no-repeat center top; }
.bg7  { background: url(images/homepage16.gif) repeat-x left top; }
.bg8  { background: #384E51 url(images/homepage18.gif) repeat-x left top; }
.bg9  { background: url(images/homepage19.gif) no-repeat center top; }
.bg10 { background: url(images/subpage1_03.jpg) repeat-y left top; }
.bg11 { background: url(images/subpage2_01.jpg) repeat-y left top; }

/** MISC */

.align-justify { text-align: justify; }
.align-right { text-align: right; }

img { border: none; }

.img1 {
	float: left;
	margin: 3px 15px 0px 0px;
}

.img2 {
	float: right;
	margin: 3px 0px 0px 15px;
}

hr { display: none; }

.hr1 {
	height: 1px;
	margin-bottom: 15px;
	padding-top: 5px;
	background: url(images/homepage20.gif) repeat-x left bottom;
}

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
Menü, CSS, Darstellung im IE und im Firefox, die 2.000.000ste :(	yeti1966	CSS	5	14.07.2009 11:44
Falsche Darstellung im Firefox	nzerox	CSS	3	29.06.2009 14:03
CSS Darstellung Firefox	kastenkai	CSS	6	27.02.2007 13:33
Darstellung in Firefox ok - im IE falsch	raccoons81	CSS	1	09.03.2006 14:20