✔ Falsche Darstellung im IE7

Status
Nicht offen für weitere Antworten.
B

buddha

Erfahrenes Mitglied
Hallo Miteinander,
Meine Frage-ich bekomme es nicht hin das der Content im IE7 genauso positioniert wird wie im Firefox. Ich möchte das der Content egal bei welcher Auflösung bzw. Browser immer genau mittig positioniert ist. Hier der Html-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Lupa Communication</title>
<link href="css/layout.css" rel="stylesheet" type="text/css"/>
<link href="css/navigation.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="stil">
<ul>
<li class="stil"><a href="beratung.html" class="stil">Beratung</a></li>
<li class="stil"><a href="coaching.html" class="stil">Coaching</a></li>
<li class="stil"><a href="mediation.html" class="stil">Mediation</a></li>
<li class="stil"><a href="&uuml;ber uns.html" class="stil">&Uuml;ber uns</a></li>
<li class="stil"><a href="impressum.html" class="stil">Impressum</a></li>
<li class="stil"><a href="mailto:info@lupa-communication.de?body=Hallo%20Herr%20Helle,%10Das%20ist%20ein%20Test.%10Mit%20freundlichem%20Gruss%10Rico%20Meinshausen">Kontakt</a></li>
</ul>
</div>
<div id="content">
<div align="center"><img src="bilder/lupa-communication-logo.jpg" alt="Logo" width="401" height="200" /></div>
<p>Das ist ein Text.</p>
<p align="center"></p>
</div>
</body>

Hier der CSS Code

body{
background-color: #3366FF;
}


#content {
width: 750px;
/*left: 150px;*/
right: 150px;
top: 10px;
position: absolute;
margin: auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

body,td,th {
color: #000000;
}
Habe left zum Testen ausgeklammert.

Hier die Navigation- CSS

.stil {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
width: 80px; padding-left: 0px;
}

.stil ul {
position: relative;
top:200px;
}


a {
text-decoration:none;
color:#FFFFFF;
}

a:hover {
text-decoration:underline;
font-size: 15px;
}

a:link {
background-color:#6699FF;
}

a:focus {
background-color: #CCFFFF;
color: #000000;
}


Habe schon ein paar Sachen auprobiert aber ohne Erfolg, da ich schon mehrere Stunden dransitze und ich keine Ideen mehr habe würde ich mich über ein paar Tipps freuen.
Gruß Rico
 
Wenn du einem div zb. dem content den style margin:0 auto gibst, ist es immer mittig zentriert.

Beachte dass du die Klasse stil für dein Menu u. ein Div verwendest.
Das Div mit der Navi könntest du absolute positionieren o. du machst ein Div über das gesamte Layout und gibst dem den Style für mittig u. floatest die Navi + Content, dann sind diese schön neben einander.
 
Hi,

nimm mal die Breitenangabe für das DIV content heraus und "aktiviere" wieder die linke Positionsangabe, damit sich die Box von left:150px bis right:150px erstreckt.
 
Hallo,
Danke für eure Hilfe. Ich habe dem content den style margin:0 auto zugewiesen, die Breite für den Content entfernt und die linke Positionsangabe aktiviert. Im Firefox passt es,und ich muss dazu sagen ich nutze den IE Tab (Firefox Erweiterung ) zum schnellen Umschalten. Da passt es jetzt auch.

UND JETZT

Wenn ich den IE 7 öffne und die Datei dort lade ist der gesamte Inhalt nach rechts verschoben, :confused:

Hier habe ich die Bilder mal hochgeladen vielleicht wisst Ihr was da falsch ist. Und wenn ich das Fenster verkleinere wird der Content über die Navigation geschoben - nur im IE .

Gruß
Rico
 

Anhänge

  • Firefox - Ansicht mit dem IE Plugin korrekt.png
    Firefox - Ansicht mit dem IE Plugin korrekt.png
    67,6 KB · Aufrufe: 31
  • IE7 nicht Korrekt1.png
    IE7 nicht Korrekt1.png
    65,9 KB · Aufrufe: 31
margin:0 auto ist hier überflüssig und überhaupt nicht hilfreich, da sich ja die Box von left:150px bis right:150px erstrecken soll, und somit eine relative Breite besitzt, die margin-Angabe aber auf eine Box angewendet wird, die eine fixe Breite besitzt, und somit im Fenster horizontal zentriert werden soll.

Dass sich der Content beim Skalieren des Fensters über die Navigation legt, liegt vermutlich daran, dass der Content mit der absoluten Positionierung aus dem normalen Textfluss genommen wurde, und die Navigation hingegen nicht.

Achja, bei mir stimmt die Lage / Position des Content-DIVs im IE7.
 
Hallo und Danke für die schnelle Antwort.
Ich habe die Vorlage jetzt auf einen anderen PC angeschaut und da wird alles korrekt angezeigt. Hängt dies mit dem Monitor zusammen, ich habe ein Breitbild-tft?
Gruß Rico
 
Mit Sicherheit kann ich dies nicht bestätigen, aber wenn es auf einem anderen (herkömmlichen) Monitor passt, wird's wohl daran liegen. :confused:
 
Ich habe es auf einem Laptop (kein Breitbild) probiert da hat es funktioniert .
Ich habe noch eine Frage zu der Navigation.
Um die Navigation neben dem Text zu haben habe ich
.stil ul {
position: relative;
top:200px;
}

eingefügt. Das habe ich gemacht um die Liste zu positionieren, ist aber eine schlechte Möglichkeit da dies leider im
.stil {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 30px;
width: 80px; padding-left: 0px;
}

nicht funktioniert:confused:

Den Fehler sieht man erst wenn man die Liste mit einer Hintergrundfarbe belegt, für Tipps im voraus vielen Dank.
Gruß Rico
 
Versuch es mal hiermit:

Code: 
html,body {
margin: 0;
padding: 0;
}

.stil ul {
margin: 0;
padding: 0;
position: relative;
top:200px;
}
 
Ja danke das geklappt. Ich hatte dieses probiertohne marin und padding. Bei position habe ich alles durchprobiert aber kein Erfolg.
Jetzt passt fast alles . Im Firefox ist der Link Kontakt blau hinterlegt, im IE nicht(?) .
Gruß Rico
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück