Fehler im Design: nur bei IE (CSS)

schultze · 2. August 2007

Hallo zusammen,

ich habe folgendes Design entworfen und mit CSS umgesetzt. Bei Firefox schaut alles wunderbar aus, nur beim IE wird es falsch dargestellt.
Ist eigentlich ein sehr einfaches Skript... weiss nicht wo das Problem liegt.

Hier mal der Code: (design.html)

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Titel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />

	<style type="text/css" media="all">@import "/images/style.css";</style>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />


</head>

<body>


<div class="content">
<div class="toph"><div class="logo"><a href="#"><img src="/images/logo.jpg" alt="" width="158" height="165" border="0" /></a></div>
</div>
	
	
  <div class="center">
  <div class="menu">
  
  <!-- Menu Begin: -->
	<div class="moduletable">

			
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="index.php?option=com_content&amp;task=view&amp;id=12&amp;Itemid=26" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_contact&amp;Itemid=3" class="mainlevel" >Kontakt</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&amp;task=view&amp;id=13&amp;Itemid=27" class="mainlevel" >Impressum</a></td></tr>
</table>		</div>
		
	  <!-- Menu Ende -->		
			
  </div>
		<h2>Ueberschrift</h2>	    
		<p>Haupttext</p>
  </div>
	<div class="footer">
	  <div class="footer_text"> ... | Login | Impressum </div>
	</div>
</div>

</body>
</html>

und nun der CSS Datei: (style.css)

Code:

body { 
	margin:15px 0; 
	padding:0; 
	color:#685E43;  
	line-height: 1.4em; 
	background : url(bg.gif);
	
	font-family: Arial, Helvetica, sans-serif;
}

.logo {
	height: 158px;
	width:  165px;
	position:relative;
	left:39px; 
	top:2px;
}

.toph { background: #3D3E42 url(top.jpg) no-repeat center; height: 67px; width: 665px; margin:0; padding:0; }

.content { 
    color: #a0a0a0; 
	margin: 0 auto; 
	padding: 0; 
	width: 665px; 
	background: #3D3E42 url(bg-mid.jpg) repeat-y center;
}


.menu {
	width: 149px;
	position:absolute;
	left: 340px; 
	top: 195px;	
	color:#A90209;
}


.mainlevel {
	background-image: url(menu.jpg);
	background-attachment:fixed;
	padding: 20 10px;
}


/*	Links des Menu	*/
a.mainlevel:link, a.mainlevel:visited {
	color:#A90209;
}
/*	Links des Menu	*/
a.mainlevel:hover {
	color:#A90209;
}


.center { 
	float:left; 
	width: 396px; 
	font-size: 95%; 
	margin: 0px 0 0px 225px !important;
	margin: 0px 0 0px 20px; 
	padding: 0; 
	background: #eee7d2;
	color: #685E43;
}


.footer { 
	clear:both;
	width: auto;
	height: 70px;
	color:#888;  
	font-size:90%;
	background: #3D3E42 url(bot.jpg) no-repeat center;
	text-align:center; 
}


.footer_text {
	width: 376px;
	color:#FFFFFF;
	font-size:90%;
	text-align:center;
}


/*	Überschriften	*/
.contentheading { 
	color:#685E43; 

}

.componentheading { 
	color:#685E43; 

}

Wer hat ne Idee?
Danke fuer eure Hilfe...
greets

Maik · 2. August 2007

Hi,

mir erscheinen beim Durchschauen der CSS-Deklarationen einige Angaben unlogisch, wie z.B. die Höhenangabe (67px) für die Box .toph, in der die Box .logo mit einer Höhe von 158px und einem oberen Abstand von 2px positioniert werden soll.

Und selbst bei dem Logo gibt es widersprüchliche Angaben, denn das eingebundene Bild ist 158px breit und 165px hoch, obwohl die umschliessende Box 158px hoch und 165px breit ist.

Ebenso passt da was mit der Breitenangabe (665px) für die Box .toph nicht, wenn sie rechts von der Box .center bzw. der darin enthaltenden Überschrift und dem Textabsatz umflossen werden soll.

Wie gesagt, alles etwas verworren. Darum wundert's mich auch, dass Firefox diese Diskrepanzen überhaupt mitmacht.

schultze · 2. August 2007

Danke für deine Hilfe.
Deine Anregungen haben mir schon sehr weitergeholfen. Das Design passt soweit, ausser die Sache mit dem "center" bekomme ich nicht ganz hin.
Der center Bereich sollte auf direkt nach dem Topbereich angezeigt werden. Nun ist zwischen top und Center aber noch einiges an Platz. (ca. 300px).

Was ist da noch falsch?

Hier nun mein überarbeiteter Code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>Titel</title>

	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

	<style type="text/css" media="all">@import "images/style.css";</style>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
</head>

<body>


<div class="content">
<div class="toph"></div>

<div class="logo">
<a href="#"><img src="images/logo.jpg" alt="" width="158" height="165" border="0" /></a>
</div>

  <div class="menu">
  
      <div id="sidenav">
      <a class="section" href="#1">Search</a><span class="hideMe"><br /></span>
      <a class="section" href="#2">Home</a><span class="hideMe"><br /></span>
      <a class="section" href="#3">
Practice Areas</a><span class="hideMe"><br /></span>
      <a class="section" href="#4">Support</a><span class="hideMe"><br /></span>
      </div>
			
  </div>

<div class="center">

		<h2>Überschrift</h2>	    
		<p>Haupttext</p>
  </div>
<div class="footer">
	  <div class="footer_text">Login | Impressum </div>
	</div>
</div>

</body>
</html>

Die css Datei:

Code:

body { 
	margin:15px 0; 
	padding:0; 
	color:#685E43;  
	line-height: 1.4em; 
	background : url(bg.gif);
	
	font-family: Arial, Helvetica, sans-serif;
}

.logo {
	height: 158px;
	width:  165px;
	position:relative;
	left:39px; 
	top:-70px;
}

.toph { 
background: #3D3E42 url(top.jpg) no-repeat center; 
height: 67px; 
/* width: 665px; */ 
margin:0; 
padding:0; 
}

.content { 
    color: #a0a0a0; 
	margin: 0 auto;
	padding: 0; 
	width: 665px; 
	background: #3D3E42 url(bg-mid.jpg) repeat-y center;
}

.menu {
	width: 149px;
	position:absolute;
	left: 340px; 
	top: 195px;	
	color:#A90209;
}


/*	Links des Menu	*/
a.mainlevel:link, a.mainlevel:visited {
	color:#A90209;
}
/*	Links des Menu	*/
a.mainlevel:hover {
	color:#A90209;
}


.center { 
	float:left; 
	width: 396px; 
	font-size: 95%; 
	margin: 0px 0 0px 225px !important;
	margin: 0px 0 0px 20px; 
	padding: 0; 
	background: #eee7d2;
	color: #685E43;
}


.footer { 
	clear:both;
	width: auto;
	height: 70px;
	color:#888;  
	font-size:90%;
	background: #3D3E42 url(bot.jpg) no-repeat center;
	text-align:center; 
}


.footer_text {
	width: 376px;
	color:#FFFFFF;
	font-size:90%;
	text-align:center;
}


/*	Überschriften	*/
.contentheading { 
	color:#685E43; 

}

.componentheading { 
	color:#685E43; 

}

/*	Menu	*/

.hideMe {
	DISPLAY: none
}

A.section {
	PADDING-RIGHT: 2px; 
	BORDER-TOP: #eee7d2 1px solid; 
	DISPLAY: block; 
	PADDING-LEFT: 6px; 
	FONT-SIZE: 11px; 
	BACKGROUND: #DDD5BE; 
	PADDING-BOTTOM: 4px; 
	MARGIN: 0px; 
	COLOR: #DDD5BE; 
	PADDING-TOP: 4px; 
	FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; 
	TEXT-DECORATION: none; 
	font-stretch: narrower;
}
A.section:link {
	BACKGROUND: #DDD5BE; 
	COLOR: #A90209;
}
A.section:visited {
	COLOR: rgb(255,255,255);
}
A.section:active {
	COLOR: rgb(255,255,255);
}
A.section:hover {
	BACKGROUND: #A90209; 
	COLOR: rgb(255,255,255);
}

Vielen Dank...
Bin echt hilflos bei dem Problem.... Alle Tutorials, die ich über CSS kennen, sind bei Höhe und ner Designgestaltung sehr Spartanisch...
Kennt vielleicht einer ein gutes?

greets

Fehler im Design: nur bei IE (CSS)

schultze

Mitglied

Maik

schultze

Mitglied

Neue Beiträge