zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Heutige Beiträge

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Falsche Darstellung mit Internet-Explorer

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.10.2008, 16:55
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 11.10.2008
Beiträge: 4
CHAOSKING befindet sich auf einem aufstrebenden Ast
Standard Falsche Darstellung mit Internet-Explorer
Hallo Community,

Ich hab wahrscheinlich ein Css Problem.
IE 5 bzw. IE 6 stellen die seite
Open Galaxy - Own your Galaxy! nicht richtig dar.
Unter IE 7 passt dann alles.
In anderen Browsern (Firefox, Opera, Safari) wird es auch richtig dargestellt.

Zum Problem:
Naja, eigentlich kann man es schlecht beschreiben.
Hier mal ein Screenshoot von IE 5
Screenshoot

Den Vergleich, wie es richtig aussehen soll findet man in den anderen Browsern.

Man sieht, dass meiner Meinung nach, der Content nicht richtig gefloatet wird.
Anders aber in den neueren Browsern.

CSS / HTML ist valid.

Hier mal CSS
Code:
* { margin: 0; padding: 0; }
body,html {
	background: url(../images/background.jpg) #000;
	color: #eee;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
	margin: 0;
	padding: 0;
	text-align: center;
}
img{
border: none;
}

#pageup {
 clear:both;
 text-align:right;
 margin-bottom:10px;
}


.d2-6-2-6-1{float:left;height:14px;font-size:10px;color:red;}

/*Genereller Aufbau der Seite*/
#header {
	background: url(../images/header.gif);
	height: 130px;
	width: 960px;
	margin: auto;
}

#headerVersion {
	color: #cccccc;
	float: right;
	font-size: 7pt;
	text-align: right;
	width: 60px;
}

#wrap{
     min-height: 100%;
     height: auto !important;
     height: 100%;
     margin: 0 auto !important;
     text-align: center;
   	 border: 4px solid #222222;
	 width: 980px;
	 padding: 6px;
	 clear: right;
	 overflow: hidden;
}

#leftContainer {
	background: #000;
	border: 1px solid #444;
	padding: 3px;
	text-align: left;
	width: 150px;
	float: left;
}

#contentContainer {
	margin: 0px 10px 1px 160px;
	text-align: left;
	width: 805px;
}

#ress {
  	color: #FFFFFF;
    font-size: 15px;
    font-family: Arial;
    text-decoration: none;
}

#content {
	background: #222;
	border: 1px solid #444;
	padding: 5px;
	width: 805px;
}
#footer{
	margin-top: 10px;
	height: 50px !important;
}

.highscore{
	font-size: 18px;
	text-align: center;
}
.friendlist{
	text-align: center;
}
/*Navigation Aufbau*/


.containerText1 {
	background: #000;
	border: 1px solid #444444;
	padding: 3px;
}


.navigationHeader {
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	margin-top: 6px;
}
.navBlue {
	padding: 3px;
	border-bottom: 1px solid #4C4C4C;
}
.navBlue:hover {
	background: #222;
}
.navBlue a {
	color: #2D6691;
	text-decoration: none;
}
.navBlue a:hover {
	color: #4f88b3;
}

.navGreen{
	padding: 3px;
	border-bottom: 1px solid #4C4C4C;
}
.navGreen:hover{
	background: #222;
}
.navGreen a{
	color: #349126;
	text-decoration: none;
}
.navGreen a:hover{
	color: #FF4911;
}
.navOrange {
	padding: 3px;
	border-bottom: 1px solid #4C4C4C;
}
.navOrange:hover {
	background: #222;
}
.navOrange a {
	color: #b98331;
	text-decoration: none;
}
.navOrange a:hover {
	color: #dba553;
}

.navigationSpacerBlue {
	height: 20px;
	margin-top: 3px;
}

.navigationSpacerOrange {
	height: 20px;
	margin-top: 2px;
}

#breadcrumbBlue {
 	border-top: 2px solid #2d6691;
 	border-left: 5px solid #2d6691;
	border-right: 5px solid #2d6691;
	margin-bottom: 7px;
 	color: #fff;
 	font-weight: bold;
 	padding: 3px 5px 3px 10px;
 	text-align: left;
	width: 790px;
}

.headerBlue {
	border-top: 2px solid #2d6691;
	border-left: 5px solid #2d6691;
	color: #fff;
	font-weight: bold;
	margin: 6px 0;
	padding: 3px 5px 3px 5px;
	text-align: left;
}

/*Sonstiges*/
.greenKey a{
	text-decoration: none;
	color: #008000;
}
.greenKey a:active{
	text-decoration: none;
	color: #008000;
} 

.greenKey a:hover{
	color: #038A00;
}

.redKey{
	color: #FF0000;
}

#welcometext{
	font-family: "Lucida Sans Unicode";
	font-size: 16px;
	color: #00BFFF;
}
#welcomeend{
	color: red;
	text-align: center;
}
a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1 {
	background-color: transparent;
	color: #800000;
	font-size: 10pt;
}

select
{
	background: #222;
	color: #ccc;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
}
.inputText
{
	background: #222;
	border: 1px solid #555;
	color: #ccc;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
	padding: 2px;
}

.inputTextSmall
{
	background: #222;
	border: 1px solid #555;
	color: #ccc;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 8pt;
	padding: 1px;
}

.inputButton
{
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
	padding: 0px 6px 0px 6px;
}
#noscript{
text-align: left; 
}


/*Definieren der Overview Text Farbeb*/

.Angriff{
	color: #EE0000;
}
.Spionage{
	color: #FF9933;
}
.Transport{
	color: #99ff66;
}
.return{
	color: #008000;
}
.attack{
	color: #d00000;
}
.spionage{
	color: #CC6600;
}
.transport{
	color: #009900;
}
.Recyceln{
	color: #996600;
}
.Kolonisieren{
	color: #A0C6EB;
}
.Stationieren{
	color: #999999;
}

#planet{
	text-align: right;
}
#error{
	background: #000;
	border: 1px solid #444;
	padding: 5px;
}
/*Ressourcen Anzeige kommt hier*/
.ress table{border-collapse: collapse; margin: 0px 5px 5px 0px;}
.ressfirstrow{background: url(../images/leiste_klein.jpg); border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;}
.resssecondrow{border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;}
.ressthirdrow{border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; text-align: center;}
.ressimgrow{height:22px;width:22px;border-width:0px;}

/*Tooltip Anzeige*/
a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 1000;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 1000;
border: 1px solid;
border-color: #000 #000 #000 #000;
border-left: 5px solid #767676;
padding: 2px 10px 2px 10px;
background: #2C2C2C;
font-family: Verdana, Arial, Helvetica, Sans-serif;
text-align: left;
}
Und hier mal der HTML Code

HTML-Code:
<div id="wrap">
    <div id="leftContainer">
        Navigation
    </div>    
    <div id="contentContainer"> 
        <div id="breadcrumbBlue">Infos über den Standort auf der Seite</div> 
        <div id="content">Content</div>
    </div>
</div>
Könnte mir jemand bitte helfen?

Gruß
CHAOSKING
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.10.2008, 20:08
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
  
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard
Hi,

sieht schwer nach dem Double Margin Bug aus.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.10.2008, 13:53
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 11.10.2008
Beiträge: 4
CHAOSKING befindet sich auf einem aufstrebenden Ast
Standard
Danke für deine Hilfe,
es hat sich aber nichts geändert.
Ich hab jetzt zwar
Code:
#leftContainer {
	background: #000;
	border: 1px solid #444;
	padding: 3px;
	text-align: left;
	width: 150px;
	float: left;
       display: inline;
}
Aber geholfen hat es nicht.
Sieht immer noch so wie auf dem Screenshoot aus.

Gruß
CHAOSKING
Mit Zitat antworten
  #4 (permalink)  
Alt 12.10.2008, 16:17
Benutzerbild von uspri
Erfahrener Benutzer
XHTMLforum-Mitglied
  
Registriert seit: 04.07.2005
Beiträge: 900
uspri sorgt für eine eindrucksvolle Atmosphäreuspri sorgt für eine eindrucksvolle Atmosphäre
Standard
Überprüfe noch mal Deine Abmessungen von dem Contentcontainer und dessen Inhalten. Da sind manche Ungereimtheiten drinnen.
Mit Zitat antworten
  #5 (permalink)  
Alt 12.10.2008, 16:56
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 11.10.2008
Beiträge: 4
CHAOSKING befindet sich auf einem aufstrebenden Ast
Standard
Naja, kann sein das das zu viel ist.
Hier nochmal das CSS was ich nun habe.

Code:
* { margin: 0; padding: 0; }
body,html {
	background: url(../images/background.jpg) #000;
	color: #eee;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
	margin: 0;
	padding: 0;
	text-align: center;
}
img{
border: none;
}

#pageup {
 clear:both;
 text-align:right;
 margin-bottom:10px;
}


.d2-6-2-6-1{float:left;height:14px;font-size:10px;color:red;}

/*Genereller Aufbau der Seite*/
#header {
	background: url(../images/header.gif);
	height: 130px;
	width: 960px;
	margin: auto;
}

#headerVersion {
	color: #cccccc;
	float: right;
	font-size: 7pt;
	text-align: right;
	width: 60px;
}

#wrap{
     min-height: 100%;
     height: auto !important;
     margin: 0 auto !important;
     text-align: center;
   	 border: 4px solid #222222;
	 width: 980px;
	 padding: 6px;
	 overflow: hidden;
}

#leftContainer {
	background: #000;
	border: 1px solid #444;
	padding: 3px;
	text-align: left;
	width: 150px;
	float: left;
}

#contentContainer {
	margin: 0px 10px 0px 5px;
	text-align: left;
	width: 805px;
	float: left;
	padding: 0px;	
}

#ress {
  	color: #FFFFFF;
    font-size: 15px;
    font-family: "Arial";
    text-decoration: none;
}

#content {
	background: #222;
	border: 1px solid #444;
	padding: 5px;
	width: 100%;
}
#footer{
	margin-top: 10px;
	height: 50px !important;
}

.highscore{
	font-size: 18px;
	text-align: center;
}
.friendlist{
	text-align: center;
}
/*Navigation Aufbau*/


.containerText1 {
	background: #000;
	border: 1px solid #444444;
	padding: 3px;
}


.navigationHeader {
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
	margin-top: 6px;
}
.navBlue {
	padding: 3px;
	border-bottom: 1px solid #4C4C4C;
}
.navBlue:hover {
	background: #222;
}
.navBlue a {
	color: #2D6691;
	text-decoration: none;
}
.navBlue a:hover {
	color: #4f88b3;
}

.navGreen{
	padding: 3px;
	border-bottom: 1px solid #4C4C4C;
}
.navGreen:hover{
	background: #222;
}
.navGreen a{
	color: #349126;
	text-decoration: none;
}
.navGreen a:hover{
	color: #FF4911;
}
.navOrange {
	padding: 3px;
	border-bottom: 1px solid #4C4C4C;
}
.navOrange:hover {
	background: #222;
}
.navOrange a {
	color: #b98331;
	text-decoration: none;
}
.navOrange a:hover {
	color: #dba553;
}

.navigationSpacerBlue {
	height: 20px;
	margin-top: 3px;
}

.navigationSpacerOrange {
	height: 20px;
	margin-top: 2px;
}

#breadcrumbBlue {
 	border-top: 2px solid #2d6691;
 	border-left: 5px solid #2d6691;
	border-right: 5px solid #2d6691;
	margin-bottom: 7px;
 	color: #fff;
 	font-weight: bold;
 	padding: 3px 5px 3px 10px;
 	text-align: left;
	width: 790px;
}

.headerBlue {
	border-top: 2px solid #2d6691;
	border-left: 5px solid #2d6691;
	color: #fff;
	font-weight: bold;
	margin: 6px 0;
	padding: 3px 5px 3px 5px;
	text-align: left;
}

/*Sonstiges*/
.greenKey a{
	text-decoration: none;
	color: #008000;
}
.greenKey a:active{
	text-decoration: none;
	color: #008000;
} 

.greenKey a:hover{
	color: #038A00;
}

.redKey{
	color: #FF0000;
}

#welcometext{
	font-family: "Lucida Sans Unicode";
	font-size: 16px;
	color: #00BFFF;
}
#welcomeend{
	color: red;
	text-align: center;
}
a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

h1 {
	background-color: transparent;
	color: #800000;
	font-size: 10pt;
}

select
{
	background: #222;
	color: #ccc;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
}
.inputText
{
	background: #222;
	border: 1px solid #555;
	color: #ccc;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
	padding: 2px;
}

.inputTextSmall
{
	background: #222;
	border: 1px solid #555;
	color: #ccc;
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 8pt;
	padding: 1px;
}

.inputButton
{
	font-family: Arial, Verdana, Helvetica, Sans-serif;
	font-size: 9pt;
	padding: 0px 6px 0px 6px;
}
#noscript{
text-align: left; 
}


/*Definieren der Overview Text Farbeb*/

.Angriff{
	color: #EE0000;
}
.Spionage{
	color: #FF9933;
}
.Transport{
	color: #99ff66;
}
.return{
	color: #008000;
}
.attack{
	color: #d00000;
}
.spionage{
	color: #CC6600;
}
.transport{
	color: #009900;
}
.Recyceln{
	color: #996600;
}
.Kolonisieren{
	color: #A0C6EB;
}
.Stationieren{
	color: #999999;
}

#planet{
	text-align: right;
}
#error{
	background: #000;
	border: 1px solid #444;
	padding: 5px;
}
/*Ressourcen Anzeige kommt hier*/
.ress table{border-collapse: collapse; margin: 0px 5px 5px 0px;}
.ressfirstrow{background: url(../images/leiste_klein.jpg); border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;}
.resssecondrow{border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid;}
.ressthirdrow{border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; text-align: center;}
.ressimgrow{height:22px;width:22px;border-width:0px;}

/*Tooltip Anzeige*/
a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 1000;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 1000;
border: 1px solid;
border-color: #000 #000 #000 #000;
border-left: 5px solid #767676;
padding: 2px 10px 2px 10px;
background: #2C2C2C;
font-family: Verdana, Arial, Helvetica, Sans-serif;
text-align: left;
}
Ich hab meine Seite nun mit 75 Browsern angeschaut, es geht wirklich nur beim Internetexplorer nicht, welcher Version 6 oder früher ist.

Gruß
CHAOSKING
Mit Zitat antworten
  #6 (permalink)  
Alt 12.10.2008, 17:18
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
Alle Browser außer IE <= 6 wissen, dass eine Breitenangabe einzuhalten ist, auch wenn der Inhalt eines Elements zu breit ist.
Dein #content z.B. ist 100% plus Padding breit. Das ist zu viel.
Schau dir doch das Box-Model nochmal genau an.
Im IE 5 hast du es zudem mit dem Box-Model-Bug (<- Google) zu tun. Da ist dein #wrap schonmal kleiner als sonst überall.

Erschwerend kommt noch der überflüssige rechte Margin des #contentContainer hinzu.
Mit Zitat antworten
  #7 (permalink)  
Alt 12.10.2008, 19:38
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 11.10.2008
Beiträge: 4
CHAOSKING befindet sich auf einem aufstrebenden Ast
Standard
Danke.
Das war wirklich das Problem mit diesem Box Model Bug.
Nun funktioniert es
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
internet explorer - falsche darstellung! alejandro (X)HTML 3 23.05.2009 00:55
Falsche Darstellung im Internet Explorer rw1981 CSS 3 06.02.2009 12:51
Falsche Darstellung im Internet Explorer! st0ffy Grafik, Design, Typografie 7 16.02.2008 01:58
Falsche Darstellung im Internet Explorer Janizzle CSS 0 30.08.2007 19:44
Falsche Darstellung im Internet Explorer? (Tabellen) Bluebird CSS 4 10.04.2005 17:28


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:42 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023