Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS DIV Problem mit IE 6“

M

martyrer

Guest

Hallo ich bastle grad an der Seite meines Praktikumsbetriebes und hab dabei alles von Tabellen design auf divs umgestellt.

geht auch soweit nur im ie 6 nich :/ das menü geht dann nicht und mein #rand div bugsiert den .inhalt div unter sich so das dann ein riesen loch ist :(


Code:
img { behavior:url("pngbehave.htc");}
a:link {color:black; text-decoration:underline}
a:visited {color:black; text-decoration:underline}
a:active {color:black; text-decoration:underline overline}
a:hover {color:black; text-decoration:underline overline}
body {
 scrollbar-3dlight-color: #fee703;
 scrollbar-arrow-color: #cf3408;
 scrollbar-darkshadow-color: #fee703;
 scrollbar-face-color: #fee703;
 scrollbar-highlight-color: #fee703;
 scrollbar-shadow-color: #cf3408;
 scrollbar-track-color: #fee703;
    behavior:url("csshover.htc");
    position:absolute;
    background-image: url(Bilder/bgmuster.jpg);
    background-repeat: repeat;
    margin: 0 auto;
    margin-left:4%;
    margin-right:4%;
    width: 92%;
    min-width:92%;
    margin-bottom:5px;
    
    }
.rothead{
min-height:100%; padding-right:10px; min-width:100%; height:100% color: #996633; background-color:#CE3209; text-align:right;    }
.rand{ clear:both; position:fixed; margin:0; padding:0; margin-top:80px; z-index:0; }
.kopf {
position:relative; margin:0;
}
.menu4 {
text-align:left; margin:auto; margin-top:110px;font-family: verdana, sans-serif; position:relative; font-size:0.85em; background:#fee703; width:auto; height:27px;
}
.menu4 ul {
list-style-type: none;padding:0; margin:0; 
}
.menu4 ul li {
float:left; position:relative; color:#cf3408; font-weight:600; 
}
.menu4 ul li a, .menu4 ul li a:visited {
display:block; color:#cf3408; text-decoration:none; width:70px; text-align:left; height:27px; color:#cf3408; padding-left:20px; padding-right:20px; line-height:27px;
}
* html .menu4 ul li a, .menu4 ul li a:visited {
width:100px; w\idth:70px; color:#cf3408;
}

.menu4 ul li ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden; color:#cf3408; background:#fee703;
}
.menu4 table {
margin:-1px; border-collapse:collapse; font-size:1em; background:#ffffff;
}
/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu4 ul li:hover a,
.menu4 ul li a:hover {
color:#cf3408; text-decoration:underline overline; border:0; 
}
.menu4 ul li:hover ul,
.menu4 ul li a:hover ul {
visibility:visible; width:170px; height:auto; position:absolute; top:27px; left:-1px;  border:1px solid #cf3408; overflow:visible; 
}
.menu4 ul li:hover ul li a,
.menu4 ul li a:hover ul li a {
display:block;background:transparent; text-decoration:none; color:#cf3408; height:auto; line-height:1.5em; padding:5px 10px 5px 35px; width:170px; w\idth:125px;
}
.menu4 ul li:hover ul li a.drop,
.menu4 ul li a:hover ul li a.drop {
display:block; color:#cf3408; height:auto; line-height:1.5em; padding:5px 10px 5px 35px; width:140px; w\idth:125px;
}
.menu4 ul li:hover ul li ul,
.menu4 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden; 
}
.menu4 ul li:hover ul li a:hover,
.menu4 ul li a:hover ul li a:hover {
color:#cf3408; text-decoration:underline overline; 
}
.menu4 ul li:hover ul li:hover ul,
.menu4 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#cf3408; left:166px; height:auto; border:1px solid #909;
}
.menu4 ul li:hover ul li:hover ul.left,
.menu4 ul li a:hover ul li a:hover ul.left {
left:-166px;
}
.menu4 ul li:hover ul li:hover ul li a,
.menu4 ul li a:hover ul li a:hover ul li a {
display:block; color:#cf3408; height:auto; line-height:1.5em; padding:5px 10px 4px 35px; width:170px; w\idth:140px; 
}
* html .menu4 ul li a:hover ul li a:hover ul li a {padding:4px 10px 4px 35px;}

.menu4 ul li:hover ul li:hover ul li:hover a,
.menu4 ul li a:hover ul li a:hover ul li a:hover {
color:#cf3408; text-decoration:underline overline; 
}

#header {
   height: 121px;
   width: 80%;
   position: static;
   border: 0px;
}
.re {
    background:url(Bilder/re.png) right no-repeat;  
}
.li {
    background:url(Bilder/li.png) left no-repeat;width:auto;
}
.ro {
    background:url(Bilder/or.png) top right no-repeat; margin-top:10px; margin-left:0px; 
}

.lo {
    background:url(Bilder/ol.png) top left no-repeat;margin-left:0px; 
}

.ru {
    background:url(Bilder/ur.png) bottom right no-repeat;margin-left:0px; 
}

.lu {
    background:url(Bilder/ul.png) bottom left no-repeat; padding:10px;
}
.inhalt { margin-left:160px; margin-bottom:5px;
}
#

und hier die index.php ohne den phpcode ...
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">
<?php echo "<?xml version='1.0' encoding='utf-8'?>"; ?>
<head>
<title>hauptseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="telko.css">
<script src="telko.js" type="text/javascript"></script>
<style type="text/css" media="screen"><!--
a#link<?php echo $_GET['seite'] ?> { color:#fee703; background-color:#cf3408 }
--></style>
</head>
<body >
<!-- ImageReady Slices (hauptseite.psd) -->
<?php include ("kopf.php"); ?>

<div class="rand"><img src="Bilder/frau.png" height="230" width="156" alt="telko" /><br />
<font size="-2">&nbsp;&nbsp;&nbsp;&copy;2007 Telko GmbH</font></div>
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">

</div></div></div></div></div>
<!-- End ImageReady Slices -->
</body>
</html>
danke schon mal im vorraus und nicht wundern wenns ein bischen konfus ist bin noch am durchsteigen ^^ kanns auch grade schlecht hochladen weil ich keine passwörter krieg :/

grüße m. :)


edit hier ein bild was kaputt ist ... normal ist das bild mit der frau links einfach mit in dem gelben ... also das gelbe mit dem inhalt ist genau unter dem menü
 
Zuletzt bearbeitet von einem Moderator:
H

HoLgAy

Guest

AW: CSS DIV Problem mit IE 6

Hi,

dein Problem ist das "position: fixed;".
Der IE kann diese Eigenschaft nicht interpretieren.

Wenn in dem gelben Bereich links die nette Dame und rechts dein Inhalt dargestellt werden soll kommst du um ein "float" nicht rum.

das würde im groben etwa so aussehen:

<div name="mainContent" style="width: 800px;">
<div name="topNav">Hier ist die Navi oben</div>
<div name="leftContent" style="width: 200px;float: left;">Hier kommt die Frau</div>
<div name="rightContent" style="width: 600px; float: left;">Hier ist dein Inhalt</div>
<div name="clearBugFix" style="clear: both;height: 0; width: 0; line-height: 0;"></div>
</div>

Das sollte als "Grundgerüst" reichen um dein Problem zu beheben - ansonsten probieren und fragen.

greetZ
HoLgAy
 
M

martyrer

Guest

AW: CSS DIV Problem mit IE 6

danke schonmal ich werd das dann mal probieren und bescheidsagen obs ging :) haste auch eine idee mit dem menü ?

das problem ist da das man mit der maus über ein element geht und auch das normal rausklappt aber wenn man dann nach unten fährt geht es weg weil er nich schnell genug auf das nächste <a> kommt .. glaub ich zumindest .. das liegt irgendwie and der falschen link interpertierung des ie6 bin da aber immer nur am friemeln...

hier noch der code aus der kopf.php

Code:
<div style="position:absolute;margin-top:15px;"><img src="Bilder/logo.png" width="381" height="79"></div>
<div style="position:absolute;margin-left:65%; margin-right:50px; margin-top:20px;"><img width="315" height="63" src="Bilder/profkomu.png"/></div>
<div class="kopf">
<div class="re">
<div class="li">
<div style="background-color:#fee703;margin-left:5px; margin-right:5px; padding:0;">
<div class="menu4">
<div id="inhalt"> <ul>
    <li class="home"><a id="link" href="index.php" >Start</a>
    <ul>
        <li class="substa1"><a id="linksysteme" href="index.php?seite=systeme"  >Systeme</a></li>
            <li class="substa3"><a id="linkdaten" href="index.php?seite=daten">Daten</a></li>
            <li class="substa2"><a id="linksicherheit" href="index.php?seite=sicherheit">Sicherheit</a></li>
        </ul>
    </li>
<li ><a id="linknews" href="index.php?seite=news" class="drop">News<!--[if IE]><!--></a><!--<![endif]--></li>
    <li ><a class="drop" >Produkte<!--[if IE]><!--></a><!--<![endif]-->
    <!--[if IE]><table><tr><td><![endif]-->
    <ul>
        <li ><a class="drop">Kommunikation</a>
        <!--[if IE]><table><tr><td><![endif]-->
        <ul>
        <li ><a id="linkdigital" href="index.php?seite=digital">Digital</a></li>
            <li ><a id="linkip" href="index.php?seite=ip">IP</a></li>
            <li ><a id="linkmobil" href="index.php?seite=mobil">Mobil</a></li>
            
            <li ><a id="linktk" href="index.php?seite=tk">TK-Anlagen</a></li>
        </ul></li>
        <!--[if IE]></td></tr></table></a><![endif]-->
        <li><a id="linkdaten2" href="index.php?seite=daten2">Daten</a></li>
        <li><a id="linksich2" href="index.php?seite=sich2">Sicherheit</a></li>    
        <li><a id="linkpflege" href="index.php?seite=pflege">Pflege & Notruf</a>
        </li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="drop">Service<!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if IE]><table><tr><td><![endif]-->
    <ul class="left">
        <li><a id="linkgenerell" href="index.php?seite=generell">Generell</a></li>
        <li><a id="linkfern" href="index.php?seite=fern">Fernwartung</a></li>
        <li><a id="linkdownloads" href="index.php?seite=downloads">Downloads</a></li>
    </ul>
    <!--[if IE]></td></tr></table></a><![endif]-->
    </li>
    <li><a id="linkkontakt" href="index.php?seite=kontakt">Kontakt</a></li>
    <li><a id="linkimpressum" style="z-index:1" href="index.php?seite=impressum">Impressum</a></li>


</ul>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:history.back()"><img height="19" width="50" vspace="4" hspace="3" border="0" src="Bilder/back.png" /></a></div></div>
</div></div></div></div></div>
was auch noch ein problem darstellt ist die banner anordnung ... ich hab es nicht geschafft das der "prof.. komm." banner immer sich rechts am rand mit 20 px margin orientiert immoment hab ich da nur irgendwas mit % gebaut was aber eigentlich nicht so gewollt ist :(
 
M

martyrer

Guest

AW: CSS DIV Problem mit IE 6

HABS SCHON :)

lag an dem ***** bugfix div :/

So bin jetzt ein ganzes stück weiter :) das menü geht dank abgeänderter conditional comments und das mit dem float hab ich auch gebacken gekriegt einziges problem immoment ist ein komischer gelber rand der aus dem "nichts" unten auftaucht natürlich nur im ie :)

hier ein bild

Code:
img { behavior:url("pngbehave.htc");}
a:link {color:black; text-decoration:underline}
a:visited {color:black; text-decoration:underline}
a:active {color:black; text-decoration:underline overline}
a:hover {color:black; text-decoration:underline overline}
body {
 scrollbar-3dlight-color: #fee703;
 scrollbar-arrow-color: #cf3408;
 scrollbar-darkshadow-color: #fee703;
 scrollbar-face-color: #fee703;
 scrollbar-highlight-color: #fee703;
 scrollbar-shadow-color: #cf3408;
 scrollbar-track-color: #cf3408;
    behavior:url("csshover.htc");
    position:absolute;
    background-image: url(Bilder/bgmuster.jpg);
    background-repeat: repeat;
    margin: 0 auto;
    margin-left:4%;
    margin-right:4%;
    width: 92%;
    min-width:92%;
    margin-bottom:10px;
    
    }
.rothead{
min-height:100%;  padding-right:10px; min-width:100%; height:100% color: #996633; background-color:#CE3209; text-align:right;    }

.kopf {
position:relative; margin:0;
}
.menu4 {
text-align:left; margin:0 auto; margin-top:110px;font-family: verdana, sans-serif; position:relative; font-size:0.85em; background:#fee703; width:auto; height:27px;
}
.menu4 ul {
list-style-type: none;padding:0; margin:0; 
}
.menu4 ul li {
float:left; position:relative; color:#cf3408; font-weight:600; 
}
.menu4 ul li a, .menu4 ul li a:visited {
display:block; color:#cf3408; text-decoration:none; width:70px; text-align:left; height:27px; color:#cf3408; padding-left:20px; padding-right:20px; line-height:27px;
}
* html .menu4 ul li a, .menu4 ul li a:visited {
width:100px; w\idth:70px; color:#cf3408;
}

.menu4 ul li ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden; color:#cf3408; background:#fee703;
}
.menu4 table {
margin:-1px; border-collapse:collapse; font-size:1em; background:#ffffff;
}
/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu4 ul li:hover a,
.menu4 ul li a:hover {
color:#cf3408; text-decoration:underline overline; border:0; background-color:#fee703;
}
.menu4 ul li:hover ul,
.menu4 ul li a:hover ul {
visibility:visible; width:170px; height:auto; position:absolute; top:27px; left:-1px;  border:1px solid #cf3408; overflow:visible; 
}
.menu4 ul li:hover ul li a,
.menu4 ul li a:hover ul li a {
display:block;background:transparent; text-decoration:none; color:#cf3408; height:auto; line-height:1.5em; padding:5px 10px 5px 35px; width:170px; w\idth:125px;
}
.menu4 ul li:hover ul li a.drop,
.menu4 ul li a:hover ul li a.drop {
display:block; color:#cf3408; height:auto; line-height:1.5em;  padding:5px 10px 5px 35px; width:140px; w\idth:125px;
}
.menu4 ul li:hover ul li ul,
.menu4 ul li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:0; height:0; overflow:hidden; 
}
.menu4 ul li:hover ul li a:hover,
.menu4 ul li a:hover ul li a:hover {
color:#cf3408; text-decoration:underline overline; 
}
.menu4 ul li:hover ul li:hover ul,
.menu4 ul li a:hover ul li a:hover ul {
visibility:visible; position:absolute; top:0; color:#cf3408; left:166px; height:auto; border:1px solid #909;
}
.menu4 ul li:hover ul li:hover ul.left,
.menu4 ul li a:hover ul li a:hover ul.left {
left:-166px;
}
.menu4 ul li:hover ul li:hover ul li a,
.menu4 ul li a:hover ul li a:hover ul li a {
display:block; color:#cf3408; height:auto; line-height:1.5em; padding:5px 10px 4px 35px; width:170px; w\idth:140px; 
}
* html .menu4 ul li a:hover ul li a:hover ul li a {padding:4px 10px 4px 35px;}

.menu4 ul li:hover ul li:hover ul li:hover a,
.menu4 ul li a:hover ul li a:hover ul li a:hover {
color:#cf3408; text-decoration:underline overline; 
}

#header {
   height: 121px;
   width: 80%;
   position: static;
   border: 0px;
}
.re {
    background:url(Bilder/re.png) right no-repeat; clear:both; }
.li {
    background:url(Bilder/li.png) left no-repeat;width:auto;clear:both;
}
.ro {
    background:url(Bilder/or.png) top right no-repeat;margin:0; margin-top:10px; margin-left:0px; margin-bottom:-20px; padding:0; clear:both;
}

.lo {
    background:url(Bilder/ol.png) top left no-repeat;margin:0;margin-left:0px; clear:both;;
}

.ru {
    background:url(Bilder/ur.png) bottom right no-repeat;margin:0;margin-left:0px; clear:both;;
}

.lu {
    background:url(Bilder/ul.png) bottom left no-repeat;margin:0; padding:30px;clear:both;;
}
.inhalt { margin-left:160px; margin-bottom:0px; padding:0; clear:both;
}
.rand{ float: left; position:absolute; margin:0; padding:0; margin-top:80px; z-index:0; }
Code:
<?php echo "<?xml version='1.0' encoding='utf-8'?>"; ?>
<!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>
<title>hauptseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="telko.css">
<script src="telko.js" type="text/javascript"></script>
<style type="text/css" media="screen"><!--
a#link<?php echo $_GET['seite'] ?> { color:#fee703; background-color:#cf3408 }
--></style>
</head>
<body >
<!-- ImageReady Slices (hauptseite.psd) -->
<?php include ("kopf.php"); ?>
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu"><div class="rand"><img src="Bilder/frau.png" height="230" width="156" alt="telko" /><br />
<font size="-2">&nbsp;&nbsp;&nbsp;&copy;2007 Telko GmbH</font></div>
<div class="inhalt">
</div></div></div></div>
<div name="clearBugFix" style="clear: both;height: 0; width: 0; line-height: 0;"></div></div>
<!-- End ImageReady Slices -->


</body>
</html>
hier nochmal der betroffene css und html code :/

mein verdacht liegt bei der .ro :/ da hab ich zumindest mit firebug ein unsichtbaren überhang gesehen :O

naja danke im vorraus ^^
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.157
Beiträge
2.581.864
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben