✔ Darstellugsprobleme im Firefox

Faircamion · 22. April 2006

Hallo, ich habe ein problem mit der darstellung im firefox,
siehe: http://www.jungenzeltlager.de

der verschiebt alles. Im IE passt es. Weis jemand woran das liegt?

die freistellen hinter den befehlen habe ich schon mal raus genommen, das hat aber nichts gebracht.

also aus so => font-size : 11px; so => font-size :11px;

Maik · 22. April 2006

Das Leerzeichen vor dem Eigenschaftswert hat keinen Einfluss auf das Layout.
Den Wert center gibt es nicht für die float-Eigenschaft.
Vielleicht solltest du dem DIV #inhalt die entsprechenden Außenabstände zuweisen?

Faircamion · 22. April 2006

mmh, ich bin da nicht so der könner.

also, das ist der ausschnitt:

Code:

#inhalt {
float:center;
/*margin:0px 160px 0px 130px;/*
padding-left:10px;
border-left:2px dashed #DDDDDD;
padding-right:40px;
background-color:#f9e9d9;
min-height:420px;
height:auto !important;  
height:420px;  
}

evtl. kann mir ja jemand sagen wo da der fehler liegt.
den gesamten code gibts unter:
http://www.jungenzeltlager.de/fileadmin/css.txt

ok, den center fehler habe ich gefunden. Ich habe das float rausgenommen und die zeile darunter aktiviert, also ohne /*

aber die linie oben ist auch noch viel zu dünn!

Maik · 22. April 2006

Faircamion hat gesagt.:
aber die linie oben ist auch noch viel zu dünn!

Füge in dem DIV #schrift ein erzwungenes Leerzeichen ein:

HTML:

<div id="schrift">&nbsp;</div>

Faircamion · 22. April 2006

Und wie, ich kann das doch nicht einfach so schreiben, oder?:

Code:

#schrift{
<div id="schrift">&nbsp;</div>
float:left;
width:100%;
padding: 2px 10px 6px 0px;
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #b00304;
background-color: #d28529;
}

sorry, das ich immer so genau nachfrage, aber ich bin wie schon gasegt ein absoluter anfänger

Maik · 22. April 2006

Das zu erzwingende Leerzeichen   muß im HTML-Quelltext notiert werden, so wie ich es oben gezeigt habe

Faircamion · 22. April 2006

OK, hat auch funktioniert, jatzt bleibt nur noch ein Problem,
der Inhalt muss etwas tiefer, damit er nicht mehr auf der linie liegt, das wird doch mit margin gemacht oder?

da tut sich nämlich nichts wenn ich das ändere

Maik · 22. April 2006

Meine Lösungsvorschläge:

Den Doctype tauschen:

HTML:

<!-- aus -->

<!DOCTYPE html
	PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!-- wird -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Angepasster CSS-Code der style2.css:

Code:

html, body {
padding:0px;
margin:0px;
}
body {
background-color: #f3dabc;
font-size: 12px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#666;
}
#seite{
padding: 0 0 0 0
}
#schrift{
float:left;
width:100%;
padding: 2px 10px 6px 0px;
font-size: 11px;
text-transform:uppercase;
text-align: right;
color: #b00304;
background-color: #d28529;
}
#unten{
float:left;
width:100%;
padding: 2px 10px 6px 0px;
font-size: 11px;
text-transform:uppercase;
text-align: center;
color: #eae68d;
background-color: #d28529;
}
#oben{
background:#f3dabc url(bg1.jpg) repeat-x;
background-position: left center;
/*background:#fff ;*/
/*float:right;*/
height:100px;
width:100%;
margin: 0;
padding: 0;
}
#links {
background-color: #f3dabc;
float:left;
width: 130px;
color: #564b47;
margin: 0px;
padding-top: 10px;
padding-left: 5px;
min-height:400px;
height:auto !important;  /* für moderne Browser */
height:400px;  /*für den IE */
}
#inhalt {
margin: 50px 160px 0px 185px;
padding-left: 10px;
border-left: 2px dashed #DDDDDD;
padding-right: 40px;
background-color: #f9e9d9;
min-height:420px;
height:auto !important;  /* für moderne Browser */
height:420px;  /*für den IE */
}
* html #inhalt { /* Für IE */
margin: 25px 160px 0px 185px;
}
#rechts {
float:right;
position: absolute;
right: 0px;
width: 190px;
color: #564b47;
margin: 0px;
padding: 0px;
}
h6 {
color: #b00304;
}
p, h2, pre {
margin: 0px;
padding: 5px 20px 5px 20px;
}
a {
color: #ff66cc;
font-size: 11px;
background-color: #f3dabc;
text-decoration: none;
}
pre {
color: #564b47;
font-size: 11px;
background-color:transparent;
font-family: Courier, Monaco, Monospace;
}
.alignright {
margin-top: 0;
text-align: right;
font-size: 10px;
}
test2 {
font-size:14px;
padding-top:10px;
text-transform:uppercase;
color: #567b47;
background-color: transparent;
}
/* Schrift-Formatierungen */
h1,h2,h3,h4,h5{
border-bottom:1px solid #ccc;
color:#444444;
font-size:1.5em;
letter-spacing:0.01em;
margin:25px 0 0 0
}
#links p{
text-align:justify
}
/* Formatierungen Navigation (Rechte Spalte) */
/*#rechts ul{
list-style:none;
margin:0 0 0 0
}
#rechts ul li{
background: url(liste.jpg) no-repeat;
display:block;
margin:0 0px 0 0;
padding:0 0 0 16px
}
#rechts ul li a{
text-decoration:none;
color:#EAE68D;
}
#rechts ul li a:hover{
color:#000;
}
*/
/* Link-Formatierungen */
a:link,a:visited,a:active{
color:#000;
background-color:transparent;
text-decoration:underline
}
a:hover{
text-decoration:none
}
#linkList ul {
width:210px;
margin:0 0 10px 15px;
padding:0;
}
#linkList li {
padding: 0 0 0 20px;
margin:0 0 5px;
list-style-type:none;
white-space:nowrap;
background: transparent url(bullet_normal.gif) no-repeat 0 1px;
}
#lselect ul, #lfavorites ul {
width:210px;
margin:0 0 10px 15px;
padding:0;
}
#lselect li, #lfavorites li {
padding: 0 0 0 25px;
margin:0 0 5px;
list-style-type:none;
clear:left;
white-space:nowrap;
background: transparent url(bullet_styles.gif) no-repeat 0 3px;
}
#linkList h3 {
margin:0 0 10px;
background:#6E6855 url(link_list_h3.gif) repeat-y top left;
padding:5px 5px 5px 15px;
font-weight:bold;
color:#E9E6D9;
font-size:100%;
}
acronym {
border-bottom:1px dotted #555040;
cursor:help;
}
a acronym {
border-bottom:1px dotted #8297A7;
}
#lfavorites, #larchives, #lresources {
border-top:5px solid #FFF;
}
.searchform {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #6600CC;
font-weight : normal;
}
.searchresultpagetitle {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 15px;
color : #33333?3;
font-weight : bold;
}
.searchresultcontent {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 11px;
color : #6600CC;
font-weight : normal;
}
.searchresultheader {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 14px;
color : #333366;
font-weight : bolder;
}
.searchmarkup {
color : #FF0066;
}
/* Listeneigenschaften*/
li{
list-style-type: disc;
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 11px;
}
li li{
list-style-type: square;
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 11px;
}
ul {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 11px;
list-style-position: inside
}
ol {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 11px;
list-style-position: inside
}
.loginform {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 14px;
color : #CC0000;
font-weight : normal;
}
.mailform {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #003366;
font-weight : normal;
}
.mailformrequired {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #003366;
font-weight : bolder;
}
.mailformcomment {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #CC0000;
font-weight : bolder;
}
.mailformradio {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 10px;
color : #003366;
font-weight : normal;
}
.filelinks {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 14px;
color : #990000;
}
.filelinkssize {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 14px;
color : Green;
}
.sitemap1 {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #CC6600;
}
.sitemap2 {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 11px;
color : #990000;
margin-left : 20px;
}
.sitemap3 {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 10px;
color : #333399;
margin-left : 40px;
}
.sitemap4 {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 9px;
color : #003333;
margin-left : 60px;
}
/* Formulare */
/*.celmenu {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #CCCCCC;
margin-top : 13px;
}
.celsubmenu {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
color : #CCCCCC;
margin-left : 2px;
margin-top : 6px;
}
*/
/* Schrifart Beschriftung, Eingabefelder */
p, form, input {
font-family : Helvetica, Verdana, Arial, sans-serif;
font-size : 12px;
}
/* Hintergrundformular */
form {
border: none;
background-color: #E1E1E1;
}

strong {
font-size: 13px;
}

Faircamion · 22. April 2006

Hey, jetzt passts

Danke Danke Danke

jetzt kann man sich die seite auch mal im firefox anschauen!

Gumbo · 22. April 2006

Wow, fast Tausend Zeilen Quellcode für so wenig Inhalt. Schon mal daran gedacht, semantisches Markup und mehr CSS statt des vielen JavaScript einzusetzen?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
	<style type="text/css">
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	background-color: #f3dabc;
	font-size: 12px;
	font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
	color: #666;
}

#logo {
	padding-right: 20px;
	background: transparent url(http://www.jungenzeltlager.de/fileadmin/bg1.jpg) repeat-x 0 50%;
	text-align: right;
}

#content {
	margin-left: 178px;
	border-top: 10px solid #D28529;
}

#container {
	position: relative;
	min-height: 100%;
	height: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
}
html>body #container {
	height: auto;
}

#siteinfo {
	position: absolute;
	bottom: 0;
	background-color: #D28529;
	width: 100%;
}


#nav {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 178px;
	float: left;
}
#nav a {
	display: block;
	height: 24px;
}
#nav span {
	display: none;
}


#nav #startseite a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/9291f5d38d.gif);
}
#nav #startseite a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/67e2766202.gif);
}

#nav #anmeldung a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/7b389990b8.gif);
}
#nav #anmeldung a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/28b376d93e.gif);
}

#nav #aktuelles a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/98e8bc5bf6.gif);
}
#nav #aktuelles a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/3a6110ffd1.gif);
}

#nav #termine a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/0a64141359.gif);
}
#nav #termine a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/c078006219.gif);
}

#nav #ueber-uns a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/57e39b8f90.gif);
}
#nav #ueber-uns a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/5a3c21c4ea.gif);
}

#nav #fotoalbum a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/20ce1009be.gif);
}
#nav #fotoalbum a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/0520fc1b32.gif);
}

#nav #links a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/99a1ddcb47.gif);
}
#nav #links a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/8f34de808f.gif);
}

#nav #gaestebuch a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/d2fa48bcff.gif);
}
#nav #gaestebuch a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/8a67ee5428.gif);
}

#nav #danke-an a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/d09fc53b72.gif);
}
#nav #danke-an a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/a793ec61a2.gif);
}

#nav #kontakt a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/8c298d6aec.gif);
}
#nav #kontakt a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/810f16bf75.gif);
}

#nav #login a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/cf67f6f732.gif);
}
#nav #login a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/9977aaa0cd.gif);
}

#nav #forum a {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/91834ba5bf.gif);
}
#nav #forum a:hover {
	background-image:	url(http://www.jungenzeltlager.de/typo3temp/menu/a02e79a732.gif);
}
	</style>
</head>

<body>
<div id="container">
	<div id="logo"><a href="http://www.jungenzeltlager.de/"><img src="http://www.jungenzeltlager.de/fileadmin/zeltlager_Logo.gif" alt="Zeltlager Wietmarschen"></a></div>

	<ul id="nav">
		<li id="startseite"><a href="/startseite.html"><span>Startseite</span></a></li>
		<li id="anmeldung"><a href="/anmeldung.html"><span>Anmeldung</span></a></li>
		<li id="aktuelles"><a href="/3.html"><span>Aktuelles</span></a></li>
		<li id="termine"><a href="/45.html"><span>Termine</span></a></li>
		<li id="ueber-uns"><a href="/beruns.html"><span>Über uns</span></a></li>
		<li id="fotoalbum"><a href="/fotoalbum.html"><span>Fotoalbum</span></a></li>
		<li id="links"><a href="/links.html"><span>Links</span></a></li>
		<li id="gaestebuch"><a href="/gaestebuch.html"><span>Gästebuch</span></a></li>
		<li id="danke-an"><a href="/dankean.html"><span>Danke an</span></a></li>
		<li id="kontakt"><a href="/kontakt.html"><span>Kontakt</span></a></li>
		<li id="login"><a href="/login.html"><span>Login</span></a></li>
		<li id="forum"><a href="/forum.html"><span>Forum</span></a></li>
	</ul>

	<div id="content">
		Inhalt
	</div>
	<div id="siteinfo">
		© boelting 2005
	</div>
</body>
</html>

✔ Darstellugsprobleme im Firefox

Faircamion

Grünschnabel

Maik

Faircamion

Grünschnabel

Maik

Faircamion

Grünschnabel

Maik

Faircamion

Grünschnabel

Maik

Faircamion

Grünschnabel

Gumbo

Erfahrenes Mitglied

Neue Beiträge