Rechte Leiste mit Bilder im Internet Explorer verschoben

J

Julien Brassel

Grünschnabel
Hallo zusammen!

Ich quäle mich schon eine ganz lange Zeit durch dieses Problem aber ich schaffs einfach nicht dies auch zu lösen.

Zu Beginn war die gesamte Seite fehlerhaft dargestellt, mittlerweilen beschränkt sich das Problem auf die rechte Spalte, welche im IE einfach auf die nächste Zeile gerückt wird.

Da ich Mac-User bin kann ich das Problem vielleicht auch schlechter lokalisieren, denn der IE für Mac 5.2 ist nicht der tollste (was IE grundsätzlich ja nicht ist).

Liebe Windows-User, schaut euch die Seite doch bitte mal im IE an, lest denn Quelltext und das CSS...

www.tvoberschan.ch/hp/index.php

CSS Stylesheet unter: http://www.tvoberschan.ch/hp/style.css

Wäre wirklich froh wenn jemand den Fehler finden könnte. Habe schon fast alles probiert
(Spalten verschmälert etc)

Danke und Grüsse
 
Welche Version des IE verwendest du denn? Bei meinem IE9 ist die rechte Seite dann korrekt nach oben gerückt. Allerdings sieht es im Gesamten noch grausam aus...
 
Allerdings fällt mir gerade eines auf: womit hast du denn den HTML code erzeugt. Du hast 3 body-Bereiche, die auch mittendrin geschlossen werden. Außerdem eine ganze menge div-Tags, die geöffnet werden aber nicht wieder geschlossen... eigentlich wundert es mich, dass der code überhaupt in einem Browser funktioniert...
 
wie gesagt verwende ich den IE für Mac, V5.2

Die vielen Body Tags komen wohl daher, dass ich den hauptteil der Seite in "word" gebaut habe, mit der Idee, dass andere, welche HTML und co nicht schreiben können, die Seite editieren können. Ich wollte ein Gerüst, das sich einfach editieren lässt und ich nicht mehr arbeiten muss...

Dafür brauch ich wohl eine andere Lösung...
 
Also, ich habe mir mal die Mühe gemacht und habe die CSS und den HTML code aufgeräumt. Bei mir sieht es jetzt gut aus... Versuche es doch einfach mal damit...

CSS:
body {
background: url(url("http://www.tvoberschan.ch/hp/img/background.jpg")) no-repeat left top;
font-family: arial, sans-serif;
}

div.boxback {
height: 880px;
width: 910px;
background: black;
border: 3px solid #ffd700;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
}

div.box1 {
margin: 0px 0px 0px 4px;
height: 100px;
width: 900px;
border: 1px solid black;
background: black;
-moz-border-radius: 20px 20px 0px 0px;
-khtml-border-radius: 20px;
}

.logo {
margin: 5px 5px 5px 10px;
height: 90px;
}

.sponsor {
margin: 5px 0px 5px 5px;
width: 150px;

}

div.boxnavi {
margin: 0;
height: 25px;
width: 910px;
border: 1px solid #ffd700;
background: #ffd700;
}

h1 {
color: black;
font-size: 9pt;
text-decoration: none;
float: left;
font-weight: 900;
}

a {
color: black;
text-decoration: none;
font-size: 9pt;
font-weight: 900;
}

a.navi {
color: black;
text-decoration: none;
font-size: 9pt;
margin: 0px 30px 5px 30px;
font-weight: 900;
}

a.navi:hover {
color: white;
background: black;
}

div.column1 {
float: left;
width: 200px;
background: black;
}

div.boxside1, div.boxside2 {
margin: 50px 0px 0px 5px;
width: 189px;
background: black;
border: 3px solid #ffd700;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
}

div.boxside1 { height: 350px; }
div.boxside2 { height: 200px; }

div.boxsidenavi {
margin: 0;
padding: 0px 0px 0px 4px;
width: 184px;
height: 24px;
background: #ffd700;
border: 2px solid #ffd700;
}

