Avatar billede svinth Nybegynder
29. juli 2010 - 17:59 Der er 8 kommentarer og
2 løsninger

2 div stacks der skal overlappe hinanden i IE6+IE7

Hej eksperter.

Jeg har følgende lille strimmel html med indlejret css. Som det står der, virker det fint, dog ikke i IE6+IE7. Med virker fint, menes at følgende figur vises (håber ASCII'en holder):

-------------------------
|  ---            ---  |
|  | |            | |  |
|  | |            | |  |
|--| |-------------| |--|
|  | |            | |  |
|  | |            | |  |
|  ---            ---  |
-------------------------

Men hvordan med IE6+7?

<html>
    <body>
        <div style="width: 200px; z-index: 0;">
            <div style="float: left; position: relative; background-color: red; height: 100; width: 200;z-index: 1;">
                <div style="background-color: pink; height: 80; width: 20; position: absolute; top: 60px; left: 20px; z-index: 2;"></div>
            </div>
            <div style="float: left;position: relative; background-color: brown; height: 100; width: 200;z-index: 1;">
                <div style="background-color: goldenrod; height: 80; width: 20; position: absolute; top: -40px; left: 140px; z-index: 2;"></div>
            </div>
        </div>
    </body>
</html>
Avatar billede keysersoze Guru
29. juli 2010 - 23:14 #1
hvilken doctype? har du evt et link?
Avatar billede svinth Nybegynder
30. juli 2010 - 08:53 #2
Jeg har lavet et lidt bedre oplæg.
Doctype er:

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

Tag et kig på http://www.hyggekrogen.dk/test/test001.html

Det genererer:

http://www.hyggekrogen.dk/test/test001_double_overlap_not_working.jpg

Dog virker http://www.hyggekrogen.dk/test/test002.html
, pånær i IE6 + IE7. Så ser det således ud:

http://www.hyggekrogen.dk/test/test002_double_overlap_working.jpg

Mvh fra Svante
Avatar billede keysersoze Guru
30. juli 2010 - 21:04 #3
Jeg kan ikke uden videre komme med en forklaring - men hvad præcist er det du forsøger at løse? altså, jeg tænker på hvorfor du ikke bare gør det let for dig selv og lægger alle 4 divs ind i samme parent-container og positionerer ud fra den i stedet for overlaps på kryds og tværs som nu?
Avatar billede svinth Nybegynder
31. juli 2010 - 00:28 #4
Det her er en simpel udgave af problemet. I den originale er den øverste div et banner, og den nederste er indhold. Den øverste indre div er en dropdown menu, og den nederste indre div er noget højre søjle indhold, der skal overlappe en del af banneret, da dette kan skifte billedindhold.
Avatar billede keysersoze Guru
31. juli 2010 - 11:59 #5
Det er et kendt problem at IE7 har problemer med z-index på positionerede elementer og jeg kan desværre ikke umiddelbart komme op med en løsning (uden at du begynder at kigge på jquery) - uden at kende tilstrækkelig til din udfordring tror jeg stadig en omrokering er bedste løsning; Din øverste div med menuen kan forblive mens nederste div samt banner må gentænkes.
Avatar billede mclemens Nybegynder
03. august 2010 - 14:11 #6
Hvis nu du adskiller position:relative og float:left som her ... hjælper det så ? Har ikke lige IE 7 & 6, men kun IE 8 i kompatibilitets tilstand, men det er joh ikke nødvendigvis samme render.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
   
    </head>
    <body>
        <div style="width: 200px; z-index: 0;">
            <div style="float: left; position: relative; background-color: red; height: 100px; width: 200px;">
                <div style="background-color: pink; height: 80px; width: 20px; position: absolute; top: 60px; left: 20px; z-index: 2;"></div>
            </div>
            <div style="float: left; background-color: brown; height: 100px; width: 200px;"><div style="position:relative;">
                <div style="background-color: goldenrod; height: 80px; width: 20px; position: absolute; top: -40px; left: 140px; z-index: 2;"></div></div>

            </div>
        </div>
    </body>
</html>
Avatar billede svinth Nybegynder
04. august 2010 - 10:52 #7
Mclemens, dit forslag løste det simple problem, interessant! Dog kunne jeg ikke få det til at virke med mit reelle problem.

Keysersoze, jeg rokerede rundt, så der ikke var "cirkulære" overlap, og det lykkedes mig at løse problemet til sidst.

Send svar begge to, så deler i point.

Tak!
Avatar billede mclemens Nybegynder
04. august 2010 - 13:09 #8
:)
Avatar billede keysersoze Guru
04. august 2010 - 13:31 #9
svar :)
Avatar billede mclemens Nybegynder
04. august 2010 - 21:33 #10
- og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester



IT-JOB

Unik System Design A/S

Udviklingschef

Danske Andelskassers Bank A/S

IT-konsulent

Center Denmark Fonden

Cloud Engineer