Defekte Ansicht durch IE 7.0

AdministratorDr · 16. Juli 2007

Hab bisher den IE 6.0 benutzt und damit meine Website, nach einer Änderung, betrachtet. Jetzt stell ich fest, dass der IE 7.0 meine Seite komplett anders darstellt, jedenfalls betrifft das die Seiten, in denen ich Bilder anzeigen lasse.

Der Fehler äußert sich so, dass ca. 1/3 der Bilschirmfläche weiß ist und erst ab da die Bilder angezeigt werden. Das bedeutet, jeder der auf der Seite die Bilder schauen will, muss erstmal horizontal scrollen. Ziemlich blöd das ganze.

Hab mir den Quelltext jetzt genauer angeschaut, aber ich finde nach wie vor keinen Fehler. Mein Design basiert auf CSS.

Hat jemand Lust, sich das ganze mal anzuschauen? Ich weiß nicht was der Internet Explorer 7 da anders umsetzt?

Gruß,
Dominik

Henry6310 · 16. Juli 2007

Hi,
zum Anschauen wäre eine Adresse hilfreich

Gruß
Henry

AdministratorDr · 17. Juli 2007

Hast eine PN.

matschi · 17. Juli 2007

Es kann durchaus sein das der IE 7 einiges anders Interpretiert wie der IE 6.
Es gibt sonst auch die möglichkeit deine Browserweiche einzubauen.
Das heißt: das der jeweilige browser schaut wechle css er laden muss.
zb ie6.css, ie7.css

das ganze würde dann so aussehen:

Code

<style type="text/css">@import url(modern_ohne_ie.css) all;</style>


  <!--[if IE 6]>
    <style type="text/css">@import url(ie6.css);</style>
  <![endif]-->


  <!--[if IE 7]>
    <style type="text/css">@import url(ie7.css);</style>
  <![endif]-->

Alles anzeigen

nach dem viel weiss ist könnte es eventuell an längenangaben ect liegen.

Wählfernsprecher · 17. Juli 2007

Moin,

auch wenn ich jetzt keine konkreten Tips geben kann - ich würde den Fehler im eigenen Quelltext suchen. Der MSIE 7.0 interpretiert den Quellcode nämlich etwas "richtiger" als der MSIE 6.0.
Schau die Seite doch mal mit gescheiten Browsern wie Mozilla/Firefox/SeaMonkey und Opera (8 oder 9) an, ob der Anzeigefehler dabei auch besteht. Jene Browser interpretieren den Quelltext i.a. richtig - im Gegensatz zum MSIE.

AdministratorDr · 17. Juli 2007

Beim Firefox hab ich komischerweise das gleiche Problem. :confused: Ist mir vorher garnicht aufgefallen.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Kein Titel</title>
<meta />
<meta />
<link rel="stylesheet" type="text/css" href="default.css" />
<meta name="generator" content="namo webeditor" />
</head>
<body>


<div id="header">
	<div id="header_inner">
		<h1><span><font color="#85ac1e">Meine.</font><font color="white">Homepage</font></span></h1>
        <p>&nbsp;</p>
	</div>
</div>


<div id="main">


	<div id="lcol">
		<div id="menu">
			<ul>
				<li>&nbsp;</li>
			</ul>
		</div>
		<div id="menu_end"></div>


		<div id="lcontent">

			<p>&nbsp;</p>
			<div class="divider"></div>


			<p>.</p>
		</div>
	</div>


	<div id="rcol">
		<div id="rcontent">

<p><font size="2" face="verdana">Hier seht ihr einige Bilder von der schönen Insel Sylt. </font><font size="2"></font></p>

            <p><img src="images/sylt/sylt01.jpg" width="800" height="600" border="0" /></p>
            <p><img src="images/sylt/sylt02.jpg" width="600" height="800" border="0" /></p>
                       <p>&nbsp;</p>
            <p><font size="2" face="verdana"><a href="sylt2.html" target="_self">Hier geht es weiter</a></font><font 
size="2"></font></p>

			<div class="box">
				<div class="box_inner">
					<p><font size="2">Zuletzt überarbeitet am 01.02.07</font></p>
				</div>
			</div>






			<div class="divider"></div>
			<p>
				&nbsp;
			</p>


		</div>
	</div>


</div>


<div id="footer">
	© 
</div>


</body>
</html>
			<center><span style="width: 100%; font-family: helvetica; font-size: 6px;">

			</span></center><br /><br />

Alles anzeigen

So sieht u.a. eine der betroffenen HTML-Seiten aus.

matschi · 17. Juli 2007

die css datei währe noch interssant

AdministratorDr · 18. Juli 2007

Die CSS Datei:

Code

*
{
margin: 0px;
padding: 0px;
}


body
{
background-color: #fff;
color: #9f9f9f;
font-size: 11px;
font-family: "trebuchet ms", helvetica, sans-serif;
}


a
{
text-decoration: underline;
color: #93B300;
}


a:hover
{
text-decoration: none;
color: #fff;
background: #D3E378 url('images/bbg1.gif') repeat-x;
}


strong
{
background: inherit;
color: #50514D;
}


#header
{
width: 100%;
height: 104px;
background-color: #4d4d4d;
background: url('images/a1.gif') repeat-x;
color: #ffffff;
}


#header_inner
{
position: relative;
width: 680px;
height: 104px;
margin: 0px auto;
}


#header_inner h1
{
background: inherit;
position: absolute;
left: 0px;
bottom: 10px;
text-transform: lowercase;
font-size: 39px;
color: #fff;
font-weight: normal;
letter-spacing: -2px;
}


#header_inner h1 span
{
background: inherit;
color: #DADADA;
}


#slogan
{
background: inherit;
position: absolute;
right: 0px;
bottom: 25px;
color: #DADADA;
text-transform: lowercase;
font-size: 13px;
}


#main
{
padding-top: 20px;
position: relative;
width: 680px;
margin: 0px auto;
padding-bottom: 10px;
}


#menu ul
{
list-style: none;
margin: 0px;
}


#menu li
{
background: none;
padding: 0px;
font-weight: bold;
}


#menu a
{
display: block;
position: relative;
width: 168px;
height: 27px;
margin-bottom: 1px;
text-decoration: none;
background: inherit;
background-image: url('images/bbg0.gif');
padding-left: 17px;
padding-top: 11px;
color: #636363;
text-transform: lowercase;
font-size: 13px;
}


#menu a span
{
position: absolute;
right: 0px;
margin-top: 5px;
margin-right: 15px;
width: 7px;
height: 7px;
background: url('images/x1.gif') no-repeat; 
}


#menu a:hover span
{
position: absolute;
right: 0px;
margin-top: 5px;
margin-right: 15px;
width: 7px;
height: 7px;
background: url('images/x2.gif') no-repeat;
}


#menu a:hover
{
background: inherit;
color: #fff;
background-image: url('images/bbg1.gif');
}


#menu_end
{
height: 30px;
background-image: url('images/a2.gif');
}


h1
{
background: inherit;
color: #50514D;
text-transform: lowercase;
font-size: 26px;
}


h1 span
{
background: inherit;
color: #85AC1E;
}


h1 span sup
{
background: inherit;
color: #85AC1E;
font-size: 14px;
}


h3
{
margin-top: 30px;
background: inherit;
color: #50514D;
font-size: 15px;
text-transform: lowercase;
height: 34px;
background: url('images/a3.gif') repeat-x 0px 17px;
}


h3 span
{
background: inherit;
color: #85AC1E;
}


h3.first
{
margin-top: 0px;
}


#lcol
{
position: relative;
width: 185px;
float: left;
}


#lcontent
{
position: relative;
padding: 0px 15px 0px 15px;
}


#rcontent
{
position: relative;
padding: 25px 20px 0px 20px;
}


ul
{
list-style: none;
}


li
{
background: url('images/x1.gif') no-repeat 0px 5px;
padding-left: 15px;
}


p
{
margin-bottom: 25px;
text-align: justify;
line-height: 20px;
}


#lcol p
{
font-size: 10px;
line-height: 16px;
margin: 0px;
}


.divider
{
font-size: 0px;
position: relative;
border-bottom: solid 1px #F5F5F5;
height: 1px;
width: 100%;
margin: 10px 0px 10px 0px;
}


.summary
{
text-align: right;
font-style: italic;
}


ul.divided li
{
border-top: solid 1px #F5F5F5;
margin-top: 4px;
padding-top: 4px;
background-position: 0px 9px;
}


ul.divided li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
background-position: 0px 5px;
}


#rcol
{
position: relative;
margin-left: 190px;
width: 485px;
background-image: url('images/a2.gif');
background-repeat: repeat-x;
}


#slogan2
{
font-size: 14px;
position: relative;
top: -5px;
}


.box
{
position: relative;
border: dashed 1px #dadada;
margin-top: 15px;
background: inherit;
color: #AAB165;
}


.box h2
{
background: inherit;
color: #6C7425;
text-transform: lowercase;
font-weight: normal;
font-size: 18px;
margin-bottom: 5px;
}


.box p
{
font-size: 10px;
line-height: 16px;
margin: 0px;
}


.box_inner
{
border: solid 1px #fff;
padding: 15px;
background: #FFFFE9 url('images/a4.gif') repeat-x;
color: inherit;
}


.captioned_image
{
position: relative;
padding-bottom: 15px;
float: left;
margin-right: 17px;
}


.captioned_image div
{
position: absolute;
font-size: 9px;
bottom: 0px;
left: 0px;
}


#footer
{
clear: both;
background: url('images/a2.gif') repeat-x;
width: 680px;
margin: 0px auto;
margin-bottom: 25px;
padding-top: 10px;
text-align: center;
text-transform: lowercase;
}

Alles anzeigen

Mr. A · 7. August 2007

Hi,

mir hat bei solchen Website-Layout-Geschichten das Addon Firebug für den Firefox immer sehr geholfen. Probiers mal aus, vielleicht siehst Du dann, welcher Bereich Deiner Seite betroffen ist.

Gruß, Mr. A

Defekte Ansicht durch IE 7.0

Jetzt mitmachen!

Teilen