Toon posts:

IE vertikt het om zich aan de opgegeven height te houden

Pagina: 1
Acties:
  • 120 views sinds 30-01-2008
  • Reageer

woensdag 30 maart 2005 09:19

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Ik heb de volgende layout voor een pagina, die er in mozilla zo uit ziet:
Afbeeldingslocatie: http://www.excudo.net/got/senior-layout_moz.png
wat ook klopt,
maar in IE zo:
Afbeeldingslocatie: http://www.excudo.net/got/senior-layout_ie.png
wat (dus) niet klopt :(
Dat roze vlak moet veel groter zijn. Nouja, eigenlijk moet het gele vlak veel kleiner zijn - daar zit 'm de fout juist in. Ik heb voor de cell een hoogte van 165px opgegeven, maar dat lapt IE aan z'n laars en maakt 'm gewoon zonder reden groter. Het typische is overigens dat dit alleen gebeurt als het groene gedeelte ook daadwerkelijk content (text, e.d.) bevat. Bevat het dit niet, maar is hij leeg, dan zet ie 'm gek genoeg wel goed neer.

Afijn, dit is de code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href="style.css" rel="stylesheet" type="text/css">
 </head>

<body>

<table id="BigTable">
<tr>
 <td id="headerCell">
    boven
 </td>
</tr>
<tr>
 <td id="headerMenu">
    onder boven
 </td>
</tr>
<tr>
 <td>
    <table id="BigBottom">
    <tr>
     <td rowspan="3" id="LeftSpace"></td>
     <td id="UpperLeftSpace"></td>
     <td></td>
    </tr>
    <tr>
     <td id="PicCell" height="165">
        bla<br>bla<br>bla<br>bla<br>
        bla<br>bla<br>bla<br>
     </td>
     <td rowspan="2" id="cellContent">
        <div id="Content">
            content<br>content<br>content<br>content<br>content<br>
            content<br>content<br>content<br>content<br>content<br>
            content<br>content<br>content<br>content<br>content<br>
            content<br>content<br>content<br>
        </div>
     </td>
    </tr>
    <tr>
     <td style="padding: 0px;">
        <table style="background-color: pink; border-collapse: collapse; width: 100%; height: 100%;">
        <tr>
         <td style="width: 50%;">&nbsp;</td>
         <td style="width: 50%; border-left: 1px solid red; border-top: 1px solid red;">&nbsp;</td>
        </tr>
        </table>
     </td>
    </tr>
    </table>
 </td>
</tr>
<tr>
 <td id="footerMenu" align="center">
    onder
 </td>
</tr>
</table>

</body>
</html>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

#BigTable {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    }
#headerCell {
    height: 120px;
    width: 100%;
    vertical-align: middle;
    }
#headerMenu {
    height: 20px;
    background-color: #004;
    }
#footerMenu {
    height: 20px;
    }
#BigBottom {
    height: 100%;
    width: 100%;
    border-collapse: collapse;
    }
    #LeftSpace {
        width: 25px;
    }
    #UpperLeftSpace {
        width: 200px;
        height: 10px;
    }
    #PicCell {
        background-color: yellow;
        text-align: center;
        vertical-align: top;
        width: 225px;
        height: 165px;
    }
    #BelowPicCell {
        text-align: center;
        vertical-align: top;
        border-top: 1px solid red;
    }
    #Content {
        background-color: green;
        vertical-align: top;
        padding: 0px 10px;
        margin-bottom: 15px;
        overflow: auto;
        }
    #cellContent {
        background-color: gray;
        vertical-align: top;
        border-left: 1px solid red;
    }
.small {
    font-size: 8pt;
    }


Ben al een flink tijdje aan het klooien, maar het wil niet lukken IE wijs te maken dat dat gele vlak echt maar 165px hoog mag zijn.
Het roze vlak kan ik geen hoogte geven omdat ik juist wil dat ie uitrekt naarmate het scherm groter is

woensdag 30 maart 2005 09:25

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Doe dat eens gewoon met divs en floats. Tables zijn voor het tonen van tabulaire data, niet voor layout.

Professionele website nodig?

woensdag 30 maart 2005 10:02

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 09:25:
Tables zijn voor het tonen van tabulaire data, niet voor layout.
die discussie zat ik nou net níet op te wachten.... :/

Het hele ontwerp bestaat al zo (er zit nog veel meer in, maar dat heb ik er uit geknipt) en ik wil alleen dat ene bugje er uit krijgen. Dat moet toch te doen zijn?

woensdag 30 maart 2005 10:06

Acties:
  • Zoefff
  • Registratie: September 2001
  • Laatst online: 22:17

Zoefff

❤ 

Dus dan vraag je eigenlijk van ons om jou te helpen met iets wat per definitie al fout is? ;)

Het is een kleine moeite om deze layout om te zetten naar een div/css layout, en je hebt er vooral zelf veel voordeel van. Maarja, je moet het zelf weten.

Ik heb overigens geen idee hoe dit komt. Misschien kan je het oplossen met uitgerekte transparante pixel plaatjes (als we dan toch met vieze workarounds bezig zijn :X :P )


Fotoblog • Werkaandemuur.nl • Moestuincursus.nl • Twitter

woensdag 30 maart 2005 10:11

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

rowspans/colspans is vragen om moeilijkheden als je pixelprecies wilt werken. Afmetingen binnen tabellen zijn ook niet bedoelt als preciese afmetingen, maar worden meer als min-width/height gezien. Old-school oplossing: tables nesten en spacers. Moderne oplossing: geen tabellen gebruiken voor layout ;)

Intentionally left blank

woensdag 30 maart 2005 10:11

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

marty schreef op woensdag 30 maart 2005 @ 10:02:
[...]

die discussie zat ik nou net níet op te wachten.... :/

Het hele ontwerp bestaat al zo (er zit nog veel meer in, maar dat heb ik er uit geknipt) en ik wil alleen dat ene bugje er uit krijgen. Dat moet toch te doen zijn?
Ja hoor, als je het tot divs met css ombouwt is je bug meteen gefixed :)

Als je geen commentaar wil op je handelen moet je geen foute dingen komen tonen, da's net zoiets als je belastinginspecteur bellen of ie nog leuke tips heeft om de Staat op te lichten ;)

Professionele website nodig?

woensdag 30 maart 2005 10:13

Acties:
  • Low-Tech
  • Registratie: December 2001
  • Laatst online: 06:47

Low-Tech

Workaround voor tables:
Maak een rand van 0px aan de bovenzijde en zijkant. Omdat sommige cellen geen hoogte kennen (door het spannen) krijg je dit soort rare fratsels. Door de extra rand krijgt elke rij/kolom de juiste hoogte/breedte.

In jou geval is een kolom extra genoeg, hiermee kun je de hoogte van elke afzonderlijke! rij aangeven.

Fractal Design Meshify S2, Asus ROG B550-F, AMD 3700x, 3080?, Corsair H115i Pro, G-Skill 3600-16 32GB Trident Z Neo

woensdag 30 maart 2005 10:15

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Dus dan vraag je eigenlijk van ons om jou te helpen met iets wat per definitie al fout is?
waar staat die definitie dan?
Het is een kleine moeite om deze layout om te zetten naar een div/css layout,
Zo'n kleine moeite is dat niet om dat dit een hele versimpelde weergave is. Zoals ik al zei: er zit nog veel meer in, maar dat doet voor het probleem niet ter zake en heb ik dus weggeknipt.Maar dat moet dan wel allemaal omgezet worden
k heb overigens geen idee hoe dit komt. Misschien kan je het oplossen met uitgerekte transparante pixel plaatjes (als we dan toch met vieze workarounds bezig zijn
Tja, ik ben er zelf ook geen fan van. Heb het desalniettemin tóch geprobeerd :) en kwam een heel eind, alleen het wordt nét niet mooi aangezien ik dat transparante gif ook een grootte moet geven


edit:
Om maar even op iedereen te reageren die met de heilige divjes aan komt zetten. Ten eerste vind ik ze niet zo heilig en kan ik daar best een hele discussie over gaan voeren, maar dat vind ik niet zo ter zake doen. Die is hier al vaak genoeg gevoerd en zal ondertussen echt geen nieuwe inzichten meer opleveren. Het lijkt me dan ook vrij nutteloos daar in te verzanden.
desalniettemin: als ik dit vanaf de grond nu zou opbouwen dan zal ik waarschijnlijk ook voor divjes gaan ipv tabellen. maar helaas zit ik nu met deze situatie en loont dat de moeite niet.

komt er dus op neer dat ik blijf zitten met een raar verschijnsel in IE. niet meer en niet minder.
Zal zo de andere suggesties eens proberen

[ Voor 30% gewijzigd door marty op 30-03-2005 10:24 ]

woensdag 30 maart 2005 11:54

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
NOVA_TheCrew schreef op woensdag 30 maart 2005 @ 10:13:
Workaround voor tables:
Maak een rand van 0px aan de bovenzijde en zijkant. Omdat sommige cellen geen hoogte kennen (door het spannen) krijg je dit soort rare fratsels. Door de extra rand krijgt elke rij/kolom de juiste hoogte/breedte.

In jou geval is een kolom extra genoeg, hiermee kun je de hoogte van elke afzonderlijke! rij aangeven.
Dit werkte helaas niet ... :(


Ter ieder vermaak heb ik besloten dit probleem ook nog eens via de divjes te benaderen. Of ik daar uiteindelijk nog wat mee ga doen zie ik wel, maar het is allicht interessant om te zien of het dit inderdaad zo mooi oplost.

Zie hier:

mozilla
Afbeeldingslocatie: http://www.excudo.net/got/senior-layoutDiv_moz.pngMozilla doet het (uiteraard) weer heel netjes.

IE
Afbeeldingslocatie: http://www.excudo.net/got/senior-layoutDiv_ie.pngIE maakt er dit keer helaasch een nog groter drama van dan het al was :(

Hier de code:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href="kut.css" rel="stylesheet" type="text/css">
 </head>
<body>
<div id="headerCell">
    boven
</div>
<div id="headerMenu">
    top menu
</div>

<div id="BigBottom">
    <div id="Left">
        <div id="Pic">pic</div>
        <div id="BelowPic">
            <div id="BelowPicLeft">l</div>
            <div id="BelowPicRight">r</div>
        </div>
    </div>
    <div id="Right">
        rechts<br>
<!--        content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br> //-->
    </div>
</div>
<div id="footerMenu">
    bottom menu
</div>
</body>
</html>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

 body {
    padding: 0%;
    margin: 0%;
    width: 100%;
    height: 100%;
    }
#headerCell {
    height: 120px;
    width: 100%;
    vertical-align: middle;
    }
#headerMenu {
    height: 20px;
    background-color: #004;
    color: white;
    }
#footerMenu {
    position: absolute;
    height: 20px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #004;
    color: white;
    width: 100%;
    }
#BigBottom {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 140px;
    bottom: 20px;
    width: 100%;
    background-color: #EEE;
    }
    #Left {
        position: relative;
        left: 0px;
        top: 0px;
        bottom: 0px;
        margin: 0px 0px 0px 15px;
        width: 185px;
        height: 100%;
        float: left;
        background-color: #DDD;
        }
        #Pic {
            height: 165px;
            background-color: yellow;
            }
        #BelowPic {
            position: absolute;
            top: 165px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background-color: pink;
            }
            #BelowPicLeft {
                float: left;
                width: 49%;
                }
            #BelowPicRight {
                position: relative;
                float: right;
                width: 50%;
                height: 100%;
                border-top: 1px solid red;
                border-left: 1px solid red;
                }
    #Right {
        position: relative;
        height: 100%;
        left: 0px;
        right: 0px;
        top: 0px;
        margin: 10px 0px 10px 200px;
        padding: 0px 20px 0px 20px;;
        background-color: green;
        border-left: 1px solid red;
/*      overflow: auto;     */
        }


Uiteindelijk moet er echter ook nog een overflow: auto in het content gedeelte komen.
Mozilla begint echter op dit punt ook kuren te vertonen:
Afbeeldingslocatie: http://www.excudo.net/got/senior-layoutDivOverflow_moz.png(er komt dus ineens een enorme margin aan de linkerkant bij :S)

En IE doet er helemaal niets mee:
Afbeeldingslocatie: http://www.excudo.net/got/senior-layoutDivOverflow_ie.png

Tja, het lijkt me dat de optelsom is dat ik nog verder van huis ben als ik hier mee verder ga. Zowiezo om dit versimpelde voorbeeld compatibel te krijgen (inclusief die overflow) in beide browsers, laat staan de verdere details van de layout.

Dus ik zou nog steeds het meest geholpen zijn met een work-around voor de IE bug waar ik in het begin mee kwam. Maar in het kader van de discussie mag het wat mij betreft ook best over de DIV layout gaan. (En wellicht dat ik daar dan toch maar mee verder ga als ik dit voorbeeld wel werkend krijg).

woensdag 30 maart 2005 12:20

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

HTML:
1
2
3
4
5
6
7
8

<div id="page">
  <div id="sidebar" style="float:left;width:180px">
    <div style="background-color:yellow">Je gele meuk</div>
    <div style="background-color:pink">Je roze meuk</div>
  </div>
  <div style="background-color:green">Je groene meuk</div>
  <div style="position:absolute;bottom:0">Je footer</div>
</div>

Klaar? ;)

Vragen daarnaast: waarom nest je je CSS? :X En waarom style je zo expliciet alleen op ID en nergens op tag?

[ Voor 10% gewijzigd door curry684 op 30-03-2005 12:22 . Reden: even iets netter ]

Professionele website nodig?

woensdag 30 maart 2005 13:13

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 12:20:
HTML:
1
2
3
4
5
6
7
8

<div id="page">
  <div id="sidebar" style="float:left;width:180px">
    <div style="background-color:yellow">Je gele meuk</div>
    <div style="background-color:pink">Je roze meuk</div>
  </div>
  <div style="background-color:green">Je groene meuk</div>
  <div style="position:absolute;bottom:0">Je footer</div>
</div>

Klaar? ;)
grapje zeker? :|
Vragen daarnaast: waarom nest je je CSS? :Xp
Eh...gewoon ff voor mezelf, om overzicht te houden. Kan geen kwaad toch?
En waarom style je zo expliciet alleen op ID en nergens op tag?
welke tags? ik gebruik al die divjes om deze layout zo te krijgen. Afgezien van die kleuren is dit grofweg de layout. Die rode border die ik getekend heb die moeten dus ook in die layout komen. De achtergrond-kleuren niet - die zijn nu alleen ter voorbeeld om aan te geven waar het 1 ophoudt en het ander begint.
Pas als dit staat en werkt ga ik de rest van de html (en css) bende toevoegen)

[ Voor 10% gewijzigd door marty op 30-03-2005 13:14 ]

woensdag 30 maart 2005 13:37

Acties:
  • BCC
  • Registratie: Juli 2000
  • Laatst online: 09:02

BCC

curry684 schreef op woensdag 30 maart 2005 @ 12:20:
Klaar? ;)

Vragen daarnaast: waarom nest je je CSS? :X En waarom style je zo expliciet alleen op ID en nergens op tag?
Omdattie CSS als tables gebruikt. Je voorbeeld is trouwens al 90% van de oplossing. Misschien moet TS met frames aan de slag :D

Na betaling van een licentievergoeding van €1.000 verkrijgen bedrijven het recht om deze post te gebruiken voor het trainen van artificiële intelligentiesystemen.

woensdag 30 maart 2005 13:48

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

marty schreef op woensdag 30 maart 2005 @ 13:13:
[...]

grapje zeker? :|
:?

Da's 3/4 van je layout hoor. Maar asjeblieft omdat ik zo aardig ben:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Test Page</title>
    <style>
        body {
            background-color:#EEE;
            color:black;
            margin:0;
            padding:0;
        }
        div#header {
            background-color:white;
            height:80px;
        }
        div#main {
            width:100%;
        }       
        div.menu {
            background-color:#004;
            color:white;
            width:100%;
        }
        div#bottommenu {
            position:absolute;
            bottom:0;
        }
        div#sidebar {
            margin-left:10px;
            margin-bottom:0;
            position:absolute;
            width:160px;
        }
        div#pics {
            background-color:yellow;
        }
        div#otherstuff {
            background-color:pink;
        }
        div#morestuff {
            border:1px solid red;
            width:80px;
            float:right;
        }
        div#content {
            background-color:green;
            right:10px;
            left:170px;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="page">
        <div id="header">boven</div>
        <div id="topmenu" class="menu">top menu</div>
        <div id="main">
            <div id="sidebar">
                <div id="pics">Je gele meuk etc. blahblahblah gele meuk</div>
                <div id="otherstuff">
                    <div id="morestuff">What's in here?</div>
                    Roze meuk, roze meuk, roze meuk, roze meuk, roze meuk
                </div>
            </div>
            <div id="content">
                <p>content</p><p>content</p><p>content</p><p>content</p>
            </div>
        </div>
        <div id="bottommenu" class="menu">Je footer</div>
    </div>
</body>
</html>

Als je die roze kolom wil uitvullen heb je nog een paar faux columns nodig maar verder ben je er zo met een paar regels markup :)

Professionele website nodig?

woensdag 30 maart 2005 14:05

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 13:48:
[...]

:?

Da's 3/4 van je layout hoor.
Ja, maar jij weet net zo goed als ik dat de laatste 25% procent, waar alle details in zitten, vééééél lastiger is dan die andere 3/4 van de layout. Daarbij: die 3/4 had ik zelf ook al bedacht en ik liep dus ook stuk op die laatste 1/4. Vandaar dat ik niet snap(te) hoe mij dat verder moest helpen.
Maar asjeblieft omdat ik zo aardig ben: [knip]
Dat waardeer ik heel erg, echter ik het helpt me op geen manier.
Wat jij poste doet het nog minder goed dan wat ik zelf al had. Mijn (gedivde) html+css leverde in iedergeval in Firefox al het gewenste resultaat (zie screenshot), die van jou doet dat niet meer. In IE zag het er weliswaar niet uit, maar die van jou komt nog minder in de buurt.

Daarbij zit ik ook nog met het probleem dat een overflow: auto voor de content in beide browsers niet lijkt te werken op die manier en daar zie ik ook niets van terug.

nogmaals: bedankt voor de moeite en het meedenken, maar het lijkt dus meer een stap achter uit dan voor uit.

woensdag 30 maart 2005 14:12

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Sorry hoor maar die pagina van mij rendert in FF perfect het eerste plaatje uit dit topic, en in IE vult ie alleen de content niet in de breedte uit wat je ook met die faux columns kunt oplossen (die je toch nodig hebt om het roze uit te vullen).

Je kunt ook nog naar deze template kijken die met minieme modificaties exact doet wat jij zoekt.

[ Voor 26% gewijzigd door curry684 op 30-03-2005 14:13 ]

Professionele website nodig?

woensdag 30 maart 2005 14:31

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 14:12:
Sorry hoor maar die pagina van mij rendert in FF perfect het eerste plaatje uit dit topic
marty: (en precies zoals het hoort)
Afbeeldingslocatie: http://www.excudo.net/got/layout-marty.png

curry:
Afbeeldingslocatie: http://www.excudo.net/got/layout-curry.png
verschillen lijken me duidelijk.
en in IE vult ie alleen de content niet in de breedte uit wat je ook met die faux columns kunt oplossen (die je toch nodig hebt om het roze uit te vullen).
niet alleen de breedte hoor, ook de hoogte.
en wat die faux columns betreft, daar lees ik dit:
There are a few ways to make the columns appear equal in length, regardless of the content that they contain.
[...]
The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns
Daar schiet ik dus nada mee op. Niet alleen omdat ik in m'n layout van een border gebruik maak die getekent moet worden; met illusions en appear schiet ik dus helemaal niets op. Die kolommen moet écht zo groot zijn als dat ze moeten zijn en lijken.
Daarbij - en dit heb ik inmiddels al 5x vermeld denk ik - gaan die trucen ook niet voor het groene gedeelte werken omdat die gewoon perfect tegen de onder en bovenkant aan moet zitten om er vervolgens een overflow: auto; in te zetten, zodat de content netjes binnen het 'groene' gedeelte scrolt als die te groot wordt. Dat is vooralsnog ook een probleem in beide browsers
Je kunt ook nog naar deze template kijken die met minieme modificaties exact doet wat jij zoekt.
Daar ben ik al geweest en die doen ook niet wat ik wil. Die templates hebben dezelfde problemen

woensdag 30 maart 2005 14:45

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Je moet niet moeilijk doen over 'appears' en 'illusions' zolang het in the end maar het goede resultaat oplevert. De perfecte oplossing voor je vraag is overigens deze:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <title>Test Page</title>
    <style>
        body {
            background-color:#EEE;
            color:black;
            margin:0;
            padding:0;
        }
        div#header {
            background-color:white;
            height:80px;
        }
        div#main {
            width:100%;
        }       
        div.menu {
            background-color:#004;
            color:white;
            height:20px;
            width:100%;
        }
        div#bottommenu {
            position:absolute;
            bottom:0;
        }
        div#sidebar {
            background-color:pink;
            width:160px;
            left:10px;
            top:100px;
            bottom:1em;
            overflow:auto;
            position:absolute;
        }
        div#pics {
            background-color:yellow;
        }
        div#otherstuff {
        }
        div#morestuff {
            border:1px solid red;
            width:80px;
            float:right;
        }
        div#content {
            background-color:green;
            right:10px;
            left:170px;
            top:100px;
            bottom:20px;
            overflow:auto;
            position:absolute;
        }
    </style>
    </head>
<body>
    <div id="page">
        <div id="header">boven</div>
        <div id="topmenu" class="menu">top menu</div>
        <div id="main">
            <div id="sidebar">
                <div id="pics">Je gele meuk etc. blahblahblah gele meuk</div>
                <div id="otherstuff">
                    <div id="morestuff">What's in here?</div>
                    Roze meuk, roze meuk, roze meuk, roze meuk, roze meuk
                </div>
            </div>
            <div id="content">
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
            </div>
        </div>
        <div id="bottommenu" class="menu">Je footer</div>
</body>
</html>

Die werkt alleen in 'een bepaalde browser' vanzelfsprekend voor geen meter, daar moet je even de boxmodel hacks opentrekken geloof ik (kan iemand anders je vast beter uitleggen).

Professionele website nodig?

woensdag 30 maart 2005 15:00

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

En dan nu met een paar IE hacks erbij waardoor het zowel in IE als FF perfect werkt:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <title>Test Page</title>
    <style>
        body {
            background-color:#EEE;
            color:black;
            height:100%;
            margin:0;
            padding:0;
        }
        div#header {
            background-color:white;
            height:80px;
        }
        div#main {
            width:100%;
        }       
        div.menu {
            background-color:#004;
            color:white;
            height:20px;
            width:100%;
        }
        div#bottommenu {
            position:absolute;
            bottom:0;
        }
        div#sidebar {
            background-color:pink;
            width:160px;
            left:10px;
            top:100px;
            bottom:1em;
            overflow:auto;
            position:absolute;
        }
        div#pics {
            background-color:yellow;
        }
        div#otherstuff {
        }
        div#morestuff {
            border:1px solid red;
            width:80px;
            float:right;
        }
        div#content {
            background-color:green;
            right:10px;
            left:170px;
            top:100px;
            bottom:20px;
            overflow:auto;
            position:absolute;
        }
    </style>
    <!--[if IE]>
    <style>
        div#content {
            height:expression(document.body.clientHeight - 120 + "px");
            width:expression(document.body.clientWidth - 180 + "px");
        }               
        div#sidebar {
            height:expression(document.body.clientHeight - 120 + "px");
        }   
    </style>    
    <![endif]-->        
    </head>
<body>
    <div id="page">
        <div id="header">boven</div>
        <div id="topmenu" class="menu">top menu</div>
        <div id="main">
            <div id="sidebar">
                <div id="pics">Je gele meuk etc. blahblahblah gele meuk</div>
                <div id="otherstuff">
                    <div id="morestuff">What's in here?</div>
                    Roze meuk, roze meuk, roze meuk, roze meuk, roze meuk
                </div>
            </div>
            <div id="content">
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
                <p>content</p><p>content</p><p>content</p><p>content</p>
            </div>
        </div>
        <div id="bottommenu" class="menu">Je footer</div>
</body>
</html>
Veel plezier ;)

[ Voor 3% gewijzigd door curry684 op 30-03-2005 15:22 ]

Professionele website nodig?

woensdag 30 maart 2005 15:03

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 14:45:
Je moet niet moeilijk doen over 'appears' en 'illusions' zolang het in the end maar het goede resultaat oplevert.
Nu we over divjes praten is het ineens wel the end justifies the means ? :)
(geintje hoor)
Waar het mij om ging is dat het - zoals ik het begrijp tenminste - een oplossing is die gewoon de schijn doet wekken. Het divje is dus in werkelijkheid kleiner, maar hij lijkt (door een achtergrondplaatje) groter. Maar als ik er dan een border omheen ga trekken val ik dus door de mand. Toch? (naja, zal het wel gewoon eens proberen)
Overigens - en dat is geen geintje - ik kreeg daarnet een lading reacties over me heen toen ik een bestaande layout die toevallig met tabellen was probeerde aan te passen op 1 klein detail met dat het met divjes, etc. moest en dat alle trucs ranzig waren etc. Ik vind dit wat dat betreft net zo ranzig hoor. Divjes een CSS zijn toch zo goed? waarom heb ik dan in godesnaam achtergrondplaatjes nodig om iets te gaan positioneren?? 8)7
De perfecte oplossing voor je vraag is overigens deze:
HTML:
1

[...knip...]

Die werkt alleen in 'een bepaalde browser' vanzelfsprekend voor geen meter, daar moet je even de boxmodel hacks opentrekken geloof ik (kan iemand anders je vast beter uitleggen).
Nou, perfect is ie helaas niet niet. Deze lost alleen het eerdere probleem in mozilla op, dat het groene gedeelte zo'n rare margin kreeg als ik die overflow: auto toepaste. (komt overigens door 'm absoluut te positioneren: ik was daar zelf ook net achter gekomen)
In IE is het nog steeds een drama: zal nog stees op omslachtige wijze alle gekleurde vlakken moeten gaan uitrekken en daarbij (dat is het grootste probleem) werkt die overflow: auto niet: hij loopt gewoon aan de onderkant door.

woensdag 30 maart 2005 15:13

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

marty schreef op woensdag 30 maart 2005 @ 15:03:
[...]

Nu we over divjes praten is het ineens wel the end justifies the means ? :)
(geintje hoor)
[hap]
Nee, want nu heb je een pagina die het zonder styles, op PDA's en text-based browsers en bij uitprinten wel goed doet :) Zolang het cheaten maar in de CSS zit en je geen regels misbruikt is het inderdaad "the end justifies the means" :P
Waar het mij om ging is dat het - zoals ik het begrijp tenminste - een oplossing is die gewoon de schijn doet wekken. Het divje is dus in werkelijkheid kleiner, maar hij lijkt (door een achtergrondplaatje) groter.
Klopt, dat is inherent aan het feit dat een div zich (net als een table cell overigens) default sized naar z'n content.
Overigens - en dat is geen geintje - ik kreeg daarnet een lading reacties over me heen toen ik een bestaande layout die toevallig met tabellen was probeerde aan te passen op 1 klein detail met dat het met divjes, etc. moest en dat alle trucs ranzig waren etc. Ik vind dit wat dat betreft net zo ranzig hoor. Divjes een CSS zijn toch zo goed? waarom heb ik dan in godesnaam achtergrondplaatjes nodig om iets te gaan positioneren?? 8)7
Niet voor het positioneren, da's het hele punt. Faux columns is een truc om te doen alsof een element doorloopt op een plek waar hij terecht en volgens specificaties niet meer doorloopt. Het gedrag klopt aan alle kanten, je plakt er alleen letterlijk een ander plaatje op.
In IE is het nog steeds een drama: zal nog stees op omslachtige wijze alle gekleurde vlakken moeten gaan uitrekken en daarbij (dat is het grootste probleem) werkt die overflow: auto niet: hij loopt gewoon aan de onderkant door.
IE is een butbrowser maar de workaround hierboven werkt wel... geeft alleen weer een of andere security warning onder SP2 merk ik net :X

* curry684 fietst nog eens langs IEBlog om te zien wanneer IE7 komt.

Professionele website nodig?

woensdag 30 maart 2005 15:22

Acties:
  • RwD
  • Registratie: Oktober 2000
  • Niet online

RwD

kloonikoon

ik heb hem niet helemaal gelezen maar crisp geeft in zn eerste reply DE oplossing voor als je dan toch per se tabellen wilt gebruiken ;)

edit:
ok, door lezen las ik dat je geen tabellen meer gebruikt :P

[ Voor 21% gewijzigd door RwD op 31-03-2005 13:21 ]

woensdag 30 maart 2005 15:27

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 15:13:
[...]

Niet voor het positioneren, da's het hele punt. Faux columns is een truc om te doen alsof een element doorloopt op een plek waar hij terecht en volgens specificaties niet meer doorloopt. Het gedrag klopt aan alle kanten, je plakt er alleen letterlijk een ander plaatje op.
nou, niet volgens de specificaties hoor. volgens de specificaties moet ie het element doortrekken tot bv. 0px vanaf de onderkant van z'n parent. en dat vertikt IE systematisch.
[...]

IE is een butbrowser maar de workaround hierboven werkt wel... geeft alleen weer een of andere security warning onder SP2 merk ik net :X
see for yourself:
Afbeeldingslocatie: http://www.excudo.net/got/layout-perfect-ie.png
Ik heb overigens 6.00 met SP 1, wellicht dat daar het verschil 'm in zit?


Ik zit me overigens net nog een andere invalshoek te bedenken...
* marty komt zo weer terug

woensdag 30 maart 2005 15:29

Acties:
  • Rowanov
  • Registratie: Februari 2004
  • Niet online

Rowanov

Kop eens wat anders...

marty schreef op woensdag 30 maart 2005 @ 15:27:
nou, niet volgens de specificaties hoor. volgens de specificaties moet ie het element doortrekken tot bv. 0px vanaf de onderkant van z'n parent. en dat vertikt IE systematisch.
Wie heeft je dan verteld dat IE zich aan de specificaties houdt? De specificaties worden door browser fabrikanten gezien als richtlijnen en ook zodanig niet volledig geimplementeerd.

Waarom denk je dat iemand met Faux-Collumns aankomt als het ook makkelijker zou kunnen? Workarounds worden meestal bedacht omdat iets niet werkt...

woensdag 30 maart 2005 15:42

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
Rowanov schreef op woensdag 30 maart 2005 @ 15:29:
[...]

Wie heeft je dan verteld dat IE zich aan de specificaties houdt?
curry684 schreef op woensdag 30 maart 2005 @ 15:13:
[...]
Faux columns is een truc om te doen alsof een element doorloopt op een plek waar hij terecht en volgens specificaties niet meer doorloopt.
daar reageerde ik op :)
RwD schreef op woensdag 30 maart 2005 @ 15:22:
ik heb hem niet helemaal gelezen maar crisp geeft in zn eerste reply DE oplossing voor als je dan toch per se tabellen wilt gebruiken ;)
misschien dat je toch even moet lezen dan.
crisp schreef enkelt dit:
crisp schreef op woensdag 30 maart 2005 @ 10:11:
rowspans/colspans is vragen om moeilijkheden als je pixelprecies wilt werken. Afmetingen binnen tabellen zijn ook niet bedoelt als preciese afmetingen, maar worden meer als min-width/height gezien. Old-school oplossing: tables nesten en spacers. Moderne oplossing: geen tabellen gebruiken voor layout ;)
en we zijn inmiddels al een paar uur tabelloos bezig hoor :)

woensdag 30 maart 2005 15:45

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

marty schreef op woensdag 30 maart 2005 @ 15:27:
[...]

see for yourself:
[afbeelding]
Ik heb overigens 6.00 met SP 1, wellicht dat daar het verschil 'm in zit?
Is dat de versie met deze hack?
code:
1
2
3
4
5
6
7
8
9
10
11

    <!--[if IE]>
    <style>
        div#content {
            height:expression(document.body.clientHeight - 120 + "px");
            width:expression(document.body.clientWidth - 180 + "px");
        }                 
        div#sidebar {
            height:expression(document.body.clientHeight - 120 + "px");
        }     
    </style>    
    <![endif]-->

Want ik kan me niet voorstellen dat die onder SP1 of SP2 anders rendert?

Professionele website nodig?

woensdag 30 maart 2005 15:58

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 15:45:
[...]

Is dat de versie met deze hack?
code:
1
2
3
4
5
6
7
8
9
10
11

    <!--[if IE]>
    <style>
        div#content {
            height:expression(document.body.clientHeight - 120 + "px");
            width:expression(document.body.clientWidth - 180 + "px");
        }                 
        div#sidebar {
            height:expression(document.body.clientHeight - 120 + "px");
        }     
    </style>    
    <![endif]-->

Want ik kan me niet voorstellen dat die onder SP1 of SP2 anders rendert?
Ah, nee. dat was zonder die hack. Die had ik nog niet gezien.
Daarmee werkt het inderdaad wel.

Maar je schreef dat je een security warning kreeg?
Dat vind ik dan eigenlijk geen oplossing.

Ik ben overigens een iets andere weg ingeslagen die best redelijk aan het lukken is. Zal die zo even posten als ie af is / als ik toch nog vast kom te zitten.

woensdag 30 maart 2005 16:04

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Ik snap niet waarom ik die security warning kreeg, die slaat namelijk nergens op. Ik kreeg 'm ook alleen als ik de HTML-file direct vanuit de desktop in IE laadde: als ik 'm op m'n localhost IIS draai en opvraag krijg ik die warning niet. Kan nu niet bij FTP, dus iemand anders zal even moeten checken wat ie doet over het internet. Als je 'm daar niet krijgt is de workaround perfect acceptabel :)

Professionele website nodig?

woensdag 30 maart 2005 16:17

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 16:04:
Kan nu niet bij FTP, dus iemand anders zal even moeten checken wat ie doet over het internet. Als je 'm daar niet krijgt is de workaround perfect acceptabel :)
agreed

En ik hoop het, want ik heb 'm wel nodig gehad bij m'n laatste versie:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <link href="eindelijk.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="headerCell">boven</div>
<div id="headerMenu">menu boven</div>
<div id="Pic">pic</div>
<div id="BelowPic">
     <div id="BelowPicLeft"></div>
    <div id="BelowPicRight"></div>
</div>
<div id="Right">
    content<br>
    content<br>content<br>content<br>content<br>
    content<br>content<br>content<br>content<br>
    content<br>content<br>content<br>content<br>
    content<br>content<br>content<br>content<br>
    content<br>content<br>content<br>content<br>
    content<br>content<br>content<br>content<br>

</div>
<div id="footerMenu">
    menu onder
</div>
</body>
</html>


Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

 body {
    padding: 0%;
    margin: 0%;
    width: 100%;
    height: 100%;
    }

#headerCell {
    height: 120px;
    width: 100%;
    vertical-align: middle;
    padding-top: 0px;
    padding-bottom: 0px;
    }

#headerMenu {
    height: 24px;
    background-color: #004;
    color: white;
    padding-top: 0px;
    padding-bottom: 0px;
    }

#footerMenu {
    position: absolute;
    height: 20px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding-left: 80px;
    }

#Pic {
    position: absolute;
    left: 25px;
    top: 144px;
    width: 225px;
    float: left;
    height: 155px;
    padding: 5px;
    }

#BelowPic {
    position: absolute;
    left: 25px;
    top: 309px;
    bottom: 20px;
    width: 225px;
    float: left;

    /* IE Hack */
    height:expression(document.body.clientHeight - 329 + "px");
    }
    #BelowPicLeft {
        float: left;
        width: 49%;
        height: 100%;
        border-left: 0px solid red;
        }
    #BelowPicRight {
        position: relative;
        top: 0px;
        bottom: 0px;
        float: right;
        width: 50%;
        height: 100%;
        border-top: 1px solid red;
        border-left: 1px solid red;
        }
#Right {
    position: absolute;
    left: 250px;
    right: 0px;
    top: 164px;
    bottom: 40px;
    padding: 0px 20px 0px 20px;
    border-left: 1px solid red;
    overflow: auto;

    /* IE Hack */
    height:expression(document.body.clientHeight - 204 + "px");
    width:expression(document.body.clientWidth - 250 + "px");
    }


online voorbeeldje
als iemand voor me zou kunnen testen (met IE6 en SP 2) of dit een security warning geeft dan ben ik diegene dankbaar

woensdag 30 maart 2005 16:18

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

curry684 schreef op woensdag 30 maart 2005 @ 16:04:
Ik snap niet waarom ik die security warning kreeg, die slaat namelijk nergens op. Ik kreeg 'm ook alleen als ik de HTML-file direct vanuit de desktop in IE laadde: als ik 'm op m'n localhost IIS draai en opvraag krijg ik die warning niet. Kan nu niet bij FTP, dus iemand anders zal even moeten checken wat ie doet over het internet. Als je 'm daar niet krijgt is de workaround perfect acceptabel :)
Tools -> Internet Options -> Advanced -> Security -> "Allow active content to run in files on My Computer"
Voor local development kan je die het beste aanzetten ;)

Intentionally left blank

woensdag 30 maart 2005 16:22

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

@ marty: no warning \o/
crisp schreef op woensdag 30 maart 2005 @ 16:18:
[...]

Tools -> Internet Options -> Advanced -> Security -> "Allow active content to run in files on My Computer"
Voor local development kan je die het beste aanzetten ;)
Aha, knap dat die dus strakker staat afgesteld dan internet zone 8)7

Laatste puntje van kritiek dan nog: enige reden om HTML4.01 Transitional DTD te pakken en niet Strict? :)

[edit2]

Je zit trouwens sowieso in quirksmode in FF bij gebrek aan DTD, fix die doctype eens... in strict mode zijn zowel IE als FF beter te controleren in de praktijk.

Tevens gaan 'goede' browsers flippen op je huidige hack, als je 'm in losse CSS zet kun je die het beste zo doen:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#Right {
    position: absolute;
    left: 250px;
    right: 0px;
    top: 164px;
    bottom: 40px;
    padding: 0px 20px 0px 20px;
    border-left: 1px solid red;
    overflow: auto;
}
/* Browsers other than IE ignore CSS rules that start with an asterisk */
* html #Right {
    height:expression(document.body.clientHeight - 204 + "px");
    width:expression(document.body.clientWidth - 250 + "px");
}

Of het allernetst: middels de IE conditional comments zoals ik ze hierboven toonde voor IE een andere stylesheet inladen (die vervolgens de hoofd-CSS importeert).

[ Voor 61% gewijzigd door curry684 op 30-03-2005 16:29 ]

Professionele website nodig?

woensdag 30 maart 2005 20:18

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
curry684 schreef op woensdag 30 maart 2005 @ 16:22:
@ marty: no warning \o/
woo-hoo :)
Laatste puntje van kritiek dan nog: enige reden om HTML4.01 Transitional DTD te pakken en niet Strict? :)
Eh, nee. Da's gewoon omdat het al zo was.
Je heb gelijk, ik moet die nog ff wat beter afstellen.
Tevens gaan 'goede' browsers flippen op je huidige hack, als je 'm in losse CSS zet kun je die het beste zo doen:
Cascading Stylesheet:
1

...
thnx, die truc met die asterix kende ik nog niet :)
Of het allernetst: middels de IE conditional comments zoals ik ze hierboven toonde voor IE een andere stylesheet inladen (die vervolgens de hoofd-CSS importeert).
da's inderdaad een nog nettere oplossing.


Ik ben uiteindelijk toch maar helemaal overgegaan. Was wel ff wat werk, maar heb de rest van de code nu ook aangepast.
Heel erg bedankt voor het meedenken en suggesties :)

woensdag 30 maart 2005 20:39

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Geen probleem :*

Professionele website nodig?

woensdag 30 maart 2005 22:34

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Gaan we die jongen nou meteen CSS hacks aanpraten? Ik probeer altijd zoveel mogelijk hacks te vermijden aangezien nooit zeker is dat ze ook voorwaarts compatible zullen werken.
Als ik al hacks gebruik, dan liever hacks die wel valid CSS opleveren zoals het gebruik van selectors die IE nog niet ondersteund of conditional comments om een aparte stylesheet voor IE te laden...

Intentionally left blank

woensdag 30 maart 2005 22:46

Acties:
  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10-2025

BasieP

zeg ik zie dat dit feestelijke topique een beetje admin only trekken begint te krijgen, en vroeg me af waarom jullie die jongen niet naar w3 schools schoppen over divjes en css??

dit lijkt mij zo toch onderdehand wel erg duidelijk... :/

This message was sent on 100% recyclable electrons.

donderdag 31 maart 2005 00:59

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

crisp schreef op woensdag 30 maart 2005 @ 22:34:
Gaan we die jongen nou meteen CSS hacks aanpraten? Ik probeer altijd zoveel mogelijk hacks te vermijden aangezien nooit zeker is dat ze ook voorwaarts compatible zullen werken.
Als ik al hacks gebruik, dan liever hacks die wel valid CSS opleveren zoals het gebruik van selectors die IE nog niet ondersteund of conditional comments om een aparte stylesheet voor IE te laden...
Ik zie graag de valide oplossing zonder conditional comments voor deze bug van IE, ik ben er ook wel benieuwd naar namelijk :)

De conditional comment is iig wel forwards compatible, alhoewel ik wel zie dat ik hier niet de [if IE le 6] versie heb getoond, excusez-moi ;)

[ Voor 11% gewijzigd door curry684 op 31-03-2005 01:01 ]

Professionele website nodig?

donderdag 31 maart 2005 01:37

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

curry684 schreef op donderdag 31 maart 2005 @ 00:59:
[...]

Ik zie graag de valide oplossing zonder conditional comments voor deze bug van IE, ik ben er ook wel benieuwd naar namelijk :)

De conditional comment is iig wel forwards compatible, alhoewel ik wel zie dat ik hier niet de [if IE le 6] versie heb getoond, excusez-moi ;)
Je haalde hem wel aan, maar als laatste voorbeeld koos je voor de star-html hack ;)
Ik was ook een beetje in de war met een ander topic waar meteen met underscore-hacks werd gestrooid..
Het is echter nog maar zeer de vraag in hoeverre IE7 natuurlijk hier verbetering in gaat brengen, dus helemaal voorwaarts compatible zijn conditional comments eigenlijk ook niet altijd :/

[ Voor 8% gewijzigd door crisp op 31-03-2005 01:38 ]

Intentionally left blank

donderdag 31 maart 2005 06:53

Acties:
  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023

marty

Topicstarter
BasieP schreef op woensdag 30 maart 2005 @ 22:46:
zeg ik zie dat dit feestelijke topique een beetje admin only trekken begint te krijgen, en vroeg me af waarom jullie die jongen niet naar w3 schools schoppen over divjes en css??

dit lijkt mij zo toch onderdehand wel erg duidelijk... :/
sorry? waarom moet ik naar de w3 schools geschopt worden? 99% van het eindresultaat (met divjes en css) ben ik zelf mee gekomen hoor. het enige wat ik uiteindelijk nodig had was die hack die curry684 me gaf.


DOCTYPE is inmiddels XHTML 1.0 Strict overigens :)

donderdag 31 maart 2005 09:02

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

marty schreef op donderdag 31 maart 2005 @ 06:53:
[...]
DOCTYPE is inmiddels XHTML 1.0 Strict overigens :)
Pas je dan ook je mime-type aan? En vind je het niet erg dat IE er dan niets meer mee kan? ;)

Intentionally left blank

donderdag 31 maart 2005 09:41

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Werd XHTML 1.0 niet met text/html officieel namens W3C gedoogd crisp? ;)

[ Voor 5% gewijzigd door curry684 op 31-03-2005 09:42 ]

Professionele website nodig?

donderdag 31 maart 2005 10:27

Acties:
  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

curry684 schreef op donderdag 31 maart 2005 @ 09:41:
Werd XHTML 1.0 niet met text/html officieel namens W3C gedoogd crisp? ;)
Gedoogd wel ja, maar als text/html heeft XHTML geen enkel voordeel boven HTML 4 (Strict). Als je echter uitgaat van tagsoup en later wel besluit om het 'goed' te gaan doen kan je nog wel eens voor vreemde verassingen komen te staan aangezien XHTML niet alleen syntactisch anders is, maar ook beperkingen oplegt aan bijvoorbeeld scripting e.d. Daar dien je dus bij het gebruik van XHTML (zelfs als je het nu als text/html verstuurd) terdege rekening mee te houden.
Bovendien, als je backend niet XML-based is, heb je geen enkele garantie dat je output ten alle tijden well-formed is, en is XHTML dus sowieso af te raden.

Intentionally left blank

donderdag 31 maart 2005 10:33

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Ik ontwikkel zelf op het moment ook alles voor HTML4.01 Strict hoor ;) Maar zolang je zelf alle backend code schrijft (middels PHP, XSLT oid) is XHTML geen enkel probleem imho, je hebt alleen (concrete) problemen als je externe scripts gebruikt of ASP.NET 1.* oid.

De stap van 4.01 Strict naar XHTML 1.* is toch minimaal als je een beetje cleane code aanhoudt, en kun je dus ook uitvoeren zodra de browsers het wel structureel ondersteunen.

[ Voor 26% gewijzigd door curry684 op 31-03-2005 10:34 ]

Professionele website nodig?

vrijdag 1 april 2005 09:10

Acties:

Verwijderd

Haal ook eens
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
weg

Ik heb bij mijn eigen website's altijd gehad zodra ik in Dreamweaver het bewerk , komt die rommel + meta tags erbij , dan doet ie het in Firefox perfect , maar in IE is het gewoon brak , en layout valt uit elkaar..!

http://validator.w3.org/ <--- Hier kun je anders wat fouten eruit laten halen .. waardoor maybe fout gaat

vrijdag 1 april 2005 10:04

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Je adviseert 'm eerst z'n doctype te slopen en vervolgens te valideren? :?

Da's 1 april hopelijk he? 8)7

Professionele website nodig?

vrijdag 1 april 2005 10:16

Acties:

Verwijderd

mayonaise schreef op vrijdag 01 april 2005 @ 10:04:
Je adviseert 'm eerst z'n doctype te slopen en vervolgens te valideren? :?

Da's 1 april hopelijk he? 8)7
Als je em eruit sloopt en hij werkt NOG niet , dan zet je het toch terug ? Want das dan niet de bug , en als je het terug heb gezegt ga je hem toch valideren om te kijken waar de fout dan zit.. :P

Zo doe ik het altijd , meestal is het opgelost als je die doctype eruit sloopt want dat is rommel

vrijdag 1 april 2005 10:23

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

Verwijderd schreef op vrijdag 01 april 2005 @ 10:16:
[...]


Als je em eruit sloopt en hij werkt NOG niet , dan zet je het toch terug ? Want das dan niet de bug , en als je het terug heb gezegt ga je hem toch valideren om te kijken waar de fout dan zit.. :P

Zo doe ik het altijd , meestal is het opgelost als je die doctype eruit sloopt want dat is rommel
Nee een doctype is geen rommel, een doctype definieert het type van het document dat je aanbiedt. Zodra je het doctype sloopt jas je iedere browser linea recta in quirksmode, en ja in quirksmode werken baggersites (denk MS Frontpage) vaak beter dan in standards compliance mode. Met een valide doctype echter gaat zowel FF als IE direct in standards mode werken, en werken goed ontworpen, validerende en correct gestylede sites veel beter dan in quirks mode.

WERK NOOIT ZONDER DOCTYPE, EN ONTWIJK QUIRKS MODE WAAR MOGELIJK.

Professionele website nodig?

vrijdag 1 april 2005 10:25

Acties:

Verwijderd

Hmm ok , dat wist ik niet ( omdat voor school gin moeite ga doen .. dus daarom doctype eruit sloop ) ..
Sorry voor mijn foute "hulp" , en thnx voor uitleg :P

vrijdag 1 april 2005 10:33

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 07-05 22:49

curry684

left part of the evil twins

No problem :) Sorry ook dat ik het ook zo hard rechtzet, maar een dermate fout advies kan ik hier niet 'onbestraft' laten staan, anders nemen mensen het dadelijk voor waar aan :P

Overigens is zonder doctype de eerste error die je uit de validator krijgt per definitie "No doctype specified" dus dat vond ik sowieso al een erg vreemde opmerking van je ;)

In het algemeen volg je het volgende pad om tot een goede site te komen nowadays:
• Zorg dat het in FF perfect werkt.
• Zodra je een probleem tegenkomt: valideer HTML en CSS, en kom pas inhoudelijk aan je code zodra het weer perfect valideert.
• Zodra het in FF perfect werkt, fix dingen tot ze in IE correct werken.
• Probeer het alsnog validerend te krijgen voordat je oplevert ;)

Zelfs een complexe site als Gathering of Tweakers waar je nu naar kijkt kan 100% valideren en in IE en FF perfect werken, zie hier :) De paar kleine validatieerrors die op andere plekken van het forum nog rondzweven zijn gefixed in de volgende update van React (die komen uit de forumsoftware en niet de templates namelijk).

[ Voor 3% gewijzigd door curry684 op 01-04-2005 10:33 ]

Professionele website nodig?

Pagina: 1
Reageer