| Autor |
Nachricht |
spuncky
Threadersteller
Dabei seit: 09.02.2010
Ort: Bremen
Alter: 38
Geschlecht: 
|
Verfasst Mi 17.02.2010 12:12
Titel hilfe bei darstellung im internet explorer 8.0 |
  |
|
Hallo zusammen,
ich habe ein Problem bei der Darstellung vom Layout im ie8 im mf funktioniert alles wunderbar. Ich finde nicht den Fehler.  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>
|
|
|
| |
  |
 |
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 17.02.2010 12:14
Titel
|
|
|
|
Kannst Du nicht bitte das Online Bsp posten.
|
|
| |
|
|
|
Anzeige
|
|
|
spuncky
Threadersteller
Dabei seit: 09.02.2010
Ort: Bremen
Alter: 38
Geschlecht:
|
Verfasst Mi 17.02.2010 12:28
Titel
|
|
|
Hallo Kash,
ne tut mir leid ich habe noch keinen Zugang zum Server, dies sind halt meine ersten versuche mit xhtml/css.
mfg spuncky
|
|
| |
|
|
nicoG
Dabei seit: 25.01.2006
Ort: Freiburg
Alter: -
Geschlecht:
|
Verfasst Mi 17.02.2010 13:00
Titel
|
|
|
| Kash hat geschrieben: | | Kannst Du nicht bitte das Online Bsp posten. |
Warum? geht doch auch so... 
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 
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
|
|
| |
|
|
spuncky
Threadersteller
Dabei seit: 09.02.2010
Ort: Bremen
Alter: 38
Geschlecht:
|
Verfasst Mi 17.02.2010 13:01
Titel
|
|
|
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>
|
|
|
| |
|
|
spuncky
Threadersteller
Dabei seit: 09.02.2010
Ort: Bremen
Alter: 38
Geschlecht:
|
Verfasst Mi 17.02.2010 13:02
Titel
|
|
|
hallo nicoG,
danke für deine Hilfe ich probier es mal.
|
|
| |
|
|
spuncky
Threadersteller
Dabei seit: 09.02.2010
Ort: Bremen
Alter: 38
Geschlecht:
|
Verfasst Mi 17.02.2010 13:08
Titel
|
|
|
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.
|
|
| |
|
|
spuncky
Threadersteller
Dabei seit: 09.02.2010
Ort: Bremen
Alter: 38
Geschlecht:
|
Verfasst Mi 17.02.2010 13:13
Titel
|
|
|
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
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Darstellung im Firefox vs. Darstellung im Internet Explorer
Probleme bei der Darstellung im Internet Explorer
falsche Darstellung im Internet Explorer
Fehlerhafte Darstellung der Webseite im Internet Explorer
Falsche Darstellung im Internet-Explorer - Ich verzweifle...
probleme im internet explorer beim darstellung? css fehler?
|
|
Willkommen auf dem Portal für Mediengestalter
