CSS im IE Verschoben

**big-bastian** · 17.03.2010 18:21

Hallo zusammen,

ich versuche gerade meine Private Homepage von einem Frameset auf DIV Container um zubauen. Doch leider klappt das mit der Formatierung nicht so richtig. Also im Firefox sieht alles so aus wie ich es will. Aber im IE bekomme ich einen Container einfach nicht ausgerichtet. Kann mir vielleicht jemand helfen?

Hier mein Gerüst:

http://home.arcor.de/ffmandre/

Es geht darum das der Rechte Container direkt an dem Zentralen Hängen soll. Die ganze Sache sieht im Firefox auch gut aus aber im IE ist alles vor verschoben. (siehe hier http://meineipadresse.de/netrenderer/index.php)

Hier der CSS Code:

Code:

body
{
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#eaeaea url(img/bg.gif) top center repeat-y;
color:#3a3a3a;
}

#content_werbung
{
position: absolute;
left: 77%;
top: 20%;
width: 200px;
height: 100px;
overflow: auto;
border: 1px solid black;
background-color: #eee;
}

#wrap
{
background-color:#ffffff;
color:#303030;
margin:0 auto;
padding:1px 5px;
width:760px;
}

Hier der HTML Code:

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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="de.css" media="screen,projection" />
<title>SV test- News</title>
</head>
<body>
</div>
<div id="content_werbung">
Test
</div>
<div id="wrap">
<div id="header">
<br>
<h1><a href="test"></a></h1>
<p><strong></strong></p>
</div>
<div id="avmenu">
<h2 class="hide">Menu</h2>
</div>
<div id="contentwide"><h2>test</h2><a class="section_anchor" id="wb_19" name="wb_19"></a><table cellpadding="0" cellspacing="0" border="0" width="98%">
</div>    
<div id="footer">
<h2>test</h2
<h2>test</h2
<h2>test</h2
<h2>test</h2
<h2>test</h2
</div>
</body>
</html>

Danke für eure Hilfe!

**wildmieze** · 17.03.2010 19:42

bei mir siehts im FF und im IE8 gleich aus ..

.. durch position:absolute richtet sich dein kleiner container vermutlich am body aus, und verschiebt sich dementsprechend, wenn man das browserfenster größer oder kleiner macht.

.. und dein html-code ist .. falsch

.. welches div wird da direkt nach dem body geschlossen? wozu die angefangene, aber nicht beendete tabelle? ich finde spontan auch keine ende für den wrap-container .. das solltest du "aufräumen", bevor du auf fehlersuche gehst ..

**big-bastian** · 17.03.2010 20:56

Hallo,

das Problem ist nur im ie6 und ie 7. Siehe

http://meineipadresse.de/netrenderer/index.php

Was könnte ich den für position:absolute noch verwenden? Damit sich der Boxx bei kleinen Auflösungen nicht verschiebt?

mfg

**wildmieze** · 17.03.2010 22:34

hm .. in "meinem" IE6/IE7 (IE Tester) sieht die Seite genauso aus wie im IE8 oder Firefox.

Wo soll die Box denn genau hin? .. Du könntest versuchen, dem wrap ein position:relative mitzugeben, dann sollte sich die kleine box daran orientieren statt am body. Aber ich glaube, dafür muss im HTML das kleine div im wrap-div stehen. Kannst ja in die Richtung mal rumprobieren. http://de.selfhtml.org/css/eigenscha...g.htm#position

**big-bastian** · 17.03.2010 23:01

Hallo,

also die graue Box soll direkt an der weißen anliegen!

**schollsen** · 18.03.2010 10:33

Das hat mit dem IE eher weniger zu tun, im Safari siehts genauso aus …
Scheint so, als klappt das mit demn Grundlagen der Positionierung nicht so gut …

Der Container #content_werbung, den du absolut positionierst, richtet sich bei den vergebenen Koordinaten nach dem Body,
da dies das einzige Elternelement ist, ab dem sich absolut positionierte Elemente momentan ausrichten können.
Bei meiner Auflösung entspricht left: 77% gerade ca. 1239px, d.h. dort fängt dein Container erst an.

So, Butter bei die Fische:

Grundlagen der Positionierung verinnerlichen
Erworbenes Wissen anwenden
Bei Fragen – fragen

**big-bastian** · 18.03.2010 18:54

Hallo, also so ein bißchen habe ich das verstanden. Mein Code jetzt ist wird die BOX verschoben weil jeder User eine unterschiedliche Auflösung hat.

Also müsste sich die Box an dem Hauptblock Orientieren.Sehe ich das richtig? Doch ich bekomme das nicht hin. Kann mir vielleicht nochmal jemand helfen?

**schollsen** · 18.03.2010 20:06

Das siehst Du vollkommen richtig.

Die Box muss sich an Ihrem Elternelement orientieren.
Für dieses ist die position relative wichtig …

Entschuldige, aber ich wundere mich ein wenig.
Das von mir verlinkte Tutorial ist mMn. eins der verständlichsten, die ich kenne.
Deiner Antwort zufolge hast Du es nicht mal gelesen …

**big-bastian** · 20.03.2010 22:00

Hallo,

ich habe mir das Tutorial nochmal angeschaut und das DIV Element ist jetzt auch so wo es hin soll.

Siehe hier:

http://home.arcor.de/ffmandre/

Doch ein Problem gibt es noch. Und zwar wir das Background Bild vom Header im IE 6 und IE 7 nach rechts verschoben!(siehe http://meineipadresse.de/netrenderer/index.php)

Hier nochmal mein Code:

Css

Code:

body {
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#eaeaea url(img/bg.gif) top center repeat-y;
color:#3a3a3a;
}
#wrap {
background-color:#ffffff;
color:#303030;
margin:0 auto;
padding:1px 5px;
width:760px;
}
#header {
color:#505050;
background:#ffffff url(img/front.jpg) bottom left no-repeat;
height:250px;
margin:0 0 10px 0;
padding:0;
}
#avmenu {
clear:left;
float:left;
width:150px;
margin:0 0 10px 0;
padding:0;
}
#content {
margin:10px 140px 10px 160px;
padding:0;
line-height:1.5em;
text-align:left;
}
#footer {
clear:both;
margin:0 auto;
padding:8px 0;
border-top:2px solid #dadada;
width:760px;
text-align:center;
color:#808080;
background-color:#ffffff;
font-size:0.9em;
}

Index

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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="de.css" media="screen,projection" />
<title>SV test- News</title>
</head>
<body>
<div id="wrap">
<div style="position:relative;float:left;left:770px;width:50px;  background-color:#e4c9cd;">
<p>Das ist ein Test für das DIV.
</div>
<div id="header">
<p><strong></strong></p>
</div>
<div id="avmenu">
<h2 class="hide">Menu</h2>
<p class="hide">1huu</p>
<p class="hide">1uu</p>
<p class="hide">1zz</p>
</div>
<div id="content">
    <p>&nbsp;</p>
    <p>jioioiioi</p>
    <p>juiiooi</p>
    <p>kkk</p>
    <p>kkkkkk</p>
    <p>kkk</p>
    <p>kkk</p>
    <p>kkk</p>
    <p>kkk</p>
    <p>kk</p>
    <p>&nbsp;</p>
    <p>kk</p>
    <p>kk</p>
    <p>kk</p>
    <p>kk</p>
    <p>&nbsp;</p>
</div>
<div id="footer">
<p>Footer text
</div>
</div>




</body>
</html>

zur Startseite vom TP

Thema: CSS im IE Verschoben

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

CSS im IE Verschoben

Ähnliche Themen

img verschoben im IE7

Win XP SP2 erneut verschoben

verschoben

Verschoben, mal so mal so...

verschoben

Aktive Benutzer

Aktive Benutzer