Fehlerhafte DIV darstellung im IE @ tutorials.de: Tutorials, Forum & Hilfe

bandsite · 24.11.05 02:49

Hallo,
Ich hab' mal wieder 'n Problem mit CSS. Ich habe ein Layout zusammengebaut und dafür mehrere DIV's verwendet. Die DIV's sind bis zu vierfach in einander verschachtelt.

Den vierten DIV stellt der IE nur "verkrüppelt" da:
Fehlerhafte darstellung

Firefox macht das hingegen richtig:
Richtige Darstellung

Hat jemand 'ne Ahnung was das sein kann?

Gruß & THX , bandsite

BSA · 24.11.05 02:50

Also ohne Quelltext geht da schonmal gar nichts!

bandsite · 24.11.05 02:59

Okay, also dieser DIV Container :

Code :

echo '<div id="announce">';
echo 'The Website is in Administration-mode.<br />To edit content, simply klick on an Link in the Mainmenu.<br /><br /><a href="index.php?leaveadmin=1">Klick here to leave Administration mode</a>';
echo '<br /><br /><a href="index.php?link=admin&amp;edit=mainsite">Main Site Configuration</a>';
echo '</div>';

...hat diesen CSS Code:

Code :

#announce {
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    
    background-color: #FFFFFF;
    border: solid 1px #333333;
    
    font-size: 12px;
    color: #000000;
}

Das hier ist der Quellcode, den ich mir per rechter Maustaste im IE anzeigen lasse:

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>EFT-Practice for Holistic Well-being</title>
    <link href="./designpacks/modern/construction.css" rel="stylesheet" type="text/css" />
</head>
    <body>
    <div id="container">
        <div id="header">
            &nbsp;
        </div>
        <div id="menu">
            <ul class="ul_menu">
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"         href="index.php?link=admin&amp;edit=home">Home</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"         href="index.php?link=admin&amp;edit=about">About Sunny van Vlijmen</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=services">My Services</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=technique">The Technique</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=exercise">Anti-Stress Exercise</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=workshops">Workshops &amp; Groups</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=sessions">Phone Sessions</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=store">EFT Store</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=research">Research on EFT</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"         href="index.php?link=admin&amp;edit=links">Important Links</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"         href="index.php?link=admin&amp;edit=news">News</a></li>
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menu"     href="index.php?link=admin&amp;edit=contact">Contact</a></li>
                <br />
                <li class="li_menu"><a onfocus="if(this.blur) this.blur()" class="menuactive"       href="index.php?link=admin">Administration</a></li>
            </ul>
        </div>
        <div id="content">
            <div id="content_header"><img src="designpacks/modern/header_admin.png" /></div><div id="innercontent"><div id="announce">The Website is in Administration-mode.<br />To edit content, simply klick on an Link in the Mainmenu.<br /><br /><a href="index.php?leaveadmin=1">Klick here to leave Administration mode</a><br /><br /><a href="index.php?link=admin&amp;edit=mainsite">Main Site Configuration</a></div><p class="txt_head1">Main Site Configuration</p><div id="formdiv"> <form action="index.php?link=admin&amp;edit=mainsite" method="post">        <label class="formdiv_label">Choose your Sitedesign</label><br /><br />     <input type="hidden" name="didmainsite" value="1" />        <select style="width: 204px; height: 20px;" name="designpack"><option value="classic">classic</option><option value="modern">modern</option>        </select><br /><br />       <input class="formdiv_button" type="submit" value="save" /> </form></div></div>     </div>
        <br style="clear: both;" />
        <div id="footer">
            <p class="txt_footer">&copy; by Sandra van Vlijmen 2005</p>
        </div>
    </div>
    </body>
</html>

kopiere ich diesen in Dreamweaver, dann wird die Seite auch wieder richtig dargestellt.

BSA · 24.11.05 03:02

Also sowas macht man schonmal gar nicht:

Code :

#announce {
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    
    background-color: #FFFFFF;
    border: solid 1px #333333;
    
    font-size: 12px;
    color: #000000;
}

mach das dadraus:

Code :

#announce {
    padding: 5px;
    margin: 5px;
    
    background-color: #FFFFFF;
    border: 1px solid #333333;
    
    font-size: 12px;
    color: #000000;
}

Vielleicht kam der IE auch einfach nicht mir der border Anagabe klar (war verdreht)!
Aber ich denke nicht das es daran lag!

bandsite · 24.11.05 03:06

nee, mit den Borderangaben hat das nichts zutun.

Code :

1	padding: 5px 5px 5px 5px;

<--- Naja, das mach ich nur, weil immer wieder andere abstände ausprobiere.

Ich habe gerade gemerkt, dass der annound DIV irgendwie auf der "IE"Seite verankert ist, wenn ich hoch und runter scrolle, dann bleibt der Weisse Hintergrund mit dem Rahmen immer an der selben Stelle, ist aber nur sichtbar, wenn sich der im DIV enthaltene Text darüber befindet.... *confused*

BSA · 24.11.05 03:07

Wie gesagt, ohne das Posten des kompletten Quelltextest (CSS) kann man dir hier nicht weiterhelfen!

bandsite · 24.11.05 03:52

Zur veranschaulichung:

Code :

<body>
    <div id="container">
        <div id="header">
            &nbsp;
        </div>
        <div id="menu">
        </div>
        <div id="content">
            <div id="content_header">
            </div>
            <div id="innercontent">
                <div id="announce">
                </div>
            </div>
        </div>
        <br style="clear: both;" />
        <div id="footer">
        </div>
    </div>
</body>
 
css
 
* {font-family: Verdana, Arial, Helvetica, sans-serif;}
 
#container {height: 100%;}
#container[id] {height: auto;min-height: 100%;}
html {height: 100%;margin: 0px;padding: 0px;}
body {height: 100%;background-color: #ffffff;margin: 0px;padding: 0px;}
#container {position: relative;background-color: #fef0e9; background-image: url(container.png); background-repeat: repeat-y; background-position: left;width: 726px;min-height: 100%;padding: 0px 0px 0px 0px;margin: 0px auto;}
#menu {width: 172px;float: left;position: relative;padding: 10px 6px 0px 6px;margin: 0px auto;}
#content {width: 521px;float: left; position: relative;padding: 5px 10px 10px 10px;margin: 0px auto 20px auto;}
#header {width: 726px;height: 126px;position: relative;padding: 0px 0px 0px 0px;background-image: url(header.png);}
#footer {width: 726px; height: 19px;position: absolute;padding: 0px 0px 0px 0px;margin: 0px auto;bottom: 0px; background-color: #5976a2;}
 
#announce {padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;background-color: #FFFFFF;border: solid 1px #333333;font-size: 12px;color: #000000;}
 
 
- Der DIV #innercontent besitzt keine CSS eigenschaften.

Hat jemand eine Idee, oder weis jemand von Problemen die der IE in bezug auf verschachtelte DIV Container hat?

THX

BSA · 24.11.05 03:57

Ich bitte um Erklärung für folgendes:

Code :

1	#container[id]

Das ist doppelt, eins davon kannst du dir sparen:

Code :

1 2	html {height: 100%;margin: 0px;padding: 0px;} body {height: 100%;background-color: #ffffff;margin: 0px;padding: 0px;}

Das ist immernoch falsch:

Code :

1	#announce {padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;background-color: #FFFFFF;[b]border: solid 1px #333333[/b];font-size: 12px;color: #000000;}

bandsite · 24.11.05 04:07

Wie schon gesagt, sind die padding und margin angaben so: "padding: 5px 5px 5px 5px;" angegeben, weil ich mitten in der gestaltung bin und die abstände zu allen Seiten evtl. noch verändern möchte. So kann ich dort schnell und einfach die Zahlenwerte verändern.
Falsch ist das allerdings trotzdem nicht.

Der HTML Tag ist mit den Height und margin, padding angaben notwendig um die Seite immer in 100%er Höhe anzuzeigen, ausser wenn der Inhalt länger wird. Dazu gehört auch die angabe #container[id] - wird nur von IE interpretiert.

Hier: link

BSA · 24.11.05 04:12

1. Ich meine nicht die padding und margin angaben, sondern die nun schon FETT vorgehobenen border Anagben, das muss heißen border: 1px solid #ffffff und nicht border: solid 1px #ffffff

klar?!

2. würde die Angabe zur Höhe auch einmal für den Body reichen, oder nicht? Das heißt das du dir entweder die Anageben im body oder im HTML Tag sparen kannst!

bandsite · 24.11.05 04:22

Ja, ok - Die Border angaben habe ich vertauscht, aber die Höhenangaben im html sowie im Body müssen bleiben, da mein Footer sonst nach oben rutscht, wenn ich sie hier oder dort wegnehme.

BSA · 24.11.05 04:24

Gut okay, weiter kann ich dir leider auch nicht helfen, tut mir leid, warte am besten auf michaelsinterface der kann dir garantiert weiterhelfen!

Gruß BSA

Maik · 24.11.05 06:28

Hallo und guten Morgen,

wenn ich die Angabe position:relative für das DIV#content auskommentiere / deaktiviere, wird der Hintergrund und Rahmen für das DIV#announce auch im IE korrekt dargestellt.

Code :

1	#content {width: 521px;float: left; [color=red]/position: relative;/[/color]padding: 5px 10px 10px 10px;margin: 0px auto 20px auto;}

bandsite · 08.12.05 13:35

Hmmm, merkwürdig.
Ich habe inzwischen herausgefunden, dass der IE Das div#announce auch richtig darstellt, wenn ich eine fixe breite in pixeln angebe, so ist das okay.

Danke euch =)

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Fehlerhafte Darstellung im IE 5.5 und 6.0

Wiedermal Fehlerhafte Darstellung im FF

Fehlerhafte Darstellung im IE

Fehlerhafte Darstellung

JPEG-Bilder - Fehlerhafte Darstellung in IE 6

E-Mail:

Abonnieren Abbestellen