Søg
Avatar billede apo Praktikant
05. september 2005 - 15:14 Der er 25 kommentarer og
1 løsning

Probs med input, under visning i Opera

Hej :-)

Når jeg ser mit website i Opera, ligner layoutet det jeg ser i både IE og FF. Kun <input type="text"> ser anderledes ud.

Efter indsættelse af DOCTYPE, har jeg været nød til at ændre højden på mine inputs til 16px; for at få dem vist med den ønskede højde (20px i højden).

Når jeg anvender Opera, vises mine input dog med højden 16px (I modsætning til både IE og FF).

Nogen forklaring på det, og hvordan får jeg inputs til at have den præcis samme højde uanset hvilken af de tre browsere, jeg benytter?

Apo
Avatar billede olebole Juniormester
05. september 2005 - 16:21 #1
<ole>

Prøv i stedet at sætte font-family og -size på inputs  :)

/mvh
</bole>
Avatar billede apo Praktikant
05. september 2005 - 16:29 #2
Jeg har både font-family og fontsize på inputene:

Ekstern .CSS-fil:

.textbox {
    margin: 0;
    padding-left: 2px;
    border-top: 1px solid #716F64;
    border-left: 1px solid #716F64;
    border-right: 1px solid #DCD6C8;
    border-bottom: 1px solid #DCD6C8;
    text-decoration: none;
    font-family: tahoma, verdana, arial, helvetica, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
    text-align: left;

Og inputet:
<input class="textbox" style="width:200px; height:16px;">
Avatar billede apo Praktikant
05. september 2005 - 16:29 #3
Inputet ser selvfølgelig således ud:
<input type="text" class="textbox" style="width:200px; height:16px;">

:-)
Avatar billede apo Praktikant
05. september 2005 - 16:38 #4
... Mente du at jeg skal fjerne height:16px; og lade højden på inputet styres af font-size?
Avatar billede olebole Juniormester
05. september 2005 - 16:41 #5
Ja, men det holder vist heller ikke helt. Prøv denne:

  <input type="text" style="font-family:tahoma,arial,verdana,sans-serif;font-size:22px;height:1.5em" onclick="alert(this.offsetWidth+' :: '+this.offsetHeight)">

Behold altid de 1.5em - men skift skriftstørrelsen til det ønskede  :)
Avatar billede olebole Juniormester
05. september 2005 - 16:46 #6
- 16px i højden med en tahoma i 13px er ikke realistisk ... 20 er langt bedre
Avatar billede apo Praktikant
05. september 2005 - 16:51 #7
Nu ser inputet således ud:
<input type="text" name="Soegeord" class="textbox" style="font-family:tahoma,arial,verdana,sans-serif;font-size:13px;height:1.5em" onclick="alert(this.offsetWidth+' :: '+this.offsetHeight)">

Men højden i IE er nu 23px og 20 i Opera?
Avatar billede apo Praktikant
05. september 2005 - 16:56 #8
... og bredden på inputet er nu i IE 144px imod 138px i Opera (som ønsket)
Avatar billede olebole Juniormester
05. september 2005 - 17:04 #9
*LooL* - sad og testede med en obskur DTD fra et brugerspørgsmål herfra  :D

<input type="text" name="Soegeord" class="textbox" style="font-family:tahoma,arial,verdana,sans-serif;font-size:13px;line-height:1.2em" onclick="alert(this.offsetWidth+' :: '+this.offsetHeight)">

Bredden kan du sætte til et eller andet antal px - men den vil altid ændre sig en smule. Der er ikke nogen standard for præcis, hvordan form-elementer renderes. Samtidigt er de en sær blanding af browser- og OS-komponenter - og også derfor lidt 'autonome'  :o|
Avatar billede apo Praktikant
05. september 2005 - 17:10 #10
Prøv at kaste et blik på den DTD, Danmarks Statistik bruger *LOL* En 2.0 et-eller-andet!

---

Nu siger den 136 :: 16 i Opera og 145 :: 22 i IE

Min DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede apo Praktikant
05. september 2005 - 17:16 #11
Det er denne jeg taler om:
<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 + all extensions//EN" "hmpro3.dtd">

Se kildekoden på: http://www.statistikbanken.dk/statbank5a/default.asp?w=1024
Avatar billede apo Praktikant
05. september 2005 - 17:32 #12
Nu er højden på inputet 20px i både IE og Opera. Men der er 10px forskel i bredden - IE: 144px og Opera: 134px

Det må da kunne ændres, så forskellen højest er en eller to px?
Avatar billede olebole Juniormester
05. september 2005 - 17:37 #13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
</head>
<body>

<input type="text" name="Soegeord" class="textbox" style="font-family:tahoma,arial,verdana,sans-serif;font-size:13px;line-height:1.2em;width:200px" onclick="alert(this.offsetWidth+' :: '+this.offsetHeight)">

</body>
</html>

- giver hos mig 22px i højden ... og i bredden:
Opera: 200px
IE: 206px
Moz1.5 og FF: 204px
Avatar billede apo Praktikant
05. september 2005 - 17:43 #14
Strange... Så med andre ord kan man ikke styre de præcise dimensioner på et input?
Avatar billede olebole Juniormester
05. september 2005 - 17:45 #15
Så prøv at sætte en select, et text-input og et textarea med samme bredde over hinanden  =8-O
Avatar billede apo Praktikant
05. september 2005 - 17:48 #16
Hehe.

Så er det måske bedre at jeg går tilbage til min oprindelige styring af inputene; Hvor det så nogenlunde ens ud i IE og FF (20px i højden og omkring 136-137px i bredden), men hvor højden på inputene i Opera var 16px?
Avatar billede apo Praktikant
05. september 2005 - 18:03 #17
Nu har jeg opnået et acceptabelt resultat:

IE: 140 :: 20
Firefox: 139 :: 20
Opera: 135 :: 20

Inputet:
<input type="text" name="Soegeord" class="textbox" style="width:135px;line-height:1.2em" onclick="alert(this.offsetWidth+' :: '+this.offsetHeight)">

Det bliver vist ikke bedre end det. Men kan jeg forvente at det også ser sådan ud hos andre (Her tænker jeg på brugere med andre operativsystemer, anden opsætning, anden skærmopløsning mv.)?
Avatar billede apo Praktikant
05. september 2005 - 23:51 #18
Nå, smider du et svar, Ole.

Det ser fornuftigt ud nu, og jeg kan formentlig ikke gøre mere ved det end det, jeg er nået frem til nu.
Avatar billede olebole Juniormester
06. september 2005 - 01:43 #19
Ja, du kan sikkert glæde dig i dit stille sind over, at dit arbejde giver brugerne mange - og differentierede - oplevelser  ;D
Avatar billede apo Praktikant
06. september 2005 - 02:02 #20
Hehe. Ja, jeg kommer lidt omkring i mine spørgsmål ;-)

Så du forresten mit indlæg med denne?:

<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 2.0 + all extensions//EN" "hmpro3.dtd">

Se kildekoden på: http://www.statistikbanken.dk/statbank5a/default.asp?w=1024

Hvad er det for en oldnordisk DTD, de bruger?
Avatar billede olebole Juniormester
06. september 2005 - 02:57 #21
Jeg så det godt - men min psykolog vil helst ikke have, jeg beskæftiger mig med den slags. Det er ikke så meget det, at han er nervøs for, jeg skal falde ned fra tagryggen ... men mit hanegal slider voldsomt på mine stemmelæber  ;D

- det er ikke en version, jeg har haft fat i før. Jeg får det nok heller ikke ...  :)
Avatar billede olebole Juniormester
06. september 2005 - 02:58 #22
- og tak for points, i øvrigt  ;o)
Avatar billede roenving Novice
06. september 2005 - 03:01 #23
Du kan jo prøve at lede efter hos w3c: http://www.w3.org/QA/2002/04/valid-dtd-list.html !-)

-- iøvrigt kender jeg overhovedet ingen browsere, som kan benytte en doctype med en html mindre end 4, men en dtd vil sandsynligvis blive respekteret af nogle browsere, hvis den ellers overholder dtd-syntaks !o]
Avatar billede apo Praktikant
06. september 2005 - 03:16 #24
ole > Jeg var næsten sikker på, at du skulle have krisehjælp når du så DTD'en :-D

Velbekomme, og tak for hjælpen :-)

roenving > Jeg synes ikke at jeg kan finde noget om den omtalte DTD på w3.org, heller ikke via søgefunktionen?
Avatar billede roenving Novice
06. september 2005 - 03:22 #25
Nej, lige præcis !-)
Avatar billede apo Praktikant
06. september 2005 - 03:26 #26
Så må de da have haft en småstiv programmør i tidernes morgen 8-|

Hvad skulle formålet være, at indsætte en DTD, der ikke eksisterer? Har de mon forsøgt at lave deres egen? (Linket er tilsyneladende et lokalt link)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 12:15 morf bilede Af knuldefar1942 i Fri debat
I går 22:13 Gemme største værdi Af Lemming@privat.dk i Excel
I går 21:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »