/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
300px er ikke altid 300px :o(
Fra : Thomas L. Pilegaard


Dato : 16-12-04 20:54

Hej

Jeg har lavet en formular hvor folk skal indtaste navn, adresse og
telefonnumre.

jeg har brugt feltkode som dette:
<span style="position:absolute;left:70px;top:105px">
<input type="text" name="navn" maxlength="45" style="width:300px"/>
</span>

Problemet er så at Internet Explorer laver feltet 306 px langt -
Firefox 304 px mens Opera holder det på de angivne 300px

Det er noget ged fordi jeg gerne skulle have felterne til at stå pænt
over hinanden. Nogle alignet til venstre og andre til højre margin.

Er der en måde at omgå dette ?

jeg tænker på om man kan lave en

<!--[if IE]> <input ......... style="width:294px"/>

<!--[if firefox]> <input ......... style="width:296px"/>

<!--[else]> <input ......... style="width:300px"/>

Men findes der en <!--[if firefox]> ?

og hvor kan jeg finde noget om betingelser i html-kode ?

mvh Thomas



 
 
Jesper Frandsen (16-12-2004)
Kommentar
Fra : Jesper Frandsen


Dato : 16-12-04 21:05


"Thomas L. Pilegaard" <dundee@worldonline.dk> skrev i

> jeg har brugt feltkode som dette:
> <span style="position:absolute;left:70px;top:105px">
> <input type="text" name="navn" maxlength="45" style="width:300px"/>
> </span>

Prøv at udskifte "width" med "size" - så skulle browsere gerne opfatte det
ens.

<input type="text" name="navn" size="300" maxlength="45" />

Se evt. eksempler her: http://www.9am.dk/html/form.asp

--
Jesper Frandsen

http://www.9am.dk/
Din guide til Hjemmesiden



Jesper Frandsen (16-12-2004)
Kommentar
Fra : Jesper Frandsen


Dato : 16-12-04 21:14


"Jesper Frandsen" <mail@9am.spamfilter.dk> skrev

> <input type="text" name="navn" size="300" maxlength="45" />

I øvrigt så skal maxlength være længere end size, det glemte jeg at få med,
ellers er der jo ingen ide i at bruge den.

<input type="text" name="navn" size="300" maxlength="350" />

--
Jesper Frandsen

http://www.9am.dk/
Din guide til Hjemmesiden



Thomas L. Pilegaard (16-12-2004)
Kommentar
Fra : Thomas L. Pilegaard


Dato : 16-12-04 21:26

On Thu, 16 Dec 2004 21:05:03 +0100, "Jesper Frandsen"
<mail@9am.spamfilter.dk> wrote:

-- snip --
>Prøv at udskifte "width" med "size" - så skulle browsere gerne opfatte det
>ens.
>
><input type="text" name="navn" size="300" maxlength="45" />
>
>Se evt. eksempler her: http://www.9am.dk/html/form.asp

Desværre hjælper det ikke at angive det i cols (kolonners) bredde. Der
er stadig et par px i forskel mellem Opera og de andre to

mvh Thomas

Jesper Frandsen (16-12-2004)
Kommentar
Fra : Jesper Frandsen


Dato : 16-12-04 21:36


"Thomas L. Pilegaard" <dundee@worldonline.dk> skrev
> Desværre hjælper det ikke at angive det i cols (kolonners) bredde. Der
> er stadig et par px i forskel mellem Opera og de andre to

Bruger du CSS til regulering ?

Kom evt. med et link til din side.

--
Jesper Frandsen

http://www.9am.dk/
Din guide til Hjemmesiden



Thomas L. Pilegaard (16-12-2004)
Kommentar
Fra : Thomas L. Pilegaard


Dato : 16-12-04 21:47

On Thu, 16 Dec 2004 21:36:05 +0100, "Jesper Frandsen"
<mail@9am.spamfilter.dk> wrote:

>
>"Thomas L. Pilegaard" <dundee@worldonline.dk> skrev
>> Desværre hjælper det ikke at angive det i cols (kolonners) bredde. Der
>> er stadig et par px i forskel mellem Opera og de andre to
>
>Bruger du CSS til regulering ?
>
>Kom evt. med et link til din side.

siden er ikke uploadet endnu, så et link kan jeg ikke lige klare

Ja, jeg bruger CSS

Her er lidt mere af koden:

<span style="position:absolute;left:0px;top:80px">
telefon:&nbsp;
</span>

<span style="position:absolute;left:70px;top:75px">
<input type="text" name="tlf" maxlength="16"style="width:100px"/>
</span>

<span style="position:absolute;right:107px;top:80px">
mobil:
</span>

<span style="position:absolute;right:0px;top:75px">
<input type="text" name="mobil" maxlength="16" style="width:100px"/>
</span>

<span style="position:absolute;left:0px;top:110px">
navn:
</span>

<span style="position:absolute;left:70px;top:105px">
<input type="text" name="navn" maxlength="45" size="45"/>
</span>

Problemet er jo at jeg bruger right:0px for at få det til at flugte
med Navn formularboksens højre kant. Når så boksen pludselig er mere
end 300px bred flyder den ud over sin container/<div> og det flugter
ikke mere.

Jeg tror at løsningen må være udelukkende at bruge left: til
positionering. På den måde burde alle formularfelterne blive lige
meget for brede og derfor stadig flugte. Men jeg har ikke lige testet
det endnu

mvh Thomas

Knud Gert Ellentoft (16-12-2004)
Kommentar
Fra : Knud Gert Ellentoft


Dato : 16-12-04 22:10

Thomas L. Pilegaard skrev:

>siden er ikke uploadet endnu, så et link kan jeg ikke lige klare

Det skulle vel være muligt at uploade en testside med fejlen.

Hvilken doctype bruger du på siden?
--
Knud
Topposter du svar, så ryger du på min ignoreringsliste.
Svar under det du citerer og citer kun det du svarer på - tak.
http://usenet.dk/netikette/citatteknik.html

Thomas L. Pilegaard (19-12-2004)
Kommentar
Fra : Thomas L. Pilegaard


Dato : 19-12-04 08:50

On Thu, 16 Dec 2004 22:10:03 +0100, Knud Gert Ellentoft
<ellentoft@mail.tele.invalid> wrote:

>Det skulle vel være muligt at uploade en testside med fejlen.
>
>Hvilken doctype bruger du på siden?

yep

Det er her http://www.lovebird.dk/sandkassen/300px.html

den øverste er den html-genererede. Derunder har jeg sat 3 screenshots
fra IE, Firefox og Opera

Og i har nok ret i at det er browsernes forskellige opfattelser af
f.eks. padding. IE har i hvert fald en ide med at padding skal lægges
til width. Altså at et element på 150px med en padding på 25px bliver
200px bred

mvh Thomas

Preben Holm (17-12-2004)
Kommentar
Fra : Preben Holm


Dato : 17-12-04 13:14

Thomas L. Pilegaard wrote:
> On Thu, 16 Dec 2004 21:36:05 +0100, "Jesper Frandsen"
> <mail@9am.spamfilter.dk> wrote:
>
>
>>"Thomas L. Pilegaard" <dundee@worldonline.dk> skrev
>>
>>>Desværre hjælper det ikke at angive det i cols (kolonners) bredde. Der
>>>er stadig et par px i forskel mellem Opera og de andre to
>>
>>Bruger du CSS til regulering ?
>>
>>Kom evt. med et link til din side.
>
>
> siden er ikke uploadet endnu, så et link kan jeg ikke lige klare
>
> Ja, jeg bruger CSS
>
> Her er lidt mere af koden:
>
> <span style="position:absolute;left:0px;top:80px">
> telefon:&nbsp;
> </span>
>
> <span style="position:absolute;left:70px;top:75px">
> <input type="text" name="tlf" maxlength="16"style="width:100px"/>
> </span>
>
> <span style="position:absolute;right:107px;top:80px">
> mobil:
> </span>
>
> <span style="position:absolute;right:0px;top:75px">
> <input type="text" name="mobil" maxlength="16" style="width:100px"/>
> </span>
>
> <span style="position:absolute;left:0px;top:110px">
> navn:
> </span>
>
> <span style="position:absolute;left:70px;top:105px">
> <input type="text" name="navn" maxlength="45" size="45"/>
> </span>

for det første, lav en opstilling lidt anderlede og brug nogle mellemrum
- i hvert fald tidligere versioner af browsere fattede ikke CSS'en
ordentligt.
dvs. f.eks.: style="position: absolute; left: 70px; top: 110px"

dernæst ville jeg prøve på input-felterne:
style="margin: 2px; padding: 2px; border: 1px solid black; width: 94px;"

der er jo ingen, der siger, at padding er ens for både Opera, MS og Mozilla.

Dernæst skal du være opmærksom på, at mozilla overholder standarderne,
mens MS i alle tilfælde ikke gør det - (igen jeg har ikke testet i nyere
versioner af MS) bliver width opfattet som total bredde - dvs. inkl.
padding og border, mens i Mozilla opfatter det som width = width - dvs.
total bredde bliver altså padding + border + width


Mvh / Preben Holm

Erik Ginnerskov (16-12-2004)
Kommentar
Fra : Erik Ginnerskov


Dato : 16-12-04 22:58

Jesper Frandsen wrote:

>> <span style="position:absolute;left:70px;top:105px">
>> <input type="text" name="navn" maxlength="45" style="width:300px"/>
>> </span>
>
> Prøv at udskifte "width" med "size" - så skulle browsere gerne
> opfatte det ens.
>
> <input type="text" name="navn" size="300" maxlength="45" />

Øh,?
Hvis du definerer width i css til 300px, så bliver det 300px (forudsat
standardsættende DTD). Men hvis du i html definerer size til 300, betyder
det 300 bogstaver bred. Der er altså pokker til forskel.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://html-faq.dk
http://ginnerskov.frac.dk



Jesper Frandsen (16-12-2004)
Kommentar
Fra : Jesper Frandsen


Dato : 16-12-04 23:10


"Erik Ginnerskov" <erik@donotspammmeplease.invalid> skrev

> Hvis du definerer width i css til 300px, så bliver det 300px (forudsat
> standardsættende DTD). Men hvis du i html definerer size til 300, betyder
> det 300 bogstaver bred. Der er altså pokker til forskel.

Ja det gik for hurtigt, der skulle have stået size="30" - Det beklager jeg,
du har ret

--
Jesper Frandsen

http://www.9am.dk/
Din guide til Hjemmesiden



Jens Gyldenkærne Cla~ (17-12-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-12-04 13:20

Preben Holm skrev:

> Dernæst skal du være opmærksom på, at mozilla overholder
> standarderne, mens MS i alle tilfælde ikke gør det - (igen jeg
> har ikke testet i nyere versioner af MS)

Nu kan IE6 dårligt kaldes en "nyere version" (den er fra 2001), men
fra udgivelsen af IE6 har browseren haft en doctypekontakt der gør
det muligt at vælge mellem to forskellige visningsmåder.

I kompatibilitetsmode (kaldet quirksmode) fungerer browseren som
tidligere udgaver af IE - hvilket på flere områder er et godt
stykke fra W3's standarder. I standardmode følger browseren til
gengæld de officielle standarder (så mange af dem der nu er
implementeret).

Se mere om doctype her: <http://www.hintzmann.dk/articles/doctype/>
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (19-12-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 19-12-04 14:07

Thomas L. Pilegaard skrev:

> Det er her http://www.lovebird.dk/sandkassen/300px.html
>
> den øverste er den html-genererede. Derunder har jeg sat 3
> screenshots fra IE, Firefox og Opera

Jeg ville bruge en tabel til opsætningen af formularen. Tabeller er
ikke forbudt - heller ikke i xhtml 1.1 - de skal bare ikke bruges
til sidestruktur.

Et par generelle kommentarer:
- Siden validerer ikke. Det er delvist - men ikke alene - på grund
af de tre tilføjede billeder. Css-koden kan ikke valideres direkte
når der er fejl i xhtml-koden, så den har jeg ikke kigget på.

- Overvej at bruge <label> til at markere samhørighed mellem
tekster og felter. Det gør det væsentligt lettere at bruge en
formular.

- Er der nogen speciel grund til at du anvender xhtml 1.1. Der er
ingen reelle indholdsforskelle fra xhtml 1.0 strict, men xhtml 1.1
bør ikke sendes som text/html (som din side bliver). Se også siden
her <http://www.hintzmann.dk/articles/doctype/>.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Jens Gyldenkærne Cla~ (17-12-2004)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 17-12-04 13:27

Thomas L. Pilegaard skrev:

> Er der en måde at omgå dette ?

Som nævnt et par gange i tråden vil det være en god ide med et link
til din side.
Se evt. hvorfor her: <http://infimum.dk/HTML/hjaelpmig.html>


> <!--[if IE]> <input ......... style="width:294px"/>


Du kan i princippet godt lave en conditional inde i formen, men der
vil nok være mere ide i at lægge den om en ekstra style-definition
i <head>. Så kan du tildele input-elementerne en passende klasse,
og så bruge conditional til at give særskilte værdier til IE.

Et hack som brug af conditional er dog det sidste man skal forsøge
- start med at undersøge om forskellen i størrelse ikke skyldes en
ikke-sat egenskab.

> Men findes der en <!--[if firefox]> ?

Nej. Conditionals er en IE-ting. Der har vist nok været en form for
conditionals til Netscape 4, men de findes mig bekendt ikke til
andre nutidige browsere end IE.


> og hvor kan jeg finde noget om betingelser i html-kode ?

Udover conditionals er der ikke noget. Man kan bruge css-hacks (se
fx <http://www.hintzmann.dk/articles/skjulecss/>) eller javascript
til at målrette kode mod bestemte browsere, men der er ikke nogen
officiel html-kode der kan lave betingelser.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Søg
Reklame
Statistik
Spørgsmål : 177502
Tips : 31968
Nyheder : 719565
Indlæg : 6408534
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste