[XHTML/CSS] Probleem met breedte van input elementen

[cyberstalker]

Ik probeer een <input type="submit" /> in een tabel weer te geven alsof het gewone tekst is. Ik heb daarvoor de volgende CSS geschreven:

Cascading Stylesheet:

table tr td input, table tr td input:hover
{
        border: none;
        display: inline;
        width: auto;
        background-color: inherit;
        font-family: inherit;
        font-size: inherit;
        text-align: left;
        padding: 0px;
        margin: 0px;
}

Om onbekende redenen worden de knoppen echter zo breed als ze maar kunnen worden, waardoor de gegevens in de laatste kolom niet passen en er meerdere regels worden gebruikt.

Dit is uiteraard niet de bedoeling. Hoe los ik dit op? Zoals je ziet heb ik al geprobeerd de display op inline te zetten, width op auto en margins en padding er afgehaald.

Een voorbeeldje van de pagina kun je bewonderen op http://martijntje.xs4all.nl/Sales%20Unit/index.xhtml

[soulrider]

je zegt het hem zelf:
input{
width: auto
}

geef je input een vaste waarde mee

dus ook logisch dat ie zo breed mogelijk zordt, of het nu een submit of een andere input is ...

en link aub eens naar een .html ipv een .xhtml-file waarmee geen enkele browser weet wat doen...
(of config je server eens goed dat hij die .xhtml niet als unknown doorstuurt en er dus een dowload-file ipv webpage van maakt0

[ Voor 21% gewijzigd door soulrider op 05-10-2006 14:27 ]

[cyberstalker]

soulrider schreef op donderdag 05 oktober 2006 @ 14:25:
je zegt het hem zelf:
input{
width: auto
}

geef je input een vaste waarde mee

dus ook logisch dat ie zo breed mogelijk zordt, of het nu een submit of een andere input is ...

Dat deed ik omdat andere input-elementen op de pagina (buiten de tabel dus) een vaste breedte hebben die ik niet wil overnemen. Zonder width: auto werkt het dus niet. Ik wil geen vaste breedte gebruiken, maar het element zoveel (of zo weinig) ruimte geven als het nodig heeft.

Sowieso: width: auto; betekent niet 'zo breed mogelijk'.

en link aub eens naar een .html ipv een .xhtml-file waarmee geen enkele browser weet wat doen...
(of config je server eens goed dat hij die .xhtml niet als unknown doorstuurt en er dus een dowload-file ipv webpage van maakt0

Waar heb je het over? Het wordt niet als unknown doorgestuurd, gewoon als application/xhtml+xml wat een doodgewone xhtml-pagina is. Praktisch elke browser kan daar mee werken .

[moozzuzz]

Waarom wil iedereen toch meedoen met die Xhtml hype ...

Wat gebeurt er verkeerd als je width niet specifieert? Het niet specifieren komt neer op auto. Wellicht ligt het probleem echter bij je <td>.

[cyberstalker]

moozzuzz schreef op donderdag 05 oktober 2006 @ 15:05:
Waarom wil iedereen toch meedoen met die Xhtml hype ...

Wat gebeurt er verkeerd als je width niet specifieert? Het niet specifieren komt neer op auto. Wellicht ligt het probleem echter bij je <td>.

Zonder width heb ik ook al geprobeerd met exact hetzelfde resultaat. Ik weet zeker dat het probleem niet in de td zit want als ik het gewoon als tekst neerzet (dus zonder die input) krijg ik wel de juiste breedte.

[crisp]

Vaak krijgen input-elementen ook nog style-elementen mee die browser-specifiek zijn. Een c/p uit de default stylesheet van Firefox:

Cascading Stylesheet:

button, 
input[type="reset"],
input[type="button"],
input[type="submit"] { 
  -moz-appearance: button;
  /* The sum of border-top, border-bottom, padding-top, padding-bottom
     must be the same here, for text inputs, and for <select>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  color: ButtonText; 
  font: -moz-button;
  line-height: normal !important;
  white-space: pre;
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
  text-align: center;
}

bottom-line: form-elementen zijn vaak niet 100% te stylen.

[cyberstalker]

Is er geen manier om automatisch alle voorgedefinieerde stylen van een element af te slopen?

[crisp]

cyberstalker schreef op donderdag 05 oktober 2006 @ 23:39:
Is er geen manier om automatisch alle voorgedefinieerde stylen van een element af te slopen?

nope

als je de complete styling van een element zelf in de hand wilt hebben moet je een element nemen waarvan bekend is dat er geen (of enkel bekende) properties geset worden; form-controls (widgets) horen daar zeker niet bij.
Behavior is natuurlijk eenvoudig te simuleren met javascript

Overigens ben ik het ook wel eens met soulriders en moozzuzz' opmerking mbt XHTML; XHTML heeft hier niets mee te maken en derhalve is het ook niet handig dat je een voorbeeld geeft welke inaccesible is voor een groot percentage van onze forumbezoekers...

[ Voor 19% gewijzigd door crisp op 05-10-2006 23:54 ]

[cyberstalker]

Dat simuleren met javascript komt ook nog wel. Daar komt een mooi AJAX-scriptje voor . Ik wil echter dat de pagina het ook doet zonder javascript.

Aangezien ik de pagina dan wil verversen en alle resultaten wil blijven houden zal ik dus de zoekvariabelen moeten meeposten. Dit doe ik door de hele tabel met resultaten in het fomulier op te nemen en de knoppen zelf een waarde te laten posten zodat ik weet welk resultaat er is aangeklikt (die komen dan links in het korte profiel te staan).

Is er, behalve gebruikmaken van een hyperlink met al die gegevens (en dat doe ik liever niet want ik gebruik hier liever post) een nette oplossing te bedenken?

De enige oplossing die ik kan bedenken is een aparte knop buiten beeld te prakken en de tekst zelf er een label naar te maken. Dit is echter een nogal ranzige oplossing.

[ Voor 11% gewijzigd door cyberstalker op 06-10-2006 00:20 ]

[moozzuzz]

cyberstalker schreef op donderdag 05 oktober 2006 @ 22:14:
Zonder width heb ik ook al geprobeerd met exact hetzelfde resultaat.

Wat als (opnieuw een gokje) je exact dezelfde button buiten een tabel plaatst? Welke vorm krijgt ie dan?

[Verwijderd]

crisp schreef op donderdag 05 oktober 2006 @ 23:34:
Vaak krijgen input-elementen ook nog style-elementen mee die browser-specifiek zijn. Een c/p uit de default stylesheet van Firefox.

Vet, waar kan ik deze stylesheet vinden? En zijn deze er ook van andere browsers?

[soulrider]

cyberstalker schreef op donderdag 05 oktober 2006 @ 14:30:


Waar heb je het over? Het wordt niet als unknown doorgestuurd, gewoon als application/xhtml+xml wat een doodgewone xhtml-pagina is. Praktisch elke browser kan daar mee werken .

ga eens aan een willekeurige andere pc zitten met standaard IE6 ...
wedden dat je het mag gaan opslaan, renamen en het dan pas kan zien ?

blijf voor statische pagina's eens gewoon .htm of .html gebruiken ipv een willekeurige andere nieuwe extensie ... (tot die voor quasi iedereen ook gebruikbaar is, al dan niet met een plugin)

dat het een xhtml-bestand is maakt je doctype wel duidelijk aan mijn (en anderen hun) browser
daarvoor moet die extensie er (nog) niet achter...

je index.xhtml wordt zelfs door je server niet herkend als eerste pagina
(maw: http://martijntje.xs4all.nl/Sales%20Unit/ geeft me een mooie open-dir )

correctie: FF kent het wel, IE 6 niet ... (en je site is ontworpen voor 1280x1024 en niet kleiner want dan zit de helft van de middelste tekst netjes achter de kader die rechtsverschijnt - kijkend in FF)

[ Voor 19% gewijzigd door soulrider op 06-10-2006 19:05 ]

[cyberstalker]

soulrider schreef op vrijdag 06 oktober 2006 @ 19:00:
[...]


ga eens aan een willekeurige andere pc zitten met standaard IE6 ...
wedden dat je het mag gaan opslaan, renamen en het dan pas kan zien ?

blijf voor statische pagina's eens gewoon .htm of .html gebruiken ipv een willekeurige andere nieuwe extensie ... (tot die voor quasi iedereen ook gebruikbaar is, al dan niet met een plugin)

dat het een xhtml-bestand is maakt je doctype wel duidelijk aan mijn (en anderen hun) browser
daarvoor moet die extensie er (nog) niet achter...

je index.xhtml wordt zelfs door je server niet herkend als eerste pagina
(maw: http://martijntje.xs4all.nl/Sales%20Unit/ geeft me een mooie open-dir )

correctie: FF kent het wel, IE 6 niet ... (en je site is ontworpen voor 1280x1024 en niet kleiner want dan zit de helft van de middelste tekst netjes achter de kader die rechtsverschijnt - kijkend in FF)

Echt compleet offtopic deze post. Sowieso, als ik het bestand als .html opsla werken de stylesheets bijvoorbeeld niet meer dus dat is geen optie. Daarnaast is deze 'statische' pagina een voorbeeld van een door php gegenereerde pagina en dus eigenlijk niet statisch.

De grootte waarvoor mijn pagina is ontworpen is ook mijn zaak. Misschien gaat het wel om een intranetpagina dat weet jij toch niet?

[soulrider]

cyberstalker schreef op vrijdag 06 oktober 2006 @ 20:26:
[...]

Echt compleet offtopic deze post. Sowieso, als ik het bestand als .html opsla werken de stylesheets bijvoorbeeld niet meer dus dat is geen optie. Daarnaast is deze 'statische' pagina een voorbeeld van een door php gegenereerde pagina en dus eigenlijk niet statisch.

De grootte waarvoor mijn pagina is ontworpen is ook mijn zaak. Misschien gaat het wel om een intranetpagina dat weet jij toch niet?

Kijk eens waarop ik reageer, en dat van die grootte was misschien niet zo overgekomen als bedoeld,
maar ja wat jij me niet verteld kan ik ook niet weten eh... - btw: niet iedereen werkt fullscreen eh - of 't moet een pagina zijn die fullscreen draait op van die info-zuilen met touchscreens...

(en als het simpelweg hernoemen van je pagina er al voor zorgen dat je css niet werkt, ben je vooral goed bezig )

maar ja good luck met je webpagina - probeer ze ev. eens te debugen in een html-tool zoals dreamweaver ofzo ... (en overlees de andere tips hierboven niet eh )