[erldeigt] Listenpositionierung und rätselhafter Div-Abstand

user-297

29.04.2007 13:12

Problem:

(oben FF, unten IE 5)
> Online Demo

Die Page verwendet ein horizontales Listenmenü. Allerdings interpretiert der IE eine falsche Ausrichtung, ich möchte die Buttons links und nicht rechts ausgerichtet haben.

Außerdem stellt der IE zwischen dem Header und dem Content einen Abstand dar, der nicht vorhanden sein sollte.

Kann mir jemand helfen?

Quelle:

<div id="header"> <img id="headimg" src="Bilder/header2.gif" /> <span id="span" title="Nächster Gig">Jugendhaus 

    Open Air, 19. Mai 2007<br>

    Residenzplatz, Kempten </span> 

    <ul id="nav">

      <li><a href="#">News</a></li>

      <li><a href="#">Band</a></li>

      <li><a href="#">Gigs</a></li>

      <li><a href="#">Media</a></li>

      <li><a href="#">Press</a></li>

      <li><a href="#">Guestbook</a></li>

      <li><a href="#">Links</a></li>

    </ul>

	</div>

	

  <div id="headerbottom"></div>

  <div id="content">

  <h1>Yes mi Lion</h1>bla

  </div>

/* Globales */

body {

	background-image: url(Bilder/tapete.gif);

	margin: 0px;

	padding: 0px;

	text-align: left;

	}

a  {

	color: black;

	text-decoration: none;

}

a:hover  {

	color: #660000;

	text-decoration: underline;

	}

h1 {

	color: #DB544F;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	font-weight: bold;

}

* html #header img {

position: relative;

left: 397px;

}

	

/* Header */	

#center {text-align: center;

}

#header {

width: 700px;

height: 78px;

background: url(Bilder/header1.gif);

background-repeat: no-repeat;

background-color: #F79920;

margin: 0px auto;

padding: 0px;

text-align: left;

}

#header img

{

position: relative;

left: 400px;

right: 169px;

top: 55px;

height: 23px;

width: 131px;

float: left;

}

#span

{

	position: relative;

	left: 400px;

	top: 53px;

	height: 23px;

	width: 167px;

	float: left;

	font-family: Tahoma, Arial, Helvetica, sans-serif;

	font-size: 10px;

}

#headerbottom

{

width: 700px;

height: 11px;

background: url(Bilder/header3.gif);

background-repeat: no-repeat;

margin: 0px auto;

padding: 0px;

text-align: left;

}

#content

{

	width: 700px;

	height: 470px;

	background-color: #420C1B;

	margin: 0px auto;

	padding: 0px;

	text-align: left;

	border: 1px solid #BC4544;

}



/* Navigation */

#nav {list-style: none;

background: none;

padding: 0px;

padding-top: 59px;

margin: 0px;

text-align: left;

position: relative;

left: 0px;

}

#nav li {

display: inline;

margin: 0px;

padding: 0px;

}

#nav a {

color: #000000;

background: #F79D29;

text-decoration: none;

font: bold 12px Tahoma, Arial, Helvetica, sans-serif;

border: 1px solid #F7AA48;

margin: 0px;

padding-right: 7px;

padding-top: 2px;

padding-bottom: 3px;

padding-left: 7px;

}

#nav a:hover {

color: black;

background: #F7AA48;

border: 1px solid #F7AA48;

}

Fachabi 2007

user-180

29.04.2007 13:22

hast du auch ein online beispiel?

may the force be with you. but mostly with me.

user-297

29.04.2007 13:29

Original von user-180
hast du auch ein online beispiel?

http://mmp.sheep24.de/

Fachabi 2007

user-118

29.04.2007 13:54

An deiner Stelle würde ich mir mal mit dem Webdeveloper Tool die Outlines sämtlicher Elemente im Head anzeigen lassen. Ich hatte letztens ein ähnliches Problem und hbae festgestellt, dass ein darüberliegendes Element (nicht Parent-Child, sondern von der Anordnung auf der Seite) zu groß war, was dem FF in dem Moment ziemlich egal war aber den IE gestört hat.

Ich brauche keine Signatur

user-180

29.04.2007 14:07

also:
ich würde der liste ein float: left und rem span ein float: right zuweisen.
die absoluten wären dann überflüssig.
dann würde ich die ganzen bilder zu einem zusammen bauen und als headerhintergrund nehmen. dann musst du nicht alles zerschnipseln...

schau mal ob es so klappt:



body {

background-image:url(Bilder/tapete.gif);

margin:0px;

padding:0px;

text-align:left;

}

a {

color:black;

text-decoration:none;

}

a:hover {

color:#660000;

text-decoration:underline;

}

h1 {

color:#DB544F;

font-family:Arial,Helvetica,sans-serif;

font-size:16px;

font-weight:bold;

}

#center {

text-align:center;

}

#header {

background:transparent url(Bilder/header1.gif) no-repeat scroll 0% 50%;

height:78px;

margin:0px auto;

padding:0px;

text-align:left;

width:700px;

}

#header img {

display:none;

float:left;

height:23px;

left:400px;

position:relative;

right:169px;

top:55px;

width:131px;

}

#span {

float:right;

font-family:Tahoma,Arial,Helvetica,sans-serif;

font-size:10px;

height:23px;

left:400px;

margin:53px 0pt 0pt;

position:relative;

width:167px;

}

#headerbottom {

background:transparent url(Bilder/header3.gif) no-repeat scroll 0%;

clear:both;

height:11px;

margin:0px auto;

padding:0px;

text-align:left;

width:700px;

}

#content {

background-color:#420C1B;

border:1px solid #BC4544;

height:470px;

margin:0px auto;

padding:0px;

text-align:left;

width:700px;

}

#nav {

background:transparent none repeat scroll 0%;

float:left;

left:0px;

list-style-image:none;

list-style-positionutside;

list-style-type:none;

margin:0px;

padding:55px 0px 0px;

position:relative;

}

#nav li {

display:inline;

margin:0px;

padding:0px;

}

#nav a {

background:#F79D29 none repeat scroll 0%;

border:1px solid #F7AA48;

color:#000000;

font-family:Tahoma,Arial,Helvetica,sans-serif;

font-size:12px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:bold;

line-height:normal;

margin:0px;

padding:2px 7px 3px;

text-decoration:none;

}

#nav a:hover {

background:#F7AA48 none repeat scroll 0%;

border:1px solid #F7AA48;

color:black;

}

* html #header img {

left:397px;

position:relative;

}

may the force be with you. but mostly with me.

user-297

22.05.2007 14:52

Vielen dank, mit ein paar Anpassungen hats so hingehaun. Im nachhinein ist mir rätselhaft, warum ich das Bild überhaupt so zerstückelt hab...

Fachabi 2007