Willkommen in der Webstatt Zum Webstatt Blog und Stories
Sheep Sheep am 29.04.07 15:12

Problem:
[IMG]http://upload.sheep24.de/upload/ieprob1.gif[/IMG]
[SIZE=10](oben FF, unten IE 5)[/SIZE]
> 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;
}

netcup.de Warum gibt es hier Werbung?
fish fish am 29.04.07 15:22

hast du auch ein online beispiel?

Sheep Sheep am 29.04.07 15:29

Quote
Original von fish
hast du auch ein online beispiel?


http://mmp.sheep24.de/

Al3x0r Al3x0r am 29.04.07 15: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.

fish fish am 29.04.07 16: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-position:outside;
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;
}

Sheep Sheep am 22.05.07 16: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...

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt