CSS-Design-Fehler in Mozilla und IE


Status
Nicht offen für weitere Antworten.

cssrookie23

Grünschnabel
Hallo,

ich habe mich an einem CSS-basierten frei skalierbaren HP-Design versucht und bin auf drei Probleme gestoßen:

Im Mozilla und Netscape wird das div "content" größer als das umschließende "container". Des Weiteren wird im div "menu" nur das Hintergrundbild a:hover für "Home" angezeigt, für die übrigen Menüpunkte einfach nur der grüne Hintergrund. Das für a:hover definierte Hintergrundbild wird für alle Menüpunkte korrekt angezeigt. Das für a definierte hintergrundbild wird für keinen der Menüpunkte angezeigt.

Der IE zeigt die Seite zwar so an, wie ich es vorgesehen habe, jedoch wird unter dem Header ein breiterer hellgrüner Rand als angegeben produziert.

Die Seite ist unter http://www.test.reserve-hoentrop.de zu finden.

HTML-Code::

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

<title> Beerwerth.NET </title>

<meta name="Generator" content="Alleycode HTML Editor">
<meta name="Description" content="Homepage of Florian Beerwerth">
<meta name="Keywords" content="Florian, Beewerth, Bochum">

<link rel="stylesheet" href="css/style.css" type="text/css">

</head>

<body>

	<div id="container">
	
		<div id="header">
			<img src="http://www.tutorials.de/forum/images/header3.png" alt="header" width="100%"/>
		</div>
		
		<div id="menu">
		
			<table    class="menu2" width="100%"  border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td width="20%" class="menu21" style="background-image:url(images/menu5_1_2a.png);background-repeat:repeat;color:#28651F;"><a href="index.html" onfocus="this.blur()">Home</a></td>
					<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu22" style="background-image:url(images/menu5_2_2.png);background-repeat:repeat;color:#AAC31B;"><a href="index.html"  onfocus="this.blur()">Men&uuml;2</a></td>
					<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu23" style="background-image:url(images/menu5_3_2.png);background-repeat:repeat;color:#AAC31B;"><a href="index.html"  onfocus="this.blur()">Men&uuml;3</a></td>
					<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu24" style="background-image:url(images/menu5_4_2.png);background-repeat:repeat;color:#AAC31B;"><a href="index.html"  onfocus="this.blur()">Men&uuml;4</a></td>
					<td width="20%" style="border-left:solid 0.05em #C6C6C6;" class="menu25" style="background-image:url(images/menu5_5_2.png);background-repeat:repeat;color:#AAC31B;"><a href="contact.php" onfocus="this.blur()">Kontakt</a></td>
				</tr>
			</table>
			
		</div>
		
		<div id="content">
		testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext testtext
		</div>
	
	</div>

</body>
</html>

CSS-Datei:

Code:
body
	{
		margin: 0;
		padding: 0;
		border: none;
		font: 12pt Arial;
		text-align: center;
		background-color: #FFFFFF;
	}
	
a:link
	{
	text-decoration: none;
	}
	
	
#container
	{
		width: 50em;
		height: 35em;
		margin: 0.5em auto;
		background-color: #AAC31B;
		border:  solid 0.05em #C6C6C6;
		position: relative;
	}
	
	
#header
	{
	width: 100%;
	/* height: 7.5em; */
	margin:0;
	padding:0;
	top: 0;
	position:relative;
	border-bottom: solid 0.16em #AAC31B;
	}


#menu
	{
		width: 100%;
		padding:0;
		margin: 0;
		border-top: solid 1em #28651F;
		position:relative;
		top: 0;
/*		background-image:url(../images/menu.png); */
		}
	
	
	.menu2 a, .menu2 a:visited , .menu2 a:active
	{
		color: #AAC31B;
		display: block;
		text-decoration:none; font-family: verdana, sans-serif; font-size: 1.1em; font-weight: bold;
		padding-left: 0; padding-bottom: 0; padding-top:0;
		margin-left: 0; margin-right: 0;
		border-top: solid 0.05em #C6C6C6;
		border-bottom: solid 0.05em #C6C6C6;
		line-height: 1.5em;
		text-align: center;
	}
	
	.menu21 a:hover
	{
		color:#28651F; text-decoration:none ;
		background-image:url(../images/menu5_1_2a.png);background-repeat:repeat;
	}
	
		.menu22 a:hover
	{
		color:#28651F; text-decoration:none ;
		background-image:url(../images/menu5_2_2a.png);background-repeat:repeat;
	}
	
		.menu23 a:hover
	{
		color:#28651F; text-decoration:none ;
		background-image:url(../images/menu5_3_2a.png);background-repeat:repeat;
	}
	
		.menu24 a:hover
	{
		color:#28651F; text-decoration:none ;
		background-image:url(../images/menu5_4_2a.png);background-repeat:repeat;
	}
	
		.menu25 a:hover
	{
		color:#28651F; text-decoration:none ;
		background-image:url(../images/menu5_5_2a.png);background-repeat:repeat;
	}
	

#content
	{
	width: 100%;
	position: relative;
	text-align: left;
	overflow: auto;
	overflow-x: hidden;
	background-color: #c7f1b9;
	padding: 1em;
	}

Ein einfacheres Design ist mir nicht eingefallen, vielleicht habt ihr ja Ideen, wie man die CSS einfacher halten könnte.

Über Hilfe würde ich mich sehr freuen.

CSSRookie23
 
Zuletzt bearbeitet:
M

Maik

Hi,

gemäß dem CSS-Boxmodell ergibt sich die Breite eines Elements u.a. aus der width- und padding-Eigenschaft - somit stellen die standardkonformen Browser (Mozilla, Netscape, usw.) die Box #content mit deinem Stylesheet korrekt dar. Da das Dokument mit dem gewählten Doctype den Browsern im "Quirksmode" übergeben wird, hält der IE sich in diesem Darstellungsmodus nicht an die w3c-Spezifikation, und interpretiert das Stylesheet falsch.

Fazit: Entferne die width:100%-Deklaration für das Element, da sie sich von selbst ergibt.

Zu dem Problem mit den fehlenden Hintergrundbildern empfehle ich dir, einfach mal die jeweils doppelt vorhandenen style-Attribute, wie in der ersten Tabellenzelle, zusammenzuführen:

Code:
<table    class="menu2" width="100%"  border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                        <td width="20%" class="menu21" style="background-image:url(images/menu5_1_2a.png);background-repeat:repeat;color:#28651F;"><a href="index.html" onfocus="this.blur()">Home</a></td>
                                        <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_2_2.png);background-repeat:repeat;color:#AAC31B;" class="menu22"><a href="index.html"  onfocus="this.blur()">Menü2</a></td>
                                        <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_3_2.png);background-repeat:repeat;color:#AAC31B;" class="menu23"><a href="index.html"  onfocus="this.blur()">Menü3</a></td>
                                        <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_4_2.png);background-repeat:repeat;color:#AAC31B;" class="menu24"><a href="index.html"  onfocus="this.blur()">Menü4</a></td>
                                        <td width="20%" style="border-left:solid 0.05em #C6C6C6;background-image:url(images/menu5_5_2.png);background-repeat:repeat;color:#AAC31B;" class="menu25"><a href="contact.php" onfocus="this.blur()">Kontakt</a></td>
                                </tr>
                        </table>
 

cssrookie23

Grünschnabel
Vielen Dank, das war's. Das mit den style-Attributen hätte ich selbst sehen müssen....

Danke nochmal für die schnelle Hilfe.
 
Status
Nicht offen für weitere Antworten.