Avatar billede langkiller Nybegynder
18. oktober 2011 - 14:05 Der er 9 kommentarer og
1 løsning

input felt sættes højere i IE end i Chrome .

Har følgende div, som er et søgefelt:
<div id="search"><input type="search" name="search"></div>

Det er placeret som det skal når det vises i Chrome, men i IE sidder feltet højere oppe.

Har følgende tilhørende css til nævnte div:

#search {
width: 200px;
height: 31px;
position:relative;
top: -132px;
right: -600px;
background-image: url('pics/soeg_bg.png');
background-repeat:repeat-x;
padding-top: 4px;
}

Jeg kan sagtens ændre padding-top: 4px; til noget højere og få input feltet til at stå som det skal i IE, men når jeg gør det bliver feltet i chrome rykket for langt nedad.
Tænkte det måske var IE der tilføjede noget whitespace e.l. efter input feltet og dermed fik det til at stå højere, men har ikke haft held med at få det til at fungere endnu. Nogle bud?
Avatar billede majbom Novice
18. oktober 2011 - 14:45 #1
kan du ikke se siden med noget web developer plugin i chrome? (i firebug til firefox kan man, når man markere et element i kilden, se elementet på siden blive highlightet med padding, margin osv.)
Avatar billede olebole Juniormester
18. oktober 2011 - 17:12 #2
<ole>

Som altid: Læg et link, så vi har mulighed for at se den relevante kode  *o)

Jeg kunne således forestille mig, at kilden til fejlen ligger i din allerførste linje i din HTML kode. Mon du har udeladt DTD'en, så du dermed disabler store dele af CSS i dokumentet?

/mvh
</bole>
Avatar billede olebole Juniormester
18. oktober 2011 - 17:36 #3
Hvorfor i øvrigt den ret sære konstruktion med position:relative, kombineret med placering med left og right?
Avatar billede langkiller Nybegynder
18. oktober 2011 - 19:33 #4
har lagt det ud på clich.net
og har ikke glemt DTD'en.

Grunden til den "sære" konstruktion af css'en er at jeg har prøvet så meget forskelligt uden held. Bare se bort fra den underlige kode.

Hvordan kan jeg placerer mit søgefelt på siden i højre øverste hjørne, inden for kanterne, ikke helt ude ved scrollbaren ?
Avatar billede olebole Juniormester
18. oktober 2011 - 21:57 #5
Jeg tror da, vi har kikket på sådan en højre-/topstillet søgeboks før(?)  =)

Reglen for absolut position siger:

1) Et element, der er positioneret absolute, placerer sig i forhold til det første omkransende element, der er positioneret.

2) Findes et sådan ikke, placerer elementet sig i forhold til BODY elementet


Et eksempel:


<div style="position:relative;width:600px;height:500px;border:1px solid blue">
    <div style="position:absolute;width:90px;height:30px;top:10px;right:5px;background:red">Hey</div>
</div>

<hr>

<div style="width:600px;height:500px;border:1px solid green">
    <div style="position:absolute;width:90px;height:30px;top:10px;right:5px;background:yellow">Hop</div>
</div>

Avatar billede langkiller Nybegynder
19. oktober 2011 - 23:30 #6
Fedt, det virker perfekt nu :)

En ting mere hvis du har svaret
Det er bare lidt underligt at "padding-top: 4px;" ikke give det samme størrelse mellemrum over søgefeltet i IE som i chrome, ikke så stor forskel, men den er der.

Kan man skrive noget andet end px for at det giver samme resultat.
Avatar billede langkiller Nybegynder
19. oktober 2011 - 23:31 #7
hov det skulle ikke have været et svar :P
Avatar billede olebole Juniormester
20. oktober 2011 - 01:33 #8
Der er mange ting, der ikke er specificeret i standarderne - herunder renderingen af form kontroller. Løsningen er nok:


input {
    margin: 0;
}

Avatar billede langkiller Nybegynder
20. oktober 2011 - 23:09 #9
ja det var det sørme :P tak igen igen
Avatar billede olebole Juniormester
20. oktober 2011 - 23:31 #10
Selvtak  *o)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester