Toon posts:

[css] Hoe OS defined border terug?

Pagina: 1

Acties:

45 views sinds 30-01-2008
Reageer

woensdag 25 juni 2003 16:13

Acties:

Verwijderd

Topicstarter

Ik geef gebruikers de keuze om een border width en een border color te wijzigen van een form element.

Zodra ze echter de optie selecteren om niets te wijzigen aan border instellingen, krijg ik met geen mogelijkheid meer de default border terug.

Iemand een idee? style.border=''; helpt niet, rechtstreeks een style = ''; zetten werkt ook niet.

woensdag 25 juni 2003 16:16

Acties:

Eskimootje

Kijk eens op w3.org wat de standaarden zijn en gebruik die.

woensdag 25 juni 2003 16:17

Acties:

Dennis

Eskimootje schreef op 25 June 2003 @ 16:16:
Kijk eens op w3.org wat de standaarden zijn en gebruik die.

Lekker nuttig antwoord.

woensdag 25 juni 2003 16:21

Acties:

Verwijderd

Misschien door een className toe te kennen via die select optie?

woensdag 25 juni 2003 16:29

Acties:

André

Analytics dude

Verwijderd schreef op 25 June 2003 @ 16:13:
Ik geef gebruikers de keuze om een border width en een border color te wijzigen van een form element.

Zodra ze echter de optie selecteren om niets te wijzigen aan border instellingen, krijg ik met geen mogelijkheid meer de default border terug.

Iemand een idee? style.border=''; helpt niet, rechtstreeks een style = ''; zetten werkt ook niet.

Ik denk dat je voor dat de gebruiker begint je op een of andere manier de standaard instellingen ergens op moet slaan.

ddc schreef op 25 June 2003 @ 16:17:
[...]

Lekker nuttig antwoord.

Nee, die van jou is nuttig

woensdag 25 juni 2003 16:33

Acties:

Verwijderd

Topicstarter

André schreef op 25 June 2003 @ 16:29:
Ik denk dat je voor dat de gebruiker begint je op een of andere manier de standaard instellingen ergens op moet slaan.

De standaard instellingen zijn niet op te vragen. Zolang er nog geen style attributes aanwezig zijn krijg je undefined terug.

Ik ga die className direct even proberen. Zou me wat zijn als dat werkt.

woensdag 25 juni 2003 16:37

Acties:

Bosmonster

*zucht*

Standaard is toch border:2px inset ofzo? Is wel weer afhankelijk van browser/OS

woensdag 25 juni 2003 16:39

Acties:

Verwijderd

Topicstarter

className werkt niet, helaas... next...

woensdag 25 juni 2003 16:40

Acties:

Verwijderd

Topicstarter

Bosmonster schreef op 25 June 2003 @ 16:37:
Standaard is toch border:2px inset ofzo? Is wel weer afhankelijk van browser/OS

Op WinXP heb je voor het oog weer een 1px solid #7F9DB9, ipv een inset style. Natuurlijk weer afhankelijk van de instellingen bij de client.

Ik vind dit maar vreemd, er is ook niet zo makkelijk wat over te vinden. Er moeten toch meer mensen last hebben gehad hiervan?

Ik heb ook gezocht op iets van een removeStyle, removeStyleAttribute, removeStyleChild etc etc method, maar helaas.

[ Voor 12% gewijzigd door Verwijderd op 25-06-2003 16:41 ]

woensdag 25 juni 2003 16:45

Acties:

André

Analytics dude

Dit werkt wel:

HTML:

<html>
<head>
  <style>
  .A { border: 2px solid #FF0000; }
  .B { border: 4px solid #FFFF00; }
  .C {  }
  </style>
  <script language="javascript">
    function A()
    { document.getElementById("Test").className = "A"; }
    
    function B()
    { document.getElementById("Test").className = "B"; }
    
    function C()
    { document.getElementById("Test").className = "C"; }
  </script>
</head>
<body>

<div id="Test">Andre</div><p>

<a onclick="A()">AAAAA</a><p>
<a onclick="B()">BBBBB</a><p>
<a onclick="C()">CCCCC</a><p>

</body>
</html>

woensdag 25 juni 2003 16:48

Acties:

Verwijderd

Topicstarter

[quote]André schreef op 25 June 2003 @ 16:45:
Dit werkt wel:
/quote]

Ja, dit is niet het probleem

Je laat ze switchen tussen classes. In mijn opzet kunnen ze zelf met de colorpicker een kleur kiezen en met een dropdown een borderwidth kiezen.

Die wordt vervolgens met oChild.style.border gezet en schijnbaar zonder de mogelijkheid de default OS style terug te krijgen.

woensdag 25 juni 2003 16:51

Acties:

André

Analytics dude

Dan gebruik je toch niet oChild.style.border maar pas je de inhoud van die class in je stylesheet aan, en geeft je oChild die class.

woensdag 25 juni 2003 17:02

Acties:

Verwijderd

Topicstarter

André schreef op 25 June 2003 @ 16:51:
Dan gebruik je toch niet oChild.style.border maar pas je de inhoud van die class in je stylesheet aan, en geeft je oChild die class.

Dan kan ik een hele class gaan uitpluizen en inpluizen

Liever een conventionele manier

woensdag 25 juni 2003 17:31

Acties:

Verwijderd

Topicstarter

Ik ben er uit. Je moet dus in zijn geheel de hele style van een object verwijderen. Daarna kun je weer loopen door je eigen style collectie en die toevoegen.

document.getElementById("stylePreview").removeAttribute("style");

woensdag 25 juni 2003 18:24

Acties:

wicher|IA

Ik kan me herinnneren dat ik eerder iets hiermee had, het ging toen om border of background.

Ik dacht dat toen style.border='' inderdaad niet het gewenste resultaat opleverde, maar style.borderColor='' de kleur wél weer terugzette naar de systeemstandaard.

_____ EDIT _________________________________________

Of het volgens de W3C-standaard is weet ik niet uit m'n hoofd, en kan ik ook zo snel niet vinden, maar het werkt in IE6 en Opera7. In Mozilla 1.4 werkt het dan helaas weer niet...

HTML:

<table border="50" style="
height:600px;
width:600px;"
onmouseover="
this.style.borderColor='red';
this.style.borderStyle='dotted';" 
onmouseout="
this.style.borderColor='';
this.style.borderStyle='';">
<tr>
<td>
</td>
</tr>
</table>

Bekijk het zelf

[ Voor 52% gewijzigd door wicher|IA op 25-06-2003 18:35 ]

woensdag 25 juni 2003 21:18

Acties:

Verwijderd

Topicstarter

wicher schreef op 25 juni 2003 @ 18:24:
Promoveerde wicher met dit stukje code aan de University of W3C

Internet Explorer heeft een nare eigenschap wat dat betreft. Als ik dit namelijk gebruik, dan zet die de border niet terug naar de OS standaard layout, maar naar een 2px inset border.

Dit viel mij ook al op bij een wijziging van de backgroundColor. Zodra je deze wijzigt van bijvoorbeeld een <input type="text"> dan vervalt opeens de standaard border naar een inset border, heel erg vervelend dus.

Een color,padding,margin,font-family,font-size wijziging wijzigt niets aan de border, maar een background-color wel. Lijkt mij een bug, maar dat zeg ik al snel

donderdag 26 juni 2003 00:31

Acties:

wicher|IA

Verwijderd schreef op 25 June 2003 @ 21:18:
[...]

Internet Explorer heeft een nare eigenschap wat dat betreft. Als ik dit namelijk gebruik, dan zet die de border niet terug naar de OS standaard layout, maar naar een 2px inset border.

Dit viel mij ook al op bij een wijziging van de backgroundColor. Zodra je deze wijzigt van bijvoorbeeld een <input type="text"> dan vervalt opeens de standaard border naar een inset border, heel erg vervelend dus.

Een color,padding,margin,font-family,font-size wijziging wijzigt niets aan de border, maar een background-color wel. Lijkt mij een bug, maar dat zeg ik al snel

Die 'bug' heeft er volgens mij mee te maken dat Windows sinds versie XP,
en Opera sinds een bep. versie twee verschillende systeemstandaarden heeft:
- de skin
- de OS-systeemstandaard

Standaard zie je de skin, en naar je beleving is dat dus het standaarduiterlijk.

Echter, de browser kan in die skin niet los de backgroundColor, borderStyle e.d. aanpassen.
Wat doet-ie dan dus om je wijziging toch door te voeren? Hij schakelt de skin uit,
en schakelt over op de OS-systeeminstellingen, en past daarin je wijziging toe.
Zo komt het dus dat je toch ineens een inset (of outset) border krijgt, die je niet wilde.
(Althans, bij mij treed het probleem op dezelfde manier op, en hier komt het volgens mij hierom.)

Maar om terug te komen op mijn code uit mijn vorige post: die werkt in MSIE6 en Opera7 prima hoor.

Om het nog wat duidelijker te maken heb ik een button gebruikt ipv een table:

HTML:

<input type="button" style="
height:100px;
width:200px;"
onmouseover="
this.style.borderColor='red';
this.style.borderStyle='dotted';" 
onmouseout="
this.style.borderColor='';
this.style.borderStyle='';" />

Zo ziet het eruit in resp. Opera6, Opera7, Mozilla1.4 en MSIE6:
Afbeeldingslocatie: http://www.matthijsgall.nl/got/css_border_sysstd_ss.png

In alle browsers is dus hetzelfde bestand geopend.
Ik heb er een tweede button bijgezet, die wel de 'onmouseover' heeft, maar niet de 'onmouseout'.
Ik ben over alle knoppen heengeweest met de muis, en zo kun je op elke tweede knop hoe de knop
eruitzag toen de muis erop was. (Ik kan nu eenmaal niet met de muis op 4 plaatsen tegelijk zijn.)

Zoals je ziet pakt Opera6 sowieso al de 'heenweg' niet, terwijl Mozilla1.4 alleen de 'terugweg' niet pakt.

Opera7 en MSIE6 pakken het echter wél goed. Zoals je ziet gebruiken ze allebei geskinde knoppen.
Na de onmouseout komen deze beide weer prima tevoorschijn.
Hier zie je echter ook weer dezelfde bug: om de nieuwe borderinstelling netjes te kunnen toepassen
zetten beide browsers er even de skin voor uit, en gebruiken de OS-systeemstandaard.

Bekijk het zelf

Aangezien ze daarna echter wel weer gewoon terugkomen met de geskinde standaardknop,
volgt hier dus ook een 'workaround' uit voor je probleem dat de border meegaat met de background.
Je moet dan maar gewoon de border wel instellen, op solid oid, zodat er ieg geen outset/inset komt.
Als je de background weer uitzet kun je die border ook weer weghalen, zodat de standaardknop weer tevoorschijn komt.

(Wat je op de screenshot ook gelijk leuk kan zien, is dat Workrave (soort Workpace) erg irritant is.

)

[ Voor 25% gewijzigd door wicher|IA op 26-06-2003 00:36 ]

donderdag 26 juni 2003 11:28

Acties:

Verwijderd

Topicstarter

Jij hebt zowiezo niet de standaard XP skin ingesteld staan. Hieronder een afbeelding van de select box met de standaard XP border die ik bedoel. Die 1px dunne blauwe lijn.

Afbeeldingslocatie: http://www.winsupersite.com/images/reviews/wxp_pt_08.gif

Afbeeldingslocatie: http://www.winsupersite.com/images/reviews/wxp_pt_08.gif

donderdag 26 juni 2003 11:36

Acties:

wicher|IA

Verwijderd schreef op 26 June 2003 @ 11:28:
Jij hebt zowiezo niet de standaard XP skin ingesteld staan.

Dat klopt.
Maar dat maakt toch niet uit? Hij gaat ieg terug naar de skin. Ook als ik 'm wel op de Windows XP-look (Luna) of de Windows 2000-look zet gaat het goed.

Hieronder een afbeelding van de select box met de standaard XP border die ik bedoel. Die 1px dunne blauwe lijn.

[afbeelding]

Of het bij een selectbox ook werkt weet ik niet, en ik heb nu ook geen tijd het te proberen.
Selectboxen zijn meestal een stuk lastiger met CSS aan te passen, dus misschien is het daarbij inderdaad anders.

Pagina: 1

Reageer