[css] problemen in Mozilla

Pagina: 1
Acties:

  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
Ik probeer kladblok na te bouwen in een browser en loop daarbij op 2 style-puntjes vast.

De eerste is een probleem met de hoogte en breedte die ik op 100% wil hebben
In Mozilla (Firebird 0.7) doet ie beide fout (rekt ze te ver uit)
en in IE (5.0) rekt ie 'm alleen vertikaal te ver uit.

Het tweede probleem is dat in Mozilla het menu (File, Edit, etc.) en de textarea naast elkaar komen te staan, ipv onder elkaar.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title></title>
 <link href="/notepad.css" rel="stylesheet" type="text/css">
 <script language="javaScript" type="text/javascript" src="/notepad.js"></script>
</head>

<body onLoad="det_input_value();">

<div id="FileMenu">
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);" onClick="nieuw();">New</div>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);" onClick="openen();">Open</div>
    <div class="menuNode"><i>Save</i></div>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);"
        onClick="bewaren_als();">Save As</div>
    <hr>

    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Print</div>
    <hr>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Close</div>
</div>
<div id="EditMenu">
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Cut</div>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Copy</div>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Paste</div>

    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Remove</div>
    <hr>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Search</div>
    <hr>
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Select All</div>
</div>
<div id="ToolsMenu">
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);"
        onClick="changeFont();">Font Type</div>

</div>
<div id="HelpMenu">
    <div class="menuNode" onMouseOver="hlNode(this);" onMouseOut="llNode(this);">Info</div>
</div>
<form action="/np.php" method="post" name="NotepadFrm" id="NotepadForm" style="margin: 0px;">
<div id="outerEdge">
    <div id="header">
        Naamloos - Kladblok
    </div>
    <div id="menu">
        <div id="File" onMouseOver="highlight('File');" onMouseOut="lowlight('File');"
            onClick="show_menu('File');">File</div>

        <div id="Edit" onMouseOver="highlight('Edit');" onMouseOut="lowlight('Edit');"
            onClick="show_menu('Edit');">Edit</div>
        <div id="Tools" onMouseOver="highlight('Tools');" onMouseOut="lowlight('Tools');"
            onClick="show_menu('Tools');">Format</div>
        <div id="Help" onMouseOver="highlight('Help');" onMouseOut="lowlight('Help');"
            onClick="show_menu('Help');">Help</div>
    </div>
    <textarea id="input" name="Body" onFocus="hide_menu('active');"></textarea>
</div>
<input type="hidden" name="Subject" value="">
</form>
</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
84
85
86
87
88
89
90
91
92
93
 body {
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial;
    font-size: 8pt;
    color: black;
    letter-spacing: -1px;
    }

#outerEdge {
    width: 100%;
    height: 100%;
    border-left: 1px solid #DDD;
    border-top: 1px solid #DDD;
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    background-color: #CCC;
    padding: 2px;
    }
#header {
    width: 100%;
    padding: 3px 20px;
    background-color: darkblue;
    color: white;
    font-weight: bold;
    }
#menu {
    width: 100%;
    padding: 3px 6px 4px;
    }
#input {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    }

#File, #Edit, #Tools, #Help {
    width: 60px;
    float: left;
    border: 1px solid #CCC;
    cursor: default;
    }
#FileMenu, #EditMenu, #ToolsMenu, #HelpMenu {
    display: none;
    position: absolute;
    top: 41px;
    width: 100px;
    padding: 1px;
    border-left: 2px solid #EEE;
    border-top: 2px solid #EEE;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    background-color: #CCC;
    }
#FileMenu {
    left: 8px;
    }
#EditMenu {
    left: 68px;
    }
#ToolsMenu {
    left: 128px;
    }
#HelpMenu {
    left: 188px;
    }
.menuNode {
    padding: 3px 10px;
    }

/* values for notepad.open.php */
#openFileTable {
    width: 100%;
    border: 2px solid #000;
    }
#openFileTable TD {
    padding: 1px 3px 1px;
    font-size: 8pt;
    font-family: ms sans serif, verdana, arial;
    letter-spacing: 0px;
    }
.openFileTableMenuTD {
    font-size: 9pt;
    font-weight: bold;

    background-color: #CCC;
    border-left: 2px solid #EEE;
    border-top: 2px solid #EEE;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    }


Screenshotjes:

Mozilla: Afbeeldingslocatie: http://start.excudo.net/notepad_moz.png
IE: Afbeeldingslocatie: http://start.excudo.net/notepad_ie.png

Ik komt (volgens mij) doordat die textarea op 100% staat en dat ie die op schermgrootte wil uitrekken waardoor wat er om heen staat buiten de schermgrootte valt. Nou ben ik al aardig wat aan stoeien geweest me die stylesheet, maar het wordt er dan eigenlijk alleen maar erger op. De enige oplossing die ik kon bedenken was alles absoluut definieren, maar dat vind ik eigenlijk niet zo mooi. En bovendien werkt dat niet als je de grootte van het scherm aanpast. Dus ik zoek naar een 'relatieve' oplossing.


(btw, de naam (in die blauwe balk) komt uiteindelijk nog in de balk van de browser te staan :))

  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
ff je textarea een clear:both geven...

daarnaast kun je voor je menutjes beter list gebruiken (en geen divjes)....

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
faabman schreef op 27 september 2004 @ 16:27:
ff je textarea een clear:both geven...
zo dus?

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
/* id van de textarea */
#input {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    clear:both;
    }

Dit helpt helaas niet niet. Het maakt geen verschil in zowel IE en Mozilla
daarnaast kun je voor je menutjes beter list gebruiken (en geen divjes)....
Semantisch gezien? Of moet het m'n probleem ook oplossen?

Ik heb dit geprobeerd:

HTML:
1
2
3
4
5
6
7
8
9
10
    <ul id="menu">
        <li id="File" onMouseOver="highlight('File');" onMouseOut="lowlight('File');"
            onClick="show_menu('File');">File</li>
        <li id="Edit" onMouseOver="highlight('Edit');" onMouseOut="lowlight('Edit');"
            onClick="show_menu('Edit');">Edit</li>
        <li id="Tools" onMouseOver="highlight('Tools');" onMouseOut="lowlight('Tools');"
            onClick="show_menu('Tools');">Format</li>
        <li id="Help" onMouseOver="highlight('Help');" onMouseOut="lowlight('Help');"
            onClick="show_menu('Help');">Help</li>
    </ul>

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
#menu {
    margin: 0;
    padding: 3px 6px 4px;
    list-style-type: none;
    }
#menu li {
    width: 60px;
    padding: 3px 6px 4px;
    float: left;
    border: 1px solid #CCC;
    cursor: default;
    }

Maar dat geeft hetzelfde probleem in Mozilla

  • faabman
  • Registratie: Januari 2001
  • Laatst online: 08-08-2024
marty schreef op 27 september 2004 @ 16:53:
[...]

zo dus?

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
/* id van de textarea */
#input {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    clear:both;
    }
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
/* id van de textarea */
#input {
        display:block;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    clear:both;
    }

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!


  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
ok, dit lost het probleem op dat het in Mozilla naast elkaar komt ipv onder elkaar. Maar echt helpen doet het me niet, want nu zet mozilla een textarea neer die maar drie rijen hoog is en ik wil 'm juist om 100% hebben. Bovendien heb nog steeds (na wat andere kleine aanpassingen) een horizontale scrolbalk (die weliswaar nog maar heel klein is, maar desalniettemin aanwezig)

En ik zit ook nog steeds met het probleem van de 100% in IE, waar ik ik nog steeds een verticale scrolbalk heb.

m'n (relevante) css ziet er nu zo uit:
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
 body {
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial;
    font-size: 8pt;
    color: black;
    letter-spacing: -1px;
    }

#outerEdge {
    width: 100%;
    height: 100%;
    border-left: 1px solid #DDD;
    border-top: 1px solid #DDD;
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    background-color: #CCC;
    padding: 2px;
    }
#header {
    padding: 3px 20px;
    background-color: darkblue;
    color: white;
    font-weight: bold;
    }
#menu {
    margin: 0px 0px 1px;
    padding: 3px 6px 4px;
    list-style-type: none;
    }
#menu li {
    width: 60px;
    padding: 1px 6px 2px;
    float: left;
    border: 1px solid #CCC;
    cursor: default;
    }
#input {
    display:block;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    clear:both;
    }

(menu heb ik omgezet naar een <ul>)

[ Voor 7% gewijzigd door marty op 27-09-2004 17:42 ]


Verwijderd

waar is de height van het body en html element? Dat zou je probleem in Moz moeten oplossen, gebruik de DOM inspector, of web developer toolbar om de DOM structuur van je document te bekijken, daar kan je veel van leren.

  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
Verwijderd schreef op 27 september 2004 @ 18:04:
waar is de height van het body en html element?
Heb ik nu ook op 100% gezet, maar nog steeds geen verschil
Dat zou je probleem in Moz moeten oplossen, gebruik de DOM inspector, of web developer toolbar om de DOM structuur van je document te bekijken, daar kan je veel van leren.
Ben even naar de website van mozilla gegaan en vond daar dit:

Launching DOM Inspector

- From within Mozilla
You will find it under the Tools > Web Development menu in any Mozilla window.
daar staat dus niets bij mij

From the command line
Run: /path/to/mozilla -inspector [url]
ook geprobeerd, wordt de browser (Firebird) gewoon gestart

From the Mozilla sidebar
First you must install the sidebar, via Edit > Preferences > Advanced > DOM Inspector. After you have done that, simply open up the inspector panel and visit a website. It's that simple!
was het maar zo simpel! Als ik naar Advanced ga wordt er met geen woord gerept over een DOM inspector. De (ingebouwde) search levert ook precies 0 resultaten op

Heb ook de allerlaatste versie van Firefox nog gedownload, maar daar hetzelfde verhaal :?

Met deze firefox is het probleem van de 3 rows overigens wel weer opgelost - hier wordt ie dus wel weer uitgerekt. Maar ook hier, net als in IE, rekt ie 'm te ver uit waardoor ik een verticale scrollbalk krijg. En bovendien zit ik ook daar nog steeds met een horizontale scrollbalk.

Verwijderd

Hmm gaat lekker daar :) IK zal zo meteen ff op werk wat in elkaar fietsen.

  • Grijze Vos
  • Registratie: December 2002
  • Laatst online: 21-02 23:50
marty, heb je de dom inspector extension geinstalleerd? Bij de installatie moet je het aangeven normaliter, maar ik kan het me voorstellen dat de extension ook los te downen valt.

(Of niet, kan hem niet in de lijst vinden. Re-install die FF dan maar ff, en vink de dom inspector aan bij de install.)

Op zoek naar een nieuwe collega, .NET webdev, voornamelijk productontwikkeling. DM voor meer info


  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
Grijze Vos schreef op 28 september 2004 @ 08:44:
(Of niet, kan hem niet in de lijst vinden. Re-install die FF dan maar ff, en vink de dom inspector aan bij de install.)
Aha, daar lag het aan.
In m'n enthiasme heb ik tijdens het installeren die optie over het hoofd gezien. Wel typisch dat ze er op die about pagina bij mozilla.org er geen melding van maken dat je dat moet aanvinken (of ik moet dat óók over het hoofd hebben gezien :-))

Wordt er op het moment nog niet zoveel wijzer van, want hoewel in het browser gedeelte aan de onderkant de juiste pagina wel laadt, blijft het Inspect gedeelte gewoon leeg. Maarja, zal nog wel ergens wat instellingen goed moeten zetten. Maar daar kom ik wel uit denk ik


Maar even afgezien van die DOM inspector....
Volgens het boxmodel is de width en height de binnenkant van de rechthoek. Is dat niet ongelovelijk krom opgezet ??? Want zo krijg je een hoogte toch nooit goed? De width gaat wel goed als je die standaardwaarde op auto laat staan - dan rekt ie 'm zelf uit. Maar qua hoogte zul je in mijn geval altijd met 100% moeten gaan werken. Maar dan krijg je dus dit soort taferelen.

Even een update op m'n 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Untitled</title>
</head>

<body>

<form action="/np.php" method="post" name="NotepadFrm" id="NotepadForm" style="margin: 0px;">
<div id="outerEdge">
    <ul id="menu">
        <li id="File">File</li>

        <li id="Edit">Edit</li>
        <li id="Tools">Format</li>
        <li id="Help">Help</li>
    </ul>
    <textarea id="input" name="Body"></textarea>
</div>
<input type="hidden" name="Subject" value="">
</form>

</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
 html {
    widht: 100%;
    height: 100%;
    }
 body {
    widht: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial;
    font-size: 8pt;
    color: black;
    letter-spacing: -1px;
    -moz-box-sizing: border-box;
    }

#outerEdge {
    height: 100%;
    border-left: 1px solid #DDD;
    border-top: 1px solid #DDD;
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    background-color: #CCC;
    padding: 2px;
    }
#header {
    padding: 3px 20px;
    background-color: darkblue;
    color: white;
    font-weight: bold;
    }
#menu {
    margin: 0px 0px 1px;
    padding: 3px 6px 4px;
    list-style-type: none;
    }
#menu li {
    width: 60px;
    padding: 1px 6px 2px;
    float: left;
    border: 1px solid #CCC;
    cursor: default;
    }
#NotepadForm {
    display: block;
    width: 100%;
    height: 100%;
    }
#input {
    display: block;
    width: 100%; 
    height: 100%; 
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    clear:both;
    }


Het probleem in firebird met die 3 regels lag er aan dat ik m'n <form>-tag een height van 100% moest geven. Dat was toen opgelost.

Met deze code gaat het volgende nog steeds fout:

IE: verticale scrollbalk
Firebird: verticale scrollbalk
Firefox: verticale scrollbalk
(Firefox had zowel een verticale als horizontale scrollbalk zonder die -moz-box-sizing: border-box;, maar de horizontale was daarmee opgelost)

Hoe kom ik nu van die verticale scrollbalk af?. Ik heb geprobeerd
#outerEdge, #NotepadForm & #input ook zo'n -moz-box-sizing: border-box; te geven en ik zag vervolgens de scrollbalk wel ietsje groter worden (het verschil dus kleiner), maar het lost niets op (en voor IE uiteraard ook niet)

  • Shagura
  • Registratie: Augustus 2001
  • Laatst online: 22-05 13:12
<--- nub

[ Voor 96% gewijzigd door Shagura op 28-09-2004 16:28 ]


Verwijderd

Beetje te druk vandaag, hoop er morgen aan toe te komen.

  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
Verwijderd schreef op 28 september 2004 @ 17:56:
Beetje te druk vandaag, hoop er morgen aan toe te komen.
No Worries. Ik vind het altijd al heel cool als er mensen meedenken :)
Blijf ondertussen zelf ook nog even puzzelen.

Maar afgezien van hoe dit op te lossen is vind ik een discussie (?) over die hoogte ook wel interessant. Dit soort problemen moeten bij het maken van de standaard toch ook over na zijn gedacht. Het kan toch niet de bedoeling zijn dat je zoiets basaals met trucen moet gaan oplossen?

Verwijderd

Ik heb hier iets in de lucht gegooid van wat ik denk dat je wil bereiken. Volgens mij werkt het alleen in Mozilla, omdat die wel edge detectie van absoluut gepositioneerde voorwerpen ondersteunt:
http://martijn.heelveel.info/test/notepad.htm

Je zou dit kunnen proberen als lapmiddel voor IE:
http://www.doxdesk.com/software/js/position.html

edit:
O ja, de box-sizing verandert voor Mozilla, want normaal gesproken worden border en padding niet bij de width meegerekend, vandaar de scrollbars die je kreeg onder andere.

[ Voor 21% gewijzigd door Verwijderd op 28-09-2004 23:32 ]


  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
Verwijderd schreef op 28 september 2004 @ 23:29:
Ik heb hier iets in de lucht gegooid van wat ik denk dat je wil bereiken. Volgens mij werkt het alleen in Mozilla, omdat die wel edge detectie van absoluut gepositioneerde voorwerpen ondersteunt:
http://martijn.heelveel.info/test/notepad.htm

Je zou dit kunnen proberen als lapmiddel voor IE:
http://www.doxdesk.com/software/js/position.html

edit:
O ja, de box-sizing verandert voor Mozilla, want normaal gesproken worden border en padding niet bij de width meegerekend, vandaar de scrollbars die je kreeg onder andere.
Dit werkt (na een kleine aanpassing) idd prima in mozilla, maar idd niet in IE. Het heeft alleen niets met scrollbalken te maken, maar met het fiet dat de textarea niet naar onder en naar rechts uitrekt :( Alle oplossingen die ik daarop verzin hebben vervolgens weer scrollbalken in Mozilla tot gevolg :'(

De code na een paar aanpassingen (+ heb 'm even opgeschoond door de overbodige dingen er uit te halen die niets met het probleem te maken hebben)

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title></title>
</head>

<body>

<div id="outerEdge">
    <form action="/np.php" method="post" name="NotepadFrm" id="NotepadForm" style="margin: 0px;">
    <ul id="menu">
        <li id="File">File</li>
        <li id="Edit">Edit</li>
        <li id="Tools">Format</li>
        <li id="Help">Help</li>
    </ul>
    <textarea id="input" name="Body"></textarea>
    <input type="hidden" name="Subject" value="">
    </form>
</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
 *{
    -moz-box-sizing:border-box;
    }
 body, html {
    margin: 0px;
    padding: 0px;
    font-family: verdana, arial;
    font-size: 8pt;
    color: black;
    letter-spacing: -1px;
    }
#outerEdge {
    width: 100%;
    height: 100%;
    border-left: 1px solid #DDD;
    border-top: 1px solid #DDD;
    border-right: 1px solid #AAA;
    border-bottom: 1px solid #AAA;
    background-color: #CCC;
    padding: 2px;
    margin:0;
    }
#menu {
    margin: 0px 0px 1px;
    padding: 3px 6px 4px;
    list-style-type: none;
    }
#menu li {
    width: 60px;
    padding: 1px 6px 2px;
    float: left;
    border: 1px solid #CCC;
    cursor: default;
    }
#input {
    position:absolute;
    top: 30px;
    left: 2px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    padding: 1px;
    font-family: fixedsys, lucida console;
    }

Verwijderd

De oplossing die ik gaf, daar rekte de textarea toch wel uit naar rechts en naar beneden?

Hier hetzelfde als de vorige, alleen met de script-hack voor IE6 van doxdesk:
http://martijn.heelveel.info/test/notepad2.htm
Het lijkt me toch dat het goed werkt, niet?

  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
Verwijderd schreef op 29 september 2004 @ 12:53:
De oplossing die ik gaf, daar rekte de textarea toch wel uit naar rechts en naar beneden?

Hier hetzelfde als de vorige, alleen met de script-hack voor IE6 van doxdesk:
http://martijn.heelveel.info/test/notepad2.htm
Het lijkt me toch dat het goed werkt, niet?
Ah, die hack is alleen voor IE6...dat was me even ontgaan. Ik heb het daar nu mee getest en dat werkt inderdaad.
Echter:
- In IE5 (en waarschijnlijk 5.5 dus) werkt het niet.
- In Firebird ben ik m'n textarea kwijt
- In Firefox heb ik de textarea wel, maar heb ik geen cursor :?

Echt veel wijzer wordt ik er dus niet van.

Ik heb even 8 screenshotjes gemaakt. 4 van notepad.htm en 4 van notepad2.htm - met de browsers IE 5.0, IE 6.0, Mozilla Firebird en Mozilla Firefox.
http://start.excudo.net/notepad_martijn.zip

Maar zoals ik al eerder aangaf wil ik niet te veel gaan 'trucen'. Ik zoek meer naar een universele oplossing dan dat ik met dit soort hacks aankom. Maar als dat niet werkt zal ik wel moeten natuurlijk - ook al zou ik dat echt te zot voor woorden vinden voorziets basaals.

Verwijderd

Hmm, ja ik zie de problemen in de browser, word er depressief van :(

Als je een universele oplossing wil, dan denk ik dat je beter kunt overstappen op een tabel-opmaak. Over het algemeen werkt dat toch een stuk betrouwbaarder (browser die dan opeens wel hetzelfde doen).

  • disjfa
  • Registratie: April 2001
  • Laatst online: 12-05 15:11

disjfa

be

Verwijderd schreef op 30 september 2004 @ 00:34:
Als je een universele oplossing wil, dan denk ik dat je beter kunt overstappen op een tabel-opmaak. Over het algemeen werkt dat toch een stuk betrouwbaarder (browser die dan opeens wel hetzelfde doen).
Ehh nee, als je het normaal opbouwd dan zal het goed werken, als je het snel en makkelijk wil is dit de zelfde oplossing. Als je het simpel en moeilijk wilt oplossen is het een idee om het met tabellen op te lossen.

Ik heb niet naar je html gekeken omdat meerdere die laatste opmerking als een goed idee hebben gevonden maar ik zou toch naar wat betere oplossingen zoeken :)

disjfa - disj·fa (meneer)
disjfa.nl


  • marty
  • Registratie: Augustus 2002
  • Laatst online: 27-03-2023
disjfa schreef op 30 september 2004 @ 00:45:
[...]

Ehh nee, als je het normaal opbouwd dan zal het goed werken, als je het snel en makkelijk wil is dit de zelfde oplossing. Als je het simpel en moeilijk wilt oplossen is het een idee om het met tabellen op te lossen.

Ik heb niet naar je html gekeken omdat meerdere die laatste opmerking als een goed idee hebben gevonden maar ik zou toch naar wat betere oplossingen zoeken :)
Ehh....je klinkt nogal cryptisch :)

Volgens jou doe je met tabellen dus onnodig moeilijk en niet goed? En met divjes, etc doe je het makkelijk en wel goed?

Ik ben inderdaad met divjes aan de gang gegaan omdat die nu eenmaal hip zijn tegenwoordig en je hier bijna niet anders leest. Maar ik heb zojuist toch even geprobeerd om het met tabellen op te lossen.... en in minder dan 5 minuten had ik het omgebouwd en in alle 4 de browsers werkend! 8)7

maw woorden: met die divjes heb ik 2 dagen zitten kutten (hoezo makkelijk?) en het werkt nog niet fatsoenlijk (hoezo goed??) en met tabellen heb ik het in 5 minuten werkend (hoezo moeilijk?) en het lijkt tot nog toe universeel (hoezo niet goed?) :Y)
Pagina: 1