[CSS] IE laat lege ruimte zien - Softwareontwikkeling

dinsdag 19 februari 2008 16:56

Acties:

Topicstarter

Hoi,

Ik probeer al een tijdje om het volgende voorbeeldje werkend te krijgen in zowel firefox als internet explorer 7.

HTML

code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <link href="./skins/{ $SKIN_DIR }/style/css/probleem.css" rel="stylesheet" type="text/css" />
        <title>Probleempje</title>
    </head>
    <body>
        <div id="top">
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="smallPadding">
                    <div class="content">
                    </div>
                </div>
            </div>

        </div>
    </body>
</html>

CSS

code:

HTML, BODY
{
    margin: 0px;
    padding: 0px;
}

div#top
{
    width: 100%;
    height: 100px;
    background-color: red;
}

div.column
{
    float: left;
    width: 12.5%;
}

div.smallPadding
{
    padding-right: 1px;
}

div.content
{
    width: 100%;
    height: 20px;
    background-color: yellow;
}

En hier een screenshot hoe het eruit ziet in FF en IE
FF: http://img85.imageshack.u...nshotprobleempjemolk8.png
IE: http://img145.imageshack.us/img145/6615/deathtoiemv8.jpg

Ik zal m zo ook nog ergens online zetten.

Het is dus de bedoelling dat de screenshot van Firefox er exact hetzelfde uitziet in Internet Explorer en in DIV's gemaakt. Het zou met tabellen kunnen, maar ik heb in dit geval liever DIV's.

Het moet in IE7 werken! alles lager dan 7 kan je vergeten.

Alvast bedankt voor de hulp,
Mark.

woensdag 20 februari 2008 08:14

Acties:

f.v.b

Dit gaat natuurlijk maar een op de acht keer goed. De breedte van de acht gele blokken is gelijk, dus de breedte van de gele blokken bij elkaar is altijd een veelvoud van acht pixels.

De breedte van je pagina is dat natuurlijk niet. Wat moet er gebeuren als je pagina 804 pixels breed is. En wat gebeurt er met de extra pixel als hij 805 pixels breed is?

Je kan smokkelen door het meest rechtse blok de resterende breedte te geven, maar het blijft een layout die bij het minste of geringste om zal vallen. Wat gebeurt er als je teksten in de blokken gaat zetten en de pagina wordt smaller dan 400 pixels?

Don't erase all files?
[Yes] [No]

woensdag 20 februari 2008 09:03

Acties:

reddevil

Ik weet't niet zeker, maar iets zegt me dat 8 keer een div van 12.5% en per div 1 pixel ruimte nemen door er een div omheen te stoppen met een padding niet goed zal werken.
Daarnaast als ik hem test zie ik dat de 8e div naar de volgende regel gaat.

[ Voor 18% gewijzigd door reddevil op 20-02-2008 09:15 ]

woensdag 20 februari 2008 09:49

Acties:

Dacide

markg85 schreef op dinsdag 19 februari 2008 @ 16:56:

Het moet in IE7 werken! alles lager dan 7 kan je vergeten.

\
Zal ik je uit een droom helpen? ongeveer 40 tot 60 % van je bezoekers gebruikt IE6 (afhankelijk van de doelgroep).

Je kan daarom zeker niet zomaar effe IE6 vergeten. Ook al is dat voor jou als developer veel simpeler. want IE6 blijft gewoon een grote rotzak. Je zal niet de eerste zijn die 2 stylesheets moet maken (eentje voor alle normale browsers en eentje speciaal voor IE5.5 en 6)

woensdag 20 februari 2008 11:35

Acties:

André

Analytics dude

En nu moeten wij het maar oplossen? Wat heb je al geprobeerd?

woensdag 20 februari 2008 11:48

Acties:

FragFrog

Dacide schreef op woensdag 20 februari 2008 @ 09:49:
Zal ik je uit een droom helpen? ongeveer 40 tot 60 % van je bezoekers gebruikt IE6 (afhankelijk van de doelgroep).

Volgens w3schools.com was het in januari nog maar 32%, en MS heeft net IE7 over windows update gegooid zodat het alleen maar minder zal worden - plus, zoals je zegt, per doelgroep kan het ook nog aardig 'beter' zijn. Een MMO gamesite die ik een tijdje terug runde zat op ~ 3000 bezoekers per dag, IE6 had daarin minder dan 10% aandeel

Onwerkbaar is een ander verhaal, maar ik zou me niet al te druk maken om dit soort kleine foutjes daarin.

Ontopic: dit soort designs kun je eigenlijk alleen maken als je minimaal 1 div een klein beetje variabel in breedte laat. Hate to say it, maar tables zijn daar wel perfect voor. Ik betwijfel eigenlijk of je het anders pixelperfect kan krijgen in alle browsers zonder naar vaste breedtes te gaan (wat weer het nut van div's gebruiken een beetje teniet doet).

[ Site ] [ twitch ] [ jijbuis ]

woensdag 20 februari 2008 14:20

Acties:

Dacide

FragFrog schreef op woensdag 20 februari 2008 @ 11:48:
[...]

Volgens w3schools.com was het in januari nog maar 32%, en MS heeft net IE7 over windows update gegooid zodat het alleen maar minder zal worden -

Dank voor je opheldering... Mijn bevindingen waren gebaseerd op een site die ik run met +/- 10.000 unieke bezoekers per maand. (bedrijf in kwestie gaat over kinderportretfotografie op locatie).

Doelgroep is dus "het typische gezin" uit A klasse families maar ook de zgn tokkies en flodders.
Mijn percentages komen uit een totaal van 85.000 unieke bezoekers.

Zoals je ziet zit er behoorlijk wat verschil in per doelgroep.

woensdag 20 februari 2008 23:20

Acties:

markg85

Topicstarter

Dacide schreef op woensdag 20 februari 2008 @ 09:49:
[...]

\
Zal ik je uit een droom helpen? ongeveer 40 tot 60 % van je bezoekers gebruikt IE6 (afhankelijk van de doelgroep).

Je kan daarom zeker niet zomaar effe IE6 vergeten. Ook al is dat voor jou als developer veel simpeler. want IE6 blijft gewoon een grote rotzak. Je zal niet de eerste zijn die 2 stylesheets moet maken (eentje voor alle normale browsers en eentje speciaal voor IE5.5 en 6)

Het is geen droom maar gewoon een harde eis die ik tegenwoordig aan alle css en html stel waarin het moet werken. IE6 kan mij als designer niet meer schelen en in die speciefieke geval mijn leidinggevende ook niet. Ik vergeet IE6 dus wel als je het niet erg vind

André schreef op woensdag 20 februari 2008 @ 11:35:
En nu moeten wij het maar oplossen? Wat heb je al geprobeerd?

Vraag 1: Als het mogelijk is
Vraag 2: o heel wat. Ik heb wel steeds hetzelfde idee gebruikt alleen heb ik dan van margin-right: 1px; het volgende gemaakt: padding-right: 1px; en border-right: 1px solid iets; Verder heb ik ook nog wat zitten stoeien met achtergrond kleurtjes om het toch maar werkend te krijgen maar helaas.. IE7 blijft t vergallen.

Even mijn idee over hoe divs in dit geval horen te werken.
Ik maak in me voorbeeldje 8 kolommen aan. elke kolom bestaat uit 1 div (column) met daarin weer 2 nested divs (smallPadding en content)

de column classe in css maakt een simpele div met een breedte van 12.5% dat gaat goed
dan komt de smallPadding classe die een margin-right van 1px geeft. hier gaat het ergens fout. IE7 gaat over zijn nek waar firefox en opera geen probleem hebben. Het lijkt me logisch dat de column div 12.5% is en blijft. IE7 lijkt de padding bij die 12.5% op te tellen waardoor 8*12.5 geen 100 is maar 108! Verder neemt de content classe de rest van de inhoud in en geeft et een kleurtje.

Is er misschien niet een javascript fix voor dit soort dingen?
zoiets als dit: http://dean.edwards.name/weblog/2008/01/ie7-2/ (nog niet getest voor dit probleem)

woensdag 20 februari 2008 23:26

Acties:

FragFrog

Dacide schreef op woensdag 20 februari 2008 @ 14:20:
Dank voor je opheldering... Mijn bevindingen waren gebaseerd op een site die ik run met +/- 10.000 unieke bezoekers per maand. (bedrijf in kwestie gaat over kinderportretfotografie op locatie).

Doelgroep is dus "het typische gezin" uit A klasse families maar ook de zgn tokkies en flodders.
Mijn percentages komen uit een totaal van 85.000 unieke bezoekers.

Zoals je ziet zit er behoorlijk wat verschil in per doelgroep.

offtopic:
Niet alleen per doelgroep, als jij consistent op 10k bezoekers per maand zit heb jij het over een periode van bijna driekwart jaar. In het afgelopen jaar is er veel veranderd in de verhouding IE6 - IE7. Was het in januari / februari vorig jaar nog bijna alleen IE6, als ik nu kijk naar stats van een paar kleine sites (< 1000 bezoekers / dag) in mijn analytics is het eerder omgedraait. Ik gok dat als je gaat kijken naar de laatste 2 weken van die site je ook een heel ander beeld ziet dan 40-60% IE6

[ Voor 35% gewijzigd door FragFrog op 20-02-2008 23:27 ]

[ Site ] [ twitch ] [ jijbuis ]

donderdag 21 februari 2008 04:15

Acties:

f.v.b

FragFrog schreef op woensdag 20 februari 2008 @ 11:48:
Volgens w3schools.com was het in januari nog maar 32%, en MS heeft net IE7 over windows update gegooid zodat het alleen maar minder zal worden - plus, zoals je zegt, per doelgroep kan het ook nog aardig 'beter' zijn.

Op dezelfde pagina bij w3schools staat een disclamer:

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user. The average user tends to use Internet Explorer, since it comes preinstalled with Windows. Most do not seek out other browsers.

These facts indicate that the browser figures above are not 100% realistic. Other web sites have statistics showing that Internet Explorer is used by at least 80% of the users.

Ook op mijn sites zie ik nog een percentage van 50% IE6. De IE7 push van afgelopen week heeft daar nog vrijwel geen verandering in weten te brengen. IE6 is er nog wel even ben ik bang.

Don't erase all files?
[Yes] [No]

donderdag 21 februari 2008 09:49

Acties:

Dacide

FragFrog schreef op woensdag 20 februari 2008 @ 23:26:
[...]

offtopic:
Niet alleen per doelgroep, als jij consistent op 10k bezoekers per maand zit heb jij het over een periode van bijna driekwart jaar. In het afgelopen jaar is er veel veranderd in de verhouding IE6 - IE7. Was het in januari / februari vorig jaar nog bijna alleen IE6, als ik nu kijk naar stats van een paar kleine sites (< 1000 bezoekers / dag) in mijn analytics is het eerder omgedraait. Ik gok dat als je gaat kijken naar de laatste 2 weken van die site je ook een heel ander beeld ziet dan 40-60% IE6

offtopic:
Zojuist gecheckt op de afgelopen 2 weken.. ongeveer 4000 unieke bezoekers:
IE7: 55%
IE6: 43%

Hier zet zich die trend dus niet echt door. Maargoed, ik kan alleen maar hopen dat IE6 op korte termijn nagenoeg uitgebannen is.

donderdag 21 februari 2008 10:53

Acties:

T-MOB

Ik zou gewoon een <table> neerzetten. 4 lagen diep <div>s nesten levert je namelijk geen enkel voordeel op. Als je het moet onderhouden is de table-syntax veel duidelijker en voor een zoekmachine maakt het geen fuck uit of ie nou door een oerwoud aan cellen of aan divs moet ploegen.

Regeren is vooruitschuiven

donderdag 21 februari 2008 11:02

Acties:

markg85

Topicstarter

T-MOB schreef op donderdag 21 februari 2008 @ 10:53:
Ik zou gewoon een <table> neerzetten. 4 lagen diep <div>s nesten levert je namelijk geen enkel voordeel op. Als je het moet onderhouden is de table-syntax veel duidelijker en voor een zoekmachine maakt het geen fuck uit of ie nou door een oerwoud aan cellen of aan divs moet ploegen.

Ja ik wou ook tabellen gaan gebruiken als dit niet mogelijk is om normaal in IE7 werkend te krijgen. Toch wil ik het eerst nog zo werkend proberen te krijgen.

@de rest
Blijf nou eens on topic! die IE6 en 7 percentages maken me voor dit probleem echt niets uit.