/ 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
CSS-problem i IE 7
Fra : Anders


Dato : 01-02-10 01:51

Jeg er igang med et projekt med bla. en formular. Mit problem er, at
IE7 viser siden anderledes end IE8/FF/Chrome/Opera etc.

Det er input-felterne der giver problemer. Jeg bruger
css: input {display:block;}
til at lave et linjeskift mellem <label> og <input>, men IE 7 laver
et "1em" åbent hul (umidelbart inden input-feltet), som jeg ikke
aner hvordan jeg skal slippe af med.

Jeg har skåret et stykke ud for at demonstrere...
Det kan ses på http://www.ankerliv.dk/test/qform.html

Jeg har tilføjet et skærmbillede, hvor problemet er vist med røde
spørgsmålstegn.
Er der nogen der kan hjælpe med en løsning?

 
 
Birger Sørensen (01-02-2010)
Kommentar
Fra : Birger Sørensen


Dato : 01-02-10 07:08

Anders sendte dette med sin computer:
> Jeg er igang med et projekt med bla. en formular. Mit problem er, at IE7
> viser siden anderledes end IE8/FF/Chrome/Opera etc.
>
> Det er input-felterne der giver problemer. Jeg bruger
> css: input {display:block;}
> til at lave et linjeskift mellem <label> og <input>, men IE 7 laver et "1em"
> åbent hul (umidelbart inden input-feltet), som jeg ikke aner hvordan jeg skal
> slippe af med.
>
> Jeg har skåret et stykke ud for at demonstrere...
> Det kan ses på http://www.ankerliv.dk/test/qform.html
>
> Jeg har tilføjet et skærmbillede, hvor problemet er vist med røde
> spørgsmålstegn.
> Er der nogen der kan hjælpe med en løsning?

Uden koden bliver det gætteværk.
Svjh er label et blockelement - det laver selv linieskift.
Og HTMLkoden for et linieskift er <br>
Hvis du har brug for skjulte felter i formen, bruges type="hidden".
Mener også at de ikke tager plads op - heller ikke i IE7.
Så umiddelbart er det ikke et input felt, der er problemet, men noget
andet i koden. Og det er svært at afgøre fra screendumps...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Anders (01-02-2010)
Kommentar
Fra : Anders


Dato : 01-02-10 12:37

Birger Sørensen skrev:
> Anders sendte dette med sin computer:
>> Jeg er igang med et projekt med bla. en formular. Mit problem er, at
>> IE7 viser siden anderledes end IE8/FF/Chrome/Opera etc.
>>
>> Det er input-felterne der giver problemer. Jeg bruger
>> css: input {display:block;}
>> til at lave et linjeskift mellem <label> og <input>, men IE 7 laver et
>> "1em" åbent hul (umidelbart inden input-feltet), som jeg ikke aner
>> hvordan jeg skal slippe af med.
>>
>> Jeg har skåret et stykke ud for at demonstrere...
>> Det kan ses på http://www.ankerliv.dk/test/qform.html
>>
>> Jeg har tilføjet et skærmbillede, hvor problemet er vist med røde
>> spørgsmålstegn.
>> Er der nogen der kan hjælpe med en løsning?
>
> Uden koden bliver det gætteværk.
> Svjh er label et blockelement - det laver selv linieskift.
> Og HTMLkoden for et linieskift er <br>
> Hvis du har brug for skjulte felter i formen, bruges type="hidden".
> Mener også at de ikke tager plads op - heller ikke i IE7.
> Så umiddelbart er det ikke et input felt, der er problemet, men noget
> andet i koden. Og det er svært at afgøre fra screendumps...
>
> Birger
>

Jamen du kan bare bruge det link der allerede er der og trykke "vis
kildekode" (eller hvad det nu hedder i din browser). HTML/CSS er der
stadig, selvom jeg også har tilføjet et skærmbillede.

Anders (01-02-2010)
Kommentar
Fra : Anders


Dato : 01-02-10 13:39

Birger Sørensen skrev:
> Anders sendte dette med sin computer:
>> Det er input-felterne der giver problemer. Jeg bruger
>> css: input {display:block;}
>> til at lave et linjeskift mellem <label> og <input>

Det giver i øvrigt samme resultat, hvis jeg sætter
css: label {display:block;}
i stedet for.
>>
>> Jeg har skåret et stykke ud for at demonstrere...
>> Det kan ses på http://www.ankerliv.dk/test/qform.html
>
> Uden koden bliver det gætteværk.

Koden findes i linket oven over.

> Svjh er label et blockelement - det laver selv linieskift.

label er et inline-element, men hvis det ændres til block via. css
får jeg mit linjeskift. Men den nye linje starter med et uønsket indryk.

> Og HTMLkoden for et linieskift er <br>

Ja, det var en oplagt mulighed, at kode linjeskiftet i HTML-delen,
men det løser desværre ikke noget. Indrykket kommer stadig frem i IE 7.

> Hvis du har brug for skjulte felter i formen, bruges type="hidden".
> Mener også at de ikke tager plads op - heller ikke i IE7.
> Så umiddelbart er det ikke et input felt, der er problemet, men noget
> andet i koden.

Nej, jeg kan ikke sige om det direkte er input-feltet der volder
problemer, men jeg kan ikke se hvad det ellers skyldes.
Hvis jeg tilføjer et span-element rundt om <input>, f.eks.
<span><input ...></span>
forsvinder indrykket, men det er for det første en kluntet løsning
og for det andet hjælper det mig ikke til at forstå hvad det er der
sker.

Birger Sørensen (02-02-2010)
Kommentar
Fra : Birger Sørensen


Dato : 02-02-10 01:23

Anders skrev den 01-02-2010:
> Birger Sørensen skrev:
>> Anders sendte dette med sin computer:
>>> Det er input-felterne der giver problemer. Jeg bruger
>>> css: input {display:block;}
>>> til at lave et linjeskift mellem <label> og <input>
>
> Det giver i øvrigt samme resultat, hvis jeg sætter
> css: label {display:block;}
> i stedet for.
>>>
>>> Jeg har skåret et stykke ud for at demonstrere...
>>> Det kan ses på http://www.ankerliv.dk/test/qform.html
>>
>> Uden koden bliver det gætteværk.
>
> Koden findes i linket oven over.
>
>> Svjh er label et blockelement - det laver selv linieskift.
>
> label er et inline-element, men hvis det ændres til block via. css får jeg
> mit linjeskift. Men den nye linje starter med et uønsket indryk.
>
>> Og HTMLkoden for et linieskift er <br>
>
> Ja, det var en oplagt mulighed, at kode linjeskiftet i HTML-delen, men det
> løser desværre ikke noget. Indrykket kommer stadig frem i IE 7.
>
>> Hvis du har brug for skjulte felter i formen, bruges type="hidden". Mener
>> også at de ikke tager plads op - heller ikke i IE7.
>> Så umiddelbart er det ikke et input felt, der er problemet, men noget andet
>> i koden.
>
> Nej, jeg kan ikke sige om det direkte er input-feltet der volder problemer,
> men jeg kan ikke se hvad det ellers skyldes.
> Hvis jeg tilføjer et span-element rundt om <input>, f.eks. <span><input
> ...></span>
> forsvinder indrykket, men det er for det første en kluntet løsning og for det
> andet hjælper det mig ikke til at forstå hvad det er der sker.

Min fejl. Så det hele som et billede, uden at checke koden...

font-size: bold; er i hvert fald en fejl. Ved ikke om det har
konsekvenser her, men bør rettes. (font-weight?..)

Kan ikke se noget galt ellers - bortset fra, at <p> er til paragraffer,
altså tekst, og du nok ville stå dig bedre ved at bruge div i stedet.

Prøv evt. at sætte margin/padding specifikt på input - det er ikke
alle, der retter sig efter *, så det kan godt være det der forstyrrer i
IE7.
Har oplevet det med radio og checkboxes, og også lists (ul, ol).
Eller måske er det den class l2 input tildeles, men som ikke er
defineret...

Jeg kan ikke umiddelbart se noget galt, ellers.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Anders (02-02-2010)
Kommentar
Fra : Anders


Dato : 02-02-10 01:42

Birger Sørensen skrev:
> Min fejl. Så det hele som et billede, uden at checke koden...
>
> font-size: bold; er i hvert fald en fejl. Ved ikke om det har
> konsekvenser her, men bør rettes. (font-weight?..)

Ja det er da noget vrøvl.

> Kan ikke se noget galt ellers - bortset fra, at <p> er til paragraffer,
> altså tekst, og du nok ville stå dig bedre ved at bruge div i stedet.
>
> Prøv evt. at sætte margin/padding specifikt på input - det er ikke alle,
> der retter sig efter *, så det kan godt være det der forstyrrer i IE7.
> Har oplevet det med radio og checkboxes, og også lists (ul, ol).
> Eller måske er det den class l2 input tildeles, men som ikke er
> defineret...
>
> Jeg kan ikke umiddelbart se noget galt, ellers.
>
> Birger

Tak for dit svar Birger.
Jeg har måske selv støvet en løsning op ved at kigge rundt på
nettet. Det er tilsyneladende en kendt IE-bug, som jeg havde glemt
alt om, hvor input-feltet fejlagtigt arver margin fra
forældre-elementet.
Til andre der evt. læser med her, findes en løsning på:
http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout

Peter Farsinsen (01-02-2010)
Kommentar
Fra : Peter Farsinsen


Dato : 01-02-10 14:13

Anders wrote:

> Er der nogen der kan hjælpe med en løsning?

Er det ikke margin på 'input'?

Jeg har ikke testet ;)

- Peter

Anders (01-02-2010)
Kommentar
Fra : Anders


Dato : 01-02-10 14:14

Peter Farsinsen skrev:
> Anders wrote:
>
>> Er der nogen der kan hjælpe med en løsning?
>
> Er det ikke margin på 'input'?
>
> Jeg har ikke testet ;)
>
> - Peter

Den er sat til nul.

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408920
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste