Scrollen nur im IE?

minddavid · 22. Februar 2010

Nachdem ich nun alle Wirren von PHP, CSS und Co überwunden habe (oder es zumindest glaube), habe ich ein Problem mit dem Scrollen entdeckt. Nur im IE (8) auf win7 kann ich den gesamten Inhalt sehen. Das gleiche Spiel beim Menü. Alle anderen getesteten bewegen den Balken nicht mal mit Mausklick.
http://www.format-t.com/format.php

Seite selbst:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

 <title>Format-T - Startseite</title>
 
 <?php include ("oben.html"); ?>

<div id="content">Format-T
Inhalt (hier der Übersichtlichkeit halber gekürzt)
</div>



<?php ("unten.html"); ?>

oben.html:

HTML:

  <meta name="keywords" content="Design, Creativ Promotion, Sonnenschutzfolie, Lackschutzfolien, Car-Design">

  <meta name="description" content="Format-T. Design und Folientechnik">

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
  <link href="Format-T-2.css" rel="stylesheet" type="text/css">

  <style type="text/css">
<!--

-->
  </style>
</head>


<body>

<div id="head">
</div>

<div id="menu">
<a style="color: rgb(255, 255, 255);" href="produkte/sonnenschutzfolie">Link 1</a><span> | </span><a style="color: rgb(255, 255, 255);" href="produkte/Lackschutzfolie">Link 2</a><span> | </span><a style="color: rgb(255, 255, 255);" href="produkte/cardesign">Link 3</a><span style="color: rgb(255, 255, 255);"> | </span><a style="color: rgb(255, 255, 255);" href="produkte/creativpromotion">Link 4</a><span style="color: rgb(255, 255, 255);"> | </span><a style="color: rgb(255, 255, 255);" href="produkte/sonnenschutzfolie">Link 5</a><span style="color: rgb(255, 255, 255);"> | </span><a style="color: rgb(255, 255, 255);" href="produkte/sonnenschutzfolie">Link 6</a><span style="color: rgb(255, 255, 255);"> | </span><a style="color: rgb(255, 255, 255);" href="produkte/sonnenschutzfolie">Link 7</a><span style="color: rgb(255, 255, 255);"> | </span><a style="color: rgb(255, 255, 255);" href="produkte/sonnenschutzfolie">Link 8</a><span style="color: rgb(255, 255, 255);"> | </span><a style="color: rgb(255, 255, 255);" href="produkte/sonnenschutzfolie">Link 9</a>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>

<div id="foot"><a style="color: rgb(255, 255, 255);" href="mailto:info@format-t.com">Mail</a> <a style="color: rgb(255, 255, 255);" href="impressum.html">Impressum</a> <a style="color: rgb(255, 255, 255);" href="sitemap.html">Sitemap</a>
</div>

<div id="left">
<div style="text-align: center;"><br>

<big style="color: rgb(255, 255, 255);">L&ouml;sungen f&uuml;r:
</big><br>

</div>


<div style="position: absolute; left: 18px; top: 20px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/hund.html" onmouseover="T1.src='images/hex26.jpg'" onmouseout="T1.src='images/hex4.jpg'" onmousedown="T1.src='images/hex27.jpg'" onmouseup="T1.src='images/hex4.jpg'"><img src="http://www.tutorials.de/forum/images/hex4.jpg" name="T1" alt="Motorsportler" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 60px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/hund.html" onmouseover="T2.src='images/hex29.jpg'" onmouseout="T2.src='images/hex7.jpg'" onmousedown="T2.src='images/hex30.jpg'" onmouseup="T2.src='images/hex7.jpg'"><img src="http://www.tutorials.de/forum/images/hex7.jpg" name="T2" alt="Hundebesitzer" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 100px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/hund.html" onmouseover="T3.src='images/hex32.jpg'" onmouseout="T3.src='images/hex10.jpg'" onmousedown="T3.src='images/hex33.jpg'" onmouseup="T3.src='images/hex10.jpg'"><img src="http://www.tutorials.de/forum/images/hex10.jpg" name="T3" alt="Freizeitsportler" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 140px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/wohnmobil.html" onmouseover="T4.src='images/hex35.jpg'" onmouseout="T4.src='images/hex13.jpg'" onmousedown="T4.src='images/hex36.jpg'" onmouseup="T4.src='images/hex13.jpg'"><img src="http://www.tutorials.de/forum/images/hex13.jpg" name="T4" alt="Wohnmobilbesitzer" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 180px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/handwerker.html" onmouseover="T5.src='images/hex38.jpg'" onmouseout="T5.src='images/hex16.jpg'" onmousedown="T5.src='images/hex39.jpg'" onmouseup="T5.src='images/hex16.jpg'"><img src="http://www.tutorials.de/forum/images/hex16.jpg" name="T5" alt="Handwerker" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 220px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/motorrad.html" onmouseover="T6.src='images/hex41.jpg'" onmouseout="T6.src='images/hex19.jpg'" onmousedown="T6.src='images/hex42.jpg'" onmouseup="T6.src='images/hex19.jpg'"><img src="http://www.tutorials.de/forum/images/hex19.jpg" name="T6" alt="Motorradfahrer" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 260px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/geschaeft.html" onmouseover="T7.src='images/hex44.jpg'" onmouseout="T7.src='images/hex22.jpg'" onmousedown="T7.src='images/hex45.jpg'" onmouseup="T7.src='images/hex22.jpg'"><img src="http://www.tutorials.de/forum/images/hex22.jpg" name="T7" alt="Gesch&auml;ftsleute" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 300px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/spediteure.html" onmouseover="T8.src='images/hex47.jpg'" onmouseout="T8.src='images/hex25.jpg'" onmousedown="T8.src='images/hex48.jpg'" onmouseup="T8.src='images/hex25.jpg'"><img src="http://www.tutorials.de/forum/images/hex25.jpg" name="T8" alt="Spediteure" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 340px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/familie.html" onmouseover="T9.src='images/hex50.jpg'" onmouseout="T9.src='images/hex28.jpg'" onmousedown="T9.src='images/hex51.jpg'" onmouseup="T9.src='images/hex28.jpg'"><img src="http://www.tutorials.de/forum/images/hex28.jpg" name="T9" alt="Familien" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 380px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/senioren.html" onmouseover="T10.src='images/hex53.jpg'" onmouseout="T10.src='images/hex31.jpg'" onmousedown="T10.src='images/hex54.jpg'" onmouseup="T10.src='images/hex31.jpg'"><img src="http://www.tutorials.de/forum/images/hex31.jpg" name="T10" alt="Senioren" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 420px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/freaks.html" onmouseover="T11.src='images/hex56.jpg'" onmouseout="T11.src='images/hex34.jpg'" onmousedown="T11.src='images/hex57.jpg'" onmouseup="T11.src='images/hex34.jpg'"><img src="http://www.tutorials.de/forum/images/hex34.jpg" name="T11" alt="Freaks" align="top" border="0" height="40" width="202">
</a></div>

<div style="position: absolute; left: 18px; top: 460px; width: 202px; height: 40px;">
<a href="http://www.format-t.com/loesungen/boot.html" onmouseover="T12.src='images/hex59.jpg'" onmouseout="T12.src='images/hex37.jpg'" onmousedown="T12.src='images/hex60.jpg'" onmouseup="T12.src='images/hex37.jpg'"><img src="http://www.tutorials.de/forum/images/hex37.jpg" name="T12" alt="Bootsbesitzer" align="top" border="0" height="40" width="202">
</a></div>
 </div>

unten.html:

HTML:

</body>
</html>

Format-T2.css:

Code:

html {
height:100%; max-height:100%; padding:0px;
margin:0px; border:0px; background:#fff; font-size:76%; font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ }
body {height:100%; max-height:100%; overflow:hidden; padding:0px; margin:0px; border:0px;}
#content {position:absolute; overflow:auto; position:absolute; top:200px; bottom:25px; left:245px; right:0px; background:#eee;}
* html #content {top:1px; left:1px; right:30px; bottom:1px; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; border-top:200px solid #fff; border-bottom:25px solid #fff; border-left:245px solid #fff;}
#content p {padding:10px;}
#head {position:absolute; margin:0px; top:0px; left:0px; display:block; width:100%; height:200px; background:url(kopfleiste.jpg) #000; background-position:0px 0px; background-repeat:no-repeat; font-size:4em; overflow:hidden; color:#fff;}
#foot {position:absolute margin:0px; bottom:0px; left:0px; display:block; width:100%; height:25px; font-size:1em; overflow:hidden; text-align:center; background:rgb(170,170,170); color:#fff;}
#left {position:absolute; left:0px; top:200px; bottom:25px; width:245px; background:url(chimney.jpg) rgb(170,170,170); font-size:1.2em; overflow:auto; background-repeat:no-repeat;}
* html #left {height:100%; top:1px; bottom:1px; border-top:200px solid #fff; border-bottom:25px solid #fff; color:#fff; text-align:center;}
#menu {position:absolute; margin:0px; top:180px; left:245px; right:0px; display:block; right:0px; height:20px; width:100%; background:#000; font-size:1.2em; overflow:hidden; color:#fff; a:hover { font-weight:bold; color:white; text-decoration:none; }}
*html #menu {top:1px; left:245px; right:1px; bottom:1px; height:100%; max-height:100%; width:100%; overflow:hidden; position:absolute; border-top:180px solid #fff; border-left:0px solid #fff;}
.bold {font-size:1.2em; font-weight:bold;}
dd {display:none;}

Munch · 25. Februar 2010

Nimm mal den z-index:-3; beim #content raus, dann sollte es gehen.
Versteh eh nicht warum du hier die Z-Reihenfolge definierst ... ?

Grüße
Jan

minddavid · 25. Februar 2010

Hi,

Danke erstmal.
z-index hatte ich probiert, nachdem das Menü im IE nicht sichtbar war.

minddavid · 25. Februar 2010

Trotzdem scheint das Problem noch nicht behoben zu sein.

Munch · 25. Februar 2010

Hey,

also wenn ich mit dem Firefox 3.5 im Firebug (das ist ein addon des Firefox um das HTML, JS usw. zu testen, sehr praktisch!) den z-index entferne, kann ich scrollen. Auf deiner oben genannten Seite ist der index auch noch drin...

Z-Index ist die Positinierung auf der Z-Achse, also quasi in dem Raum. es definiert ob ein Element vor oder hinter einem Element liegen soll. Ich bin mir garnicht sicher ob ein negativer Z-Index überhaupt zugelassen ist. Wenn du den umbedingt benötigts, probier es mal mit positiven Z-Indices.

Ansonsten würde ich dir anraten dein Layout mal zun überdenken. Absolute angaben in einem Layout sind nicht schön und können Konflikte hervorrufen. Nur in seltenden ausnahmefällen macht man sowas. Google mal nach "float layout" und übnerarbeite dein Layout in dieser hinsicht. (Erstes Suchergebnis gleich ein sehr guter Beitrag: http://www.thestyleworks.de/tut-art/layout_div_2.shtml)

GrüßeJan

Dr Dau · 25. Februar 2010

Hallo!

Munch hat gesagt.:
Ich bin mir garnicht sicher ob ein negativer Z-Index überhaupt zugelassen ist.

Zugelassen ja, aber je nach verwendeten Browser wird damit unterschiedlich umgegangen (abhängig vom Hersteller und der Version).
Darum lieber nur positive Werte nehmen.

Gruss Dr Dau

Scrollen nur im IE?

minddavid

Grünschnabel

Munch

Mitglied

minddavid

Grünschnabel

minddavid

Grünschnabel

Munch

Mitglied

Dr Dau

ich wisch hier durch

Neue Beiträge