mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mo 16.09.2019 00:00 Benutzername: Passwort: Auto-Login

Thema: hilfe bei darstellung im internet explorer 8.0 vom 17.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> hilfe bei darstellung im internet explorer 8.0
Seite: 1, 2  Weiter
Autor Nachricht
spuncky
Threadersteller

Dabei seit: 09.02.2010
Ort: Bremen
Alter: 33
Geschlecht: Männlich
Verfasst Mi 17.02.2010 12:12
Titel

hilfe bei darstellung im internet explorer 8.0

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

ich habe ein Problem bei der Darstellung vom Layout im ie8 im mf funktioniert alles wunderbar. Ich finde nicht den Fehler. *Schnief* Mein div passt sich schön an den Inhalt an und der footer rutscht auch schön mit, nur bei ie8 sieht es katastrophal aus. bitte um Hilfe.

mfg spuncky

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=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#999;
}
#header {
   background:#FFF;

   background-position:left;
   background-repeat:no-repeat;
   border:#000 solid 1px;
   height:80px;
   position:absolute;
   width: 940px;
   margin:4px;
}
#header_navi {
   background:#FFF;
   border:#000 solid 1px;
   height:25px;
   width: 940px;
   position:absolute;
   margin:90px 4px 4px 4px;
}
.flags {
   margin:4px auto 5px 5px;
   outline:none;
   text-align:left;
}
#wrap {
 
width:950px;
margin: 0 auto -25px;
background:#666;
border:solid;
border-width:0 1px;
}

h1 {
text-align:center;
padding:100px 0 200px;/* /* padding-bottom equals height of #foot */
}

#contentbox {
display:table;/*wichtig für orientierung an header und footer-->*/
border:#000 solid 1px;
margin:121px 1px 33px 189px;
width: 755px;
height:560px;
background:#FFF;
}

#foot {
height:25px;
width:940px;
background-color:#FFF;
border:#000 solid 1px;
margin:-29px auto; /* negative margin-top equals height of #foot */
}
#footertextright {
   float:right;
   font-family: Verdana, Geneva, sans-serif;
   font-size:10px;
   margin-right:20px;
   margin-top:7px;
   text-align:right;
   text-transform:uppercase;
   word-spacing:1em;
}
#footertextright p{
   text-align:right;
}

#footertextright ul li{
   list-style: none;
   display:inline;
}
#footertextright a{
text-decoration:none;
color:#000;
}
#footertextright a:hover{
text-decoration:none;
color:#999;
}
</style>

<body>

<div id="wrap">
<div id="header"></div><!-- header ENDE -->

<div id="header_navi">

<div class="flags">
    <a href="#"> <img src="images/gb.png" alt="gb" border="1" /></a>
    <a href="#"> <img src="images/deu.png" alt="de" border="1" /></a>
    <a href="#"> <img src="images/w.png" alt="w" border="1" /></a>
    <a href="#"> <img src="images/bra.png" alt="bra" border="1" /></a>
    <a href="#"> <img src="images/w2.png" alt="w2" border="1" /></a>
    <a href="#"> <img src="images/eu.png" alt="eu" border="1" /></a>
      </div>

</div>


<div id="contentbox">
   
      <h3>content</h3>     
 </div>
 
</div><!-- wrap ENDE -->

<div id="foot">
    <div id="footertextright">
            <ul>
               <li> <a href="kontakt.html">Kontakt |</a></li>
                <li><a href="impressum.html">Impressum |</a></li>
                <li><a href="sitemap.html">Sitemap |</a></li>
                <li><a href="agb.html">AGB |</a></li>
                <li><a href="#url">Datenschutz</a></li>
           </ul>
    </div><!-- footertextright ENDE -->
</div><!-- footer ENDE -->

           
       
     


</body>
</html>
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 36
Geschlecht: Männlich
Verfasst Mi 17.02.2010 12:14
Titel

Antworten mit Zitat Zum Seitenanfang

Kannst Du nicht bitte das Online Bsp posten.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
spuncky
Threadersteller

Dabei seit: 09.02.2010
Ort: Bremen
Alter: 33
Geschlecht: Männlich
Verfasst Mi 17.02.2010 12:28
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo Kash,

ne tut mir leid ich habe noch keinen Zugang zum Server, dies sind halt meine ersten versuche mit xhtml/css.

mfg spuncky
  View user's profile Private Nachricht senden
nicoG

Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht: Männlich
Verfasst Mi 17.02.2010 13:00
Titel

Antworten mit Zitat Zum Seitenanfang

Kash hat geschrieben:
Kannst Du nicht bitte das Online Bsp posten.

Warum? geht doch auch so... * Keine Ahnung... *

Das Problem liegt an der Darstellung des IE8 in Verbindung mit margin-top des ersten Objekts (Vor allem bei Headlines nervig).Somit muss du umstrukturieren.
Hau den Margin-top aus dem Content raus, gib dem #wrap ein padding-top und positioniere die absoluten Objekte mit einem "top:"-Wert * huduwudu! *

Bzw. arbeite komplett ohne absoluter, brauchst du soweit ich das ohne Layout beurteilen kann...
display: table benötigst du auch nicht so wie der Stand derzeit ist...


Zuletzt bearbeitet von nicoG am Mi 17.02.2010 13:01, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
spuncky
Threadersteller

Dabei seit: 09.02.2010
Ort: Bremen
Alter: 33
Geschlecht: Männlich
Verfasst Mi 17.02.2010 13:01
Titel

Antworten mit Zitat Zum Seitenanfang

habe es jetzt bisschen besser hinbekommen, allerdings ist der footer im ie8 noch falsch.

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=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
background:#999;
}
#header {
   background:#FFF;
   background-position:left;
   background-repeat:no-repeat;
   border:#000 solid 1px;
   height:80px;
   position:relative;
   width: 940px;
   margin:0px 4px 4px 4px;
}
#header_navi {
   background:#FFF;
   border:#000 solid 1px;
   height:25px;
   width: 940px;
position:relative;   
margin:4px 4px 4px 4px;
}
.flags {
   margin:4px auto 4px 5px;
   outline:none;
   text-align:left;
}
#wrap {
min-height:100%;
width:950px;
margin:0 auto -25px;
background:#666;
border:solid;
border-width:0 1px;
}
html:before, #wrap:before { /* Opera and IE8 "redraw" bug fix */
content:"";
float:left;
height:100%;
margin-top:-999em;
}
* html #wrap { /* IE6 workaround */
height:100%;
}
h1 {
text-align:center;
padding:100px 0 200px; /* padding-bottom equals height of #foot */
}

#contentbox {
display:table;/*wichtig für orientierung an header und footer-->*/
border:#000 solid 1px;
margin:3px 1px 33px 189px;
width: 755px;
height:560px;
background:#FFF;
}
html:before, #contentbox:before { /* Opera and IE8 "redraw" bug fix */
content:"";
float:right;
height:100%;
margin-top:-999em;
}
* html #contentbox { /* IE6 workaround */
height:100%;
}


#foot {
height:25px;
width:940px;
background-color:#FFF;
border:#000 solid 1px;
margin:-29px auto; /* negative margin-top equals height of #foot */
}
#footertextright {
   float:right;
   font-family: Verdana, Geneva, sans-serif;
   font-size:10px;
   margin-right:20px;
   margin-top:7px;
   text-align:right;
   text-transform:uppercase;
   word-spacing:1em;
}
#footertextright p{
   text-align:right;
}

#footertextright ul li{
   list-style: none;
   display:inline;
}
#footertextright a{
text-decoration:none;
color:#000;
}
#footertextright a:hover{
text-decoration:none;
color:#999;
}
</style>

<body>

<div id="wrap">
<div id="header"></div><!-- header ENDE -->

<div id="header_navi">

<div class="flags">
    <a href="#"> <img src="images/gb.png" alt="gb" border="1" /></a>
    <a href="#"> <img src="images/deu.png" alt="de" border="1" /></a>
    <a href="#"> <img src="images/w.png" alt="w" border="1" /></a>
    <a href="#"> <img src="images/bra.png" alt="bra" border="1" /></a>
    <a href="#"> <img src="images/w2.png" alt="w2" border="1" /></a>
    <a href="#"> <img src="images/eu.png" alt="eu" border="1" /></a>
      </div>

</div>


<div id="contentbox">
   
      <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   <h3>content</h3>   
 </div>
 
</div><!-- wrap ENDE -->

<div id="foot">
    <div id="footertextright">
            <ul>
               <li> <a href="kontakt.html">Kontakt |</a></li>
                <li><a href="impressum.html">Impressum |</a></li>
                <li><a href="sitemap.html">Sitemap |</a></li>
                <li><a href="agb.html">AGB |</a></li>
                <li><a href="#url">Datenschutz</a></li>
           </ul>
    </div><!-- footertextright ENDE -->
</div><!-- footer ENDE -->

           
       
     


</body>
</html>
  View user's profile Private Nachricht senden
spuncky
Threadersteller

Dabei seit: 09.02.2010
Ort: Bremen
Alter: 33
Geschlecht: Männlich
Verfasst Mi 17.02.2010 13:02
Titel

Antworten mit Zitat Zum Seitenanfang

hallo nicoG,

danke für deine Hilfe ich probier es mal.
  View user's profile Private Nachricht senden
spuncky
Threadersteller

Dabei seit: 09.02.2010
Ort: Bremen
Alter: 33
Geschlecht: Männlich
Verfasst Mi 17.02.2010 13:08
Titel

Antworten mit Zitat Zum Seitenanfang

hallo nicog,

wenn ich display table rausnehme, geht der inhalt von meiner contentbox über den footer. Das sol er ja nicht, der footer soll mit dem inhalt immer mitrutschen.
  View user's profile Private Nachricht senden
spuncky
Threadersteller

Dabei seit: 09.02.2010
Ort: Bremen
Alter: 33
Geschlecht: Männlich
Verfasst Mi 17.02.2010 13:13
Titel

Antworten mit Zitat Zum Seitenanfang

sooo, soweit so guut. Das einzige Problem ist nur noch der foot in ie8 der hängt unterhalb trotz meinem negativen margin wert. warum?

Zitat:
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
* {
margin:0;
padding:0;
}

html, body {
height:100%;
background:#999;
}
#header {
background:#FFF;
background-image:url(./images/logoblack.png);
background-position:left;
background-repeat:no-repeat;
border:#000 solid 1px;
height:80px;
position:relative;
width: 940px;
margin:0px 4px 4px 4px;
}
#header_navi {
background:#FFF;
border:#000 solid 1px;
height:25px;
width: 940px;
position:relative;
margin:4px 4px 4px 4px;
}
.flags {
margin:4px auto 4px 5px;
outline:none;
text-align:left;
}
#wrap {
min-height:100%;
width:950px;
margin:0 auto -25px;
background:#666;
border:solid;
border-width:0 1px;
}
/* html:before, #wrap:before { /* Opera and IE8 "redraw" bug fix
content:"";
float:left;
height:100%;
margin-top:-999em;
}
* html #wrap { IE6 workaround
height:100%;
} */
h1 {
text-align:center;
/*padding:100px 0 200px; /* padding-bottom equals height of #foot
*/}

#contentbox {
display:table;/*wichtig für orientierung an header und footer-->*/
border:#000 solid 1px;
margin:0 1px 33px 189px;
width: 755px;
height:560px;
background:#FFF;
}
/*html:before, #contentbox:before { Opera and IE8 "redraw" bug fix
content:"";
float:right;
height:100%;
margin-top:-999em;
}
* html #contentbox { IE6 workaround
height:100%;
}
*/

#foot {
height:25px;
width:940px;
background-color:#FFF;
border:#000 solid 1px;
margin:-29px auto; /* negative margin-top equals height of #foot */
}
#footertextright {
float:right;
font-family: Verdana, Geneva, sans-serif;
font-size:10px;
margin-right:20px;
margin-top:7px;
text-align:right;
text-transform:uppercase;
word-spacing:1em;
}
#footertextright p{
text-align:right;
}

#footertextright ul li{
list-style: none;
display:inline;
}
#footertextright a{
text-decoration:none;
color:#000;
}
#footertextright a:hover{
text-decoration:none;
color:#999;
}
</style>

<body>

<div id="wrap">
<div id="header"></div><!-- header ENDE -->

<div id="header_navi">

<div class="flags">
<a href="#"> <img src="images/gb.png" alt="gb" border="1" /></a>
<a href="#"> <img src="images/deu.png" alt="de" border="1" /></a>
<a href="#"> <img src="images/w.png" alt="w" border="1" /></a>
<a href="#"> <img src="images/bra.png" alt="bra" border="1" /></a>
<a href="#"> <img src="images/w2.png" alt="w2" border="1" /></a>
<a href="#"> <img src="images/eu.png" alt="eu" border="1" /></a>
</div>

</div>


<div id="contentbox">

<h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3> <h3>content</h3>
</div>

</div><!-- wrap ENDE -->

<div id="foot">
<div id="footertextright">
<ul>
<li> <a href="kontakt.html">Kontakt |</a></li>
<li><a href="impressum.html">Impressum |</a></li>
<li><a href="sitemap.html">Sitemap |</a></li>
<li><a href="agb.html">AGB |</a></li>
<li><a href="#url">Datenschutz</a></li>
</ul>
</div><!-- footertextright ENDE -->
</div><!-- footer ENDE -->






</body>
</html>


Zuletzt bearbeitet von spuncky am Mi 17.02.2010 13:14, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Darstellung im Firefox vs. Darstellung im Internet Explorer
falsche Darstellung im Internet Explorer
Probleme bei der Darstellung im Internet Explorer
Falsche Darstellung im Internet-Explorer - Ich verzweifle...
Fehlerhafte Darstellung der Webseite im Internet Explorer
probleme im internet explorer beim darstellung? css fehler?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.