IE 7 + png, werkt tog niet helemaal...

**Bas M.** · 15-02-2009, 14:18

Ik heb dus het volgende probleem met mijn website. Als ik mijn website in firefox open doet alles het goed, maar zodra ik hem in IE 7 open en het script activeer. Dan geeft hij de png afbeeldingen op de divs 'ContentMain'/'HomeTextContent' niet goed weer.
Ik heb dus geen idee wat dit zou kunnen zijn. En heb ook al op google enzo lopen rond zoeken.

Dit is er dus aan de hand:
Firefox:klik
IE 7, script nog niet geactiveerd:klik
IE 7: klik

xHTML:

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">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BMvisuals.nl</title>
    
<!-- Basic -->
    <script type="text/javascript" src="Scripts/Jquery/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="Scripts/Jquery/jquery.delay.js"></script>
    
<!-- Index -->
    <script type="text/javascript" src="Scripts/Index.js"></script>
    <link rel="stylesheet" type="text/css" href="Scripts/CSS/stylesheet.css" />
    
<!-- Photo Gallery -->
    <script type="text/javascript" src="Scripts/PhotoGallery/jquery.jcarousel.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="Scripts/PhotoGallery/jquery.jcarousel.css" />
    <link rel="stylesheet" type="text/css" href="Scripts/PhotoGallery/skin.css" />
    
<!-- Tabs -->
    <script src="Scripts/Jquery/core.js" type="text/javascript"></script>
    <script src="Scripts/Jquery/tabs.js" type="text/javascript"></script>
    <link rel="stylesheet" href="Scripts/CSS/tabs.css" type="text/css" media="print, projection, screen">

    <script type="text/javascript">
        $(document).ready(function(){
            $("#example").tabs();
            });
   </script>  
</head>

<body>
<!-- Layout -->
    <div class="TopBarFloat">
        <center>
            <div class="TopBarMain">
                </div>
        </center>
    </div>
    
    <div class="TopContentLeft"></div>
    <div class="TopContentRight"></div>
    
<div class="TopMain">
        <div class=" MainContainer">
            <div class="TopContentMiddle">
            </div>
        </div>
    </div>
    
<!-- Photo Gallery -->
    <div class="FotoTab">
        <div class="ContainerFotoTabFlash">
              <ul id="mycarousel" class="jcarousel jcarousel-skin-tango">
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/Blackhole.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/Graffiti.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/Elien.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/Love.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/PyroTV.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/DreamFireworks.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/Starburst.png" alt="" border="0"/>
                    </a>
                </li>
                <li>
                    <a href="http://www.google.com">
                        <img src="images/PhotoGallery/Thumbs/Destruction.png" alt="" border="0"/>
                    </a>
                </li>
              </ul>
        </div>
    </div>

<!-- Tabs -->
    <div class="TabsContainer" id="example">
        <ul>
            <li><a href="#fragment-1"><div class="HomeActive"><span><img src="images/HomeActive.png" border="0"/></span></div></a></li>
            <li><a href="#fragment-2"><div class="Aboutme"><span><img src="images/Aboutme.png" border="0"></span></div></a></li>
            <li><a href="#fragment-3"><div class="Service"><span><img src="images/Service.png" border="0"></span></div></a></li>
            <li><a href="#fragment-4"><div class="Contact"><span><img src="Images/Contact.png" border="0"/></span></div></a></li>
       </ul>
</div>
    
<!-- Content -->
    <div class="MiddleMain">
        <div class="MainContainer">
                <div class="MiddleLightLeft"></div>
                <div class="MiddleLightRight"></div>
                    <div class="ContentMain">
                        <div class="HomeTekstContent">
                        <img src="Images/Home/Pic.png" id="pic"/>
                            <div id="fragment-1">
<b><font color="#3c3c3c">Welkom</font> <font color="#ff5700">op BMvisuals.nl</font></b><br />
Wilt u al heel lang uw eigen website hebben,   maar heeft u geen idee hou u zal moeten beginnen?<br />
Ik ben Bas Maas, en webdesignen is mijn hobby. En ik wil van mijn hobby mijn beroep maken.<br />
U kunt bij mij terecht voor een betaalbare en gebruiksvriendelijke website.Ook kunt u bij mij terecht voor een logo of een advertentie.
<br /><br />
Kijkt u verder gerust rond op mijn portfolio. Aan de linker kant van de site staan nu alleen nog maar afbeeldingen die ik heb gemaakt. Later wil ik hier kunnen laten zien wat voor website’s ik voor anderen heb gemaakt.
<br /><br />
Neemt u verder gerust contact met mij op. De contact gegevens staan op de contact pagina.
<br /><br />
Met vriendelijke groet,<br />
Bas Maas
                        </div>
                        <div id="fragment-2">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                             </div>
                        <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
                        </div>
                        <div id="fragment-4">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
                        </div>
                    </div>
        </div>
    </div>
        
<!-- Background/footer -->
    <div class="BackgroundLeftLight"></div>
        <div class="BackgroundRightLight"></div>
            <div class="background">
                <div class="MainContainer">
                    <div class="BasisReflection">
                        <div class="BGtextCopyright">
                            BMvisuals.nl, Copyright 2008 - 2009©
                        </div>
                        <div class="BGtextLinks">
                            <font color="#e7e7e7"><u>Home</u></font><font color="#BFBFBF"> | About me | Service | Contact</font>
                        </div>
                     </div>
                 </div>
            </div>
</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

        body{
            margin:0px;
            padding: 0px;
            height: 100%;
            width: 100%;
            position: absolute;
            overflow: hidden;
            max-height: 100%;
        }
        div.HomeTekstContent{
            filter:alpha(opacity=0);
            -moz-opacity:0.0;
            opacity:0.0;
            position: absolute;
            float: left;
            z-index: 2;
            background: url(../../Images/Ding.png);
            background-repeat: no-repeat;
            width: 590px;
        }
        #fragment-1{
            color: #000000;
            font-size: 12px;
        }
        div.HomePics{
            width: 306px;
            height: 271px;
            float: left;
            margin-left: 48%;
            position: absolute;
            z-index: 1;
            padding-top: 40px;
            padding-bottom: 30px;
        }
        #pic{
            position: relative;
            float: right;
            margin-top: 23px;
            padding-left: 10px;
            margin-right: -25px;
        }
        div.MainContainer{
            margin: 0 auto 0 auto;
            width: 625px;
            text-align: left;
        }
        div.TopBarMain{
            background: url(../../Images/TopBarMain.png);
            height: 21px;
            width: 1003px;
        }
        div.TopBarFloat{
            background-image:url(../../Images/TopBarFloat.png);
            background-repeat:repeat-x;
        }
        div.TopMain{
            background-image:url(../../Images/TopMain.png);
            background-repeat:repeat-x;
            width: 100%;
            height: 146px;
        }
        div.TopContentMiddle{
            background-image:url(../../Images/TopContentMiddle.png);
            background-repeat: no-repeat;
            width: 624px;
            height: 147px;
        }
        div.MiddleMain{
            background-image:url(../../Images/MiddleMain.png);
            background-repeat: repeat-x;
            width: 100%;
            height: 364px;
        }
        div.ContentMain{
            background-image:url(../../Images/ContentMain.png);
            background-repeat: no-repeat;
            width: 605px;
            height: 344px;
            padding: 10px;
            text-align: left;
            z-index: 3;
            position: relative;
        }
        div.TopContentLeft{
            background:url(../../Images/TopContentLeft.png);
            background-repeat: no-repeat;
            width: 254px;
            height: 146px;
            margin-left: 50%;
            left: -566px;
            position: absolute;
        }
        div.BackgroundLeftLight{
            background: url(../../Images/BackgroundLight.png);
            background-repeat: no-repeat;
            width: 349px;
            height: 160px;
            margin-left: 50%;
            left: -510px;
            position: absolute;
        }
        div.BackgroundRightLight{
            background: url(../../Images/BackgroundLight.png);
            background-repeat: no-repeat;
            width: 349px;
            height: 160px;
            margin-right: 50%;
            right: -510px;
            position: absolute;
        }
        div.MiddleLightLeft{
            background: url(../../Images/iddleLightLeft.png);
            background-repeat: no-repeat;
            width: 253px;
            height: 364px;
            position: absolute;
            z-index: 0;
            margin-left: 50%;
            left: -510px;
        }
        div.MiddleLightRight{
            background: url(../../Images/iddleLightRight.png);
            background-repeat: no-repeat;
            width: 253px;
            height: 364px;
            position: absolute;
            z-index: 0;
            margin-right: 50%;
            right: -510px;
        }
        div.TopContentRight{
            background:url(../../Images/TopContentRight.png);
            background-repeat: no-repeat;
            width: 254px;
            height: 146px;
            margin-right: 50%;
            right: -566px;
            position: absolute;
        }
        div.FotoTab{
            background-image:url(../../Images/FotoTab.png);
            background-repeat: no-repeat;
            width: 139px;
            height: 363px;
            position: absolute;
            margin-left: 50%;
            left: -311px;
            z-index: 1;
        }
        div.ContainerFotoTabFlash{
            width: 94px;
            height: 315px;
            margin-top: 17%;
            margin-left: 18%;
            z-index: 2;
            position: relative;
        }
        div.HomeActive{
            width: 37px;
            height: 94px;
            position: relative;
            z-index: 2;
        }
        div.Aboutme{
            width: 28px;
            height: 88px;
            position: relative;
            left: -30px;
            z-index: 2;
        }
        div.Service{
            position: relative;
            width: 28px;
            height: 78px;
            left: -30px;
            z-index: 2;
        }
        div.Contact{
            width: 28px;
            height: 103px;
            position: relative;
            left: -30px;
            z-index: 2;
        }
        div.TabsContainer{
            width: 100px;
            position: absolute;
            margin-right: 50%;
            right: -359px;
            top: 154px;
            padding: 0px;
        }
        div.HomePicAfterBefore{
            background-image:url(../../Images/HomePicAfterBefore.png);
            width: 305px;
            height: 120px;
        }
        div.HomePicAfterBefore:Hover{
            background-image:url(../../Images/HomePicAfterAfter.png);
            width: 305px;
            height: 120px;
        }
        div.PhotoGalleryContainerBackground{
            width: 95px;
            height: 315px;
            background-image: url(../../Images/PhotoGallery/PhotoGalleryContainerBackground.png);
        }
        div.thumbs{
            padding-left: 15px;
            padding-right: 10px;
            padding-top: 7px;
            padding-bottom: 7px;
        }
        div.ThumbsContainer{
            padding-bottom: 3px;
            padding-top: 3px;
        }
        div.background{
            background: url(../../Images/background.png);
            background-repeat: repeat-x;
            background-color: #474747;
            width: 100%;
            height: 100%;
        }
        div.BGtextCopyright{
            color: #BFBFBF;
            float: right;
            font-family: Tahoma;
            font-size: 10px;
            padding-top: 3px;
            padding-right: 10px;
            z-index: 1;
            position: relative;
        }
        div.BGtextLinks{
            float: left;
            font-family: Tahoma; 
            font-size: 10px;
            padding-top: 3px;
            padding-left: 10px;
            z-index: 1;
            position: relative;
        }
        div.BasisReflection{
            background-image:url(../../Images/BasisReflection.png);
            width: 624px;
            height: 364px;
        }

Mvg,
Bas M.

**Merijn V** · 20-02-2009, 13:08

Anders ga je even je code herschrijven.. Waarom in GODSNAAM alleen maar divs? Zo zie je door de bomen het bos niet meer..

Daarnaast werkt de z-index niet op zo`n manier. Je moet een "basis" niveau mee geven voor je z- index. En relative op relative op relative op relative gaat niet werken in IE.

Het feit dat FF het pakt, is mij een raadsel want je pagina werkt erg omstreden.

**Bas M.** · 20-02-2009, 17:36

denk je? Want voor die licht bundels die je ziet heb ik allemaal een apart div voor aangemaatk omdat het VOLGENS MIJ niet anders kan...

Of wel?

**Merijn V** · 20-02-2009, 18:29

Kijk je code er eens op na.. tel eens hoeveel divs je hebt.. gewoon voor de lol.. ik weet zeker dat je de tel kwijt raakt als je ze zou gaan tellen.

Ze noemen het divitis :0

Je tabs kun je gewoon in een unordered list gooien. Zijn standaard ook block elementen

trouwens, nog een puntje van kritiek, je moet eerst zorgen dat je layout goed is voor je met scripts begint.

Dus eerlijk waar, als ik jou was zou ik een groot deel herschrijven en al die divs eruit flikkeren. div staat voor divisions en ik zie niet in waarom tekst in een div moet. ze hebben er paragraph tags voor, als ook je header waar je heading tags voor hebt.
en zo zijn er nog wel wat..

Beter begin je overnieuw, maak je schone en SEMANTISCH correcte HTML. Als je de GEHELE layout klaar hebt, begin je pas met je css. en deel je het in groepen of rijen (ik gebruik rijen, werkt erg lekker)

Wanneer je CSS valideert en goed loopt op alle browsers, begin je pas met je scripts in js.

**Bas M.** · 21-02-2009, 10:01

Origineel gepost door Merijn Venema

Kijk je code er eens op na.. tel eens hoeveel divs je hebt.. gewoon voor de lol.. ik weet zeker dat je de tel kwijt raakt als je ze zou gaan tellen.

Ze noemen het divitis :0.........

Oke ik zal vandaag wel opnieuw beginnen. Ik zie nu wat je bedoelt ;)

Maar ik snap deze zin niet? " Als je de GEHELE layout klaar hebt". Bedoel je de layout in photoshop? (want die heb ik wel af)

**K. Schasfoort** · 21-02-2009, 10:32

Origineel gepost door Bas M.

Oke ik zal vandaag wel opnieuw beginnen. Ik zie nu wat je bedoelt ;)

Maar ik snap deze zin niet? " Als je de GEHELE layout klaar hebt". Bedoel je de layout in photoshop? (want die heb ik wel af)

Nee als je layout er in elke browser goed uit ziet ;)

**gast2960** · 21-02-2009, 10:39

Er zijn idd erg veel divs gebruikt. Beter 1 div die makkelijk te overzien is
en helemaal werkt dan 5 divs waarbij je geen flauw idee hebt waar het nou
allemaal voor dient.

In IE7 wordt de transparantie langzamer geladen dan normaal waardoor
er vooral bij het scrollen veel problemen met haperingen kunnen ontstaan.
Probeer daarom altijd transparant .PNG te mijden, gebruik het alleen als je
niet anders kan.

**Bas M.** · 21-02-2009, 15:45

Origineel gepost door gast2960

Er zijn idd erg veel divs gebruikt. Beter 1 div die makkelijk te overzien is
en helemaal werkt dan 5 divs waarbij je geen flauw idee hebt waar het nou
allemaal voor dient.

In IE7 wordt de transparantie langzamer geladen dan normaal waardoor
er vooral bij het scrollen veel problemen met haperingen kunnen ontstaan.
Probeer daarom altijd transparant .PNG te mijden, gebruik het alleen als je
niet anders kan.

O oke, lekker is dat...
Heb net alle afbeeldingen in png...

**Merijn V** · 22-02-2009, 19:30

Maakt op zich niet uit hoor. .PNG werkt beter omdat je tot 8 bits alfa kanalen kunt gebruiken.

In ie7 werkt dit redelijk goed, alleen in ie6 ( zoals je zelf wel weet .. ) werkt het niet goed. Dus heb je dan een alphaimageloader nodig. en sja, die doet er wel een tijdje over om al je .png`s te laden.

En met de zin : "maak eerst je hele layout " bedoelde ik: zorg dat je je hele layout in zowel PS klaar hebt. Maar ook:

maak eerst je layout in html ( zonder opmaak). Pas wanneer dit klaar is, zou je je css moeten gebruiken. Anders kom je erachter: ohh dat was ik vergeten, en ga je terug en pas je dingen aan waardoor je hele opmaak mis gaat.

**Bas M.** · 23-02-2009, 07:27

Ik ben achter het probleem gekomen.

Ik heb een jquery scriptje gemaakt dat de tekst + dat plaatje in-fade als de pagina klaar is. Maar IE 6 kan dus geen transparante plaatjes in fade...

IE 7 + png, werkt tog niet helemaal...