Hintergrund wird im IE nicht angezeigt

mgd-one · 21. Mai 2006

Hallo zusammen,

ich habe angefangen mit CSS anstatt mit Tabellen meine Seite zu gestalten. Allerdings habe ich ein kleines Problem mit meiner Navi. Ich habe ein Hintergrundbild das im IE angezeigt wird. Allerdings wird meine Navi und eine anderes Bild das ich in der Navi als Hintergrund bild gesetzt habe im IE nicht angezeigt. In allen anderen Browsern funktioniert der CSS Hover Effekt wunderbar. Weiß jemand woran das liegt?

Dann habe ich noch ein Problem mit dem Netscape Browser. Ich habe eine Fußzeile die an dem restlichen bereich anschließen soll. In allen Browsern wird es richtig angezeigt nur im Natscape ist die immer viel weiter unten und man muss zu ihr hinscrallen obwohl kein inhalt auf der seite ist und zwischen dem restlichen bereich und der Fußzeile ist weiß. Das merkwürdige ist das wenn ich die seite fülle ist das Problem behoben, allerdings nur wenn ich mehr inhalt habe als die seite darstellen kann und man scrallen muss. Weiß auch da jemand Rat?

Und zu guter letzt, ich habe ein Image an der Fußzeile mit position:absolut, left: 15px, bottom: 27px und border: 0px ausgerichtet. Gibt es eine möglichkeit dem images zu sagen wenn das fenster kleiner gemacht wird das es nach oben hin min. einen Abstand von z.B. 50 px haben soll?

Ich hoffe ihr versteht was ich meien. Übrigens habe ich die Seite durch einen Validator sowhol für HTML als auch CSS geschickt und es sind keine Fehler aufgetreten...

Also wäre frph wenn jemand mir helfen könnte. Anbei noch mein Code und der Link zu der Seite: http://www.sc-juelich.de/css

Die HTML Seite:

HTML:

<!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>Segelclub J&uuml;lich e.V. (Rursee, Simmerath)</title>
<link rel="stylesheet" type="text/css" href="inc/main.css">
<link rel="stylesheet" type="text/css" href="inc/navi.css">
</head>

<body>
<div class="wrapper">
	<div class="header"><img src="images/banner_top.gif" width="890" height="120" alt=""></div>
	<div class="navi">
		<span class="navi"></span><a class="home" href="#"></a><a class="der_club" href="#"></a><a class="regatta" href="#"></a><a class="termine" href="#"></a><a class="media" href="#"></a><a class="gaestebuch" href="#"></a><a class="archiv" href="#"></a>
	</div>
	<div class="navi_text"><img src="images/banner_navi_text.gif" width="252" height="19" alt=""></div>
	<div class="clear">&nbsp;</div>
	<div class="body_left"><img src="images/banner_left.gif" width="148" height="322" alt=""><a class="dsv" href="#"><img class="dsv" src="images/dsv.gif" width="108" height="24" alt=""></a></div>
	<div class="body_right">
	 	<ul id="sub_navi_ul">
    		<li id="sub_navi_li">Home</li>
		    <li><a href="#">Impressum</a></li>
			<li><a href="#">Sitemap</a></li>
		</ul>
	</div>
  <div class="body_center">Das ist ein Test</div>
	<div class="clear">&nbsp;</div>
</div>
<div class="footer">&copy; 2006 &bull; Segelclub J&uuml;lich e.V.&nbsp;</div>
</body>
</html>

Die main.css:

Code:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

div.wrapper {
	width: 890px;
	min-height: 100%;
	margin: 0;
	background: url(../images/spacer.gif) repeat-y;
}

* html div.wrapper {
	height: 100%;
}

div.header {
	width: 890px;
	height: 120px;
	color: #000000;
	background-color: #FFFFFF;
}

div.navi {
	width: 638px;
	height: 19px;
	color: #000000;
	background-color: #B0B0B0;
	float: left;
}

div.navi span.navi {
	background-repeat: no-repeat;
	background-position: right top;
	padding-right: 148px;
	background: url(../images/banner_navi.gif);
}

div.navi_text {
	width: 252px;
	height: 19px;
	color: #000000;
	background-color: #B0B0B0;
	float: right;
}

li#sub_navi_li {
	border-bottom: 1px solid #CCCCCC;
	color: #000000;
	background-color: #B0B0B0;
	font-weight: bold;
}

ul#sub_navi_ul {
	font-size: 8pt;
	color: #000000;
	background-color: #E6E6E6;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: normal;
	width: 138px;
	margin: 0;
	padding: 0;
	border: 1px solid #CCCCCC;
}

ul#sub_navi_ul li {
	list-style: none;
	margin: 0;
	padding: 3px;
}

ul#sub_navi_ul a {
	display: block;
	padding: 0;
}

ul#sub_navi_ul a:link {
	color: #000000;
	background-color: #E6E6E6;
}

ul#sub_navi_ul a:visited {
	color: #000000;
	background-color: #E6E6E6;
}

ul#sub_navi_ul a:hover {
	color: #585858;
	background-color: #E6E6E6;
}

div.body_left {
	width: 148px;
	float: left;
	padding: 0;
}

div.body_left img.dsv {
	position: absolute;
	left: 15px;
	bottom: 27px;
	border: 0px;
}

div.body_right {
	width: 138px;
	float: right;
	margin: 15px 15px 12px 15px;
	padding: 0;
}

div.body_center {
	margin: 0 153px 12px 148px;
	padding: 15px;
}

div.clear {
	clear: both;
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 0px;
	font-size: 0;
}

div.footer {
	font-size: 7pt;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	font-weight: normal;
	text-align: right;
	width: 890px;
	margin: -12px 0 0 0;
	padding: 0;
	height: 12px;
	background: #B0B0B0;
}

span.t1 { 
	FONT-SIZE: 7pt; 
	COLOR: #000000;
	BACKGROUND-COLOR: #E6E6E6;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
	TEXT-DECORATION: None;
	FONT-WEIGHT: Normal;
}

span.t2 { 
	FONT-SIZE: 8pt; 
	COLOR: #000000;
	BACKGROUND-COLOR: #E6E6E6;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
	TEXT-DECORATION: None;
	FONT-WEIGHT: Normal;
}

span.t3 { 
	FONT-SIZE: 8pt; 
	COLOR: #000000;
	BACKGROUND-COLOR: #E6E6E6;
	FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif;
	TEXT-DECORATION: None;
	FONT-WEIGHT: Bold;
}

.table {
	border-collapse: collapse;
	border-color: #CCCCCC;
	border-style: solid;
	border-width: 1px;
}

Die navi.css:

Code:

div.navi a, div.navi a:visited, div.navi a:hover {
	background-repeat: no-repeat;
	background-position: right top;
}

/*Home*/
div.navi a.home, div.navi a.home:visited {
	background: url(../images/home.gif);
	padding-right: 43px;
}

div.navi a.home:hover {
	background: url(../images/home_over.gif);
	padding-right: 43px;
}

/*Der Club*/
div.navi a.der_club, div.navi a.der_club:visited {
	background: url(../images/der_club.gif);
	padding-right: 60px;
}

div.navi a.der_club:hover {
	background: url(../images/der_club_over.gif);
	padding-right: 60px;
}

/*Regatta*/
div.navi a.regatta, div.navi a.regatta:visited {
	background: url(../images/regatta.gif);
	padding-right: 53px;
}

div.navi a.regatta:hover {
	background: url(../images/regatta_over.gif);
	padding-right: 53px;
}

/*Termine*/
div.navi a.termine, div.navi a.termine:visited {
	background: url(../images/termine.gif);
	padding-right: 58px;
}

div.navi a.termine:hover {
	background: url(../images/termine_over.gif);
	padding-right: 58px;
}

/*Media*/
div.navi a.media, div.navi a.media:visited {
	background: url(../images/media.gif);
	padding-right: 44px;
}

div.navi a.media:hover {
	background: url(../images/media_over.gif);
	padding-right: 44px;
}

/*Gaestebuch*/
div.navi a.gaestebuch, div.navi a.gaestebuch:visited {
	background: url(../images/gaestebuch.gif);
	padding-right: 71px;
}

div.navi a.gaestebuch:hover {
	background: url(../images/gaestebuch_over.gif);
	padding-right: 71px;
}

/*Archiv*/
div.navi a.archiv, div.navi a.archiv:visited {
	background: url(../images/archiv.gif);
	padding-right: 47px;
}

div.navi a.archiv:hover {
	background: url(../images/archiv_over.gif);
	padding-right: 47px;
}

Maik · 21. Mai 2006

Das Nichtanzeigen der Navi-Hintergrundbilder liegt wohl daran, daß für die Links die Dimensionsangaben width und height (entsprechend der Grafikdimension), sowie die display:bock-Eigenschaft fehlen.

Da die Menüpunkte nebeneinander angeordnet sein sollen, müsste beim Einsatz der display:block-Eigenschaft zusätzlich die float:left-Eigenschaft verwendet werden, damit die Links nicht untereinander angezeigt werden.

mgd-one · 22. Mai 2006

Super besten Dank! Hat super funktioniert.

Allerdings bleiben dann noch die beiden anderen Probleme. Einmal das anzeige Problem mit dem Natscape Navigator (damit ihr seht was ich meine füge ich mal nen screenshot an) und dann noch das Problem das die grafik nicht weniger als eine bestimmte Pixel anzahl an den oberen rand drann soll. Also damit meine ich das DSV Logo unten links auf meiner Seite. wenn man das Fenster klein macht und noch kleiner zieht dann liegt das Logo irgendwann über dem Banner. Das soll aber max bis zu dem Boot sich verschieben. Jemand ne Idee?

Gruß
mgd-one

Maik · 22. Mai 2006

Der Darstellungsfehler im Netscape-Browser lässt sich mit einem umlaufenden Rahmen für das DIV .wrapper beheben.

mgd-one · 22. Mai 2006

Sorry, vlt. stehe ich auf dem Schlauch, aber was meinst du mit einem umlaufenden Rahmen?

Gruß
mgd-one

Quaese · 22. Mai 2006

Hi,

er lässt sich auch beheben, wenn in der Klasse .clear die Schriftgrösse ungleich Null gesetzt
wird - in etwa font-size: 1px.

Ciao
Quaese

mgd-one · 22. Mai 2006

Cool, danke! Funktioniert

Jetzt bräuchte ich noch eine Antwort auf die letzte (also die dritte) Frage.

Wäre cool wenn da jemand noch ne Idee zu hat.

Gruß
mgd-one

Maik · 22. Mai 2006

mgd-one hat gesagt.:
Sorry, vlt. stehe ich auf dem Schlauch, aber was meinst du mit einem umlaufenden Rahmen?

Einen an allen vier Seiten definierten Rahmen

Hintergrund wird im IE nicht angezeigt

mgd-one

Erfahrenes Mitglied

Maik

mgd-one

Erfahrenes Mitglied

Anhänge

Maik

mgd-one

Erfahrenes Mitglied

Quaese

Moderator

mgd-one

Erfahrenes Mitglied

Maik

Neue Beiträge