h2 {
color: black;
font-size: 9pt;
text-decoration: none;
margin: 4px 24px 0px 16px;
float: left;
font-weight: 400;
}

div.boxsidecont1, div.boxsidecont2 {
margin: 16px 0px 0px 5px;
width: 176px;
background: black;
}

div.boxsidecont1 { height: 250px; }
div.boxsidecont2 { height: 150px; }

h3 {
color: white;
font-size: 9pt;
text-decoration: none;
margin: 5px 0px 0px 0px;
font-weight: 100;
}

span.content {
color: white;
font-size: 9pt;
text-decoration: none;
margin: 5px 0px 0px 0px;
font-weight: 100;
}

a.kontakt {
color: gray;
text-decoration: none;
font-size: 9pt;
font-weight: 900;
}

div.column2 {
float: left;
width: 500px;
background: black;
}

div.boxunder {
height: 36px;
width: 498px;
border: 1px solid black;
background: black;
}

div.boxmain {
overflow: auto;
background: black;
padding: 0px 20px 20px 20px;
height: 650px;
width: 490px;
}

h4 {
color: white;
font-size: 9pt;
margin: 1px 1px 0px 1px;
float: left;
font-weight: 400;
}

div.column3 {
float: right;
width: 165px;
background: black;
padding: 50px 5px 0px 10px;
}

div.boxfoot {
margin: 0px 0px 0px 225px;
padding: 0px 0px 0px 160px;
height: 10px;
width: 250px;
background: #000000;
z-index: 1;
-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px;
}

.floatstop { clear: both; }

______________________________________________________________
HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<head>
<title>&copy TV Oberschan - herzlich willkommen</title>
<script type="text/javascript" language="JavaScript1.1"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<div class="boxback">
<div class="box1"><img src="img/Logo.jpg" id="logo"></div>
<div class="boxnavi">
<a href="index.php" class="navi">home</a>
<a href="geschichte.php" class="navi">geschichte</a>
<a href="verein.php" class="navi">verein</a>
<a href="jahresprg.php" class="navi">jahresprogramm</a>
<a href="bilder.php" class="navi">bilder</a>
<a href="http://8791.my-gaestebuch.de/" class="navi" target="_blank">g&auml;stebuch</a>
<a href="kontakt.php" class="navi">kontakt</a>
<a href="links.php" class="navi">links</a>
</div>
<div class="column1">
<div class="boxside1">
<div class="boxsidenavi"><h2><b>news</b></h2></div>
<div class="boxsidecont1">
<p align="left">
<h3><b>7.1.11</b></h3>
<span class="content">
<br>2011 - Unser Jubil&auml;umsjahr!
<br>Die Homepage kleidet sich in diesem Jahr entsprechend festlich in GOLD
</span>
</p>
<p align="left">
<h3><b>9.10..10</b></h3>
<span class="content">
<br>Endlich funktioniert die Homepage wieder! Wir m&ouml;chten uns aufrichtig bei Euch f&uuml;r den langen Unterbruch entschuldigen. Aufgrund einiger Missverst&auml;ndnis mit dem Domain-Verwalter wurde unsere Homepage heruntergefahren. Wir versichern Euch, dass dies nicht mehr vorkommen wird!
</span>
</p>
</div>
</div>
<div class="boxside2">
<div class="boxsidenavi"><h2><b>n&auml;chste Anl&auml;sse</b></h2></div>
<div class="boxsidecont2">
<p align="left">
<h3><b>Februar</b></h3>
<span class="content">
<br>Wartauer Fasnacht
</span>
</p>
<p align="left">
<h3><b>Februar</b></h3>
<span class="content">
<br>Hauptversammlung
</span>
</p>
</div>
</div>
<br>
</div>
<div class="column2">
<div class="boxunder">
</div>
<div class="boxmain">
<p align="center">
<font face="arial" style="font-size: 12pt; font-weight: 900; color: white">herzlich willkommen auf tvoberschan.ch</font>
</p>
<div class="Section1">
<p align="center">
<img src="img/125years.jpg" height="300">
</p>
<p class="MsoNormal" style="margin-left:30pt; margin-right:30pt">
<span style="font-size:9.0pt; font-family:Arial; color:white">Der Turnverein Oberschan freut sich, Sie hier begr&uuml;ssen zu d&uuml;rfen!</span>
</p>
<p class="MsoNormal" style="margin-left:30pt; margin-right:30pt">
<span style="font-size:9.0pt; font-family:Arial; color:white">Auf dieser Seite finden Sie alle Informationen, die Sie von uns brauchen.
<br><br>Besuchen Sie uns auch auf Facebook:
</span>
</p>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FTV-Oberschan-1886%2F153906437993957&amp;width=300&amp;colorscheme=dark&amp;show_faces=false&amp;stream=false&amp;header=false&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:62px; margin-left:30pt" allowTransparency="true">
</iframe>
<br>F&uuml;r Feedbacks zur Website oder allgemeine Fragen steht ein Kontaktformular (kontakt, oben) zur Verf&uuml;gung.
<p class="MsoNormal" style="margin-left:30pt; margin-right:30pt">
<span style="font-size:9.0pt; font-family:Arial; color:white">Freundliche sportliche Gr&uuml;sse
<br>Turnverein Oberschan
</span>
</p>
</div>
</div>
</div>

<div class="column3"><h3><b><i>neuste Bilder:</i></b></h3>
<a href="Fotos/Berner2010/DSC04568_picnik.jpg" rel="lightbox[berner]" title="Der erste Auftritt der Turnvereine Oberschan im Jahr 2010">
<img src="Fotos/Berner2010/DSC04568_picnik.jpg" id="sponsor" /></a>
<br><h3>Berner Seel&auml;ndisches 2010
<br> leider nur Barren</h3>
<a href="Fotos/Berner2010/DSC045651.jpg" rel="lightbox[berner]"></a>
<a href="Fotos/Berner2010/DSC045691.jpg" rel="lightbox[berner]"></a>
<a href="Fotos/Berner2010/DSC045701.jpg" rel="lightbox[berner]"></a>
<a href="Fotos/Berner2010/DSC045731.jpg" rel="lightbox[berner]"></a>
<a href="Fotos/Berner2010/DSC045771.jpg" rel="lightbox[berner]"></a>
<br>
<a href="Fotos/Berner2010/DSC04568.jpg" rel="lightbox[beni]" title="1998 - Der erste Aerobic-Cup. Der klare Sieg vom TV Oberschan vor dem TV Weite.">
<img src="Fotos/Beni/aerobic98.jpg" id="sponsor"></a>
<br><h3>Das neue Ehrenmitglied:
<br> Beni - einst und jetzt</h3>
<a href="Fotos/Beni/IMG_4876.jpg" rel="lightbox[beni]" title="Daumen hoch f&uuml;r Beni! Sein Einsatz war immer top!"></a>
<a href="Fotos/Beni/IMG_4877.jpg" rel="lightbox[beni]" title="Herzlichen Dank!"></a>
<br>
<br>
<br>
<br><h3><b><i>Sponsoren:</i></b></h3>
<a href="http://www.lippuner-emt.ch" target="_blank">
<img src="img/lippuner.jpg" id="sponsor"></a>
<br>
<br>
<br><h3><i>Hosting:</i></h3>
<a href="http://www.gatelcom.ch" target="_blank">
<img src="img/Logodesign_Galbier_Telecom-.jpg" id="sponsor"></a>
</div>

<div class="boxfoot">
<font face="arial" style="font-size:8.0pt" color="white">&copy TV Oberschan, 1886-2011
</font>
</div>
</div>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück