Avatar billede ssv Nybegynder
05. august 2008 - 12:26 Der er 17 kommentarer og
2 løsninger

Diverse input-spørgsmål

Hello.

Jeg har sat en test side op på: http://proads.dk/simon/input.html, hvor jeg i den anledning har fundet nogle ting jeg ikke selv kan kringle. Listen er som følger:

1) Hvordan fjerner jeg "3D-effekten" fra buttons? (IE, primært)
2) Hvordan fjerner jeg den sorte kant udenom buttons når de er aktive? Jeg har prøvet med :focus, :selected osv. og intet ser ud til at fungere. I har sikkert en meget bedre (og kompatibel) måde :-)
3) Hvordan - hvis muligt - kan jeg "styre" paddingen i buttons? IE lægger som regel en del padding i højre og venstre som standard, og det kan ikke cleares ved en padding: 0.
Avatar billede roenving Novice
05. august 2008 - 12:46 #1
1. Ved at ændre baggrund og border (til ingen f.eks. !-)

2. Den behavior kan ikke ændres, border kan fjernes ...

3. Negativ padding !o]
Avatar billede ssv Nybegynder
05. august 2008 - 13:15 #2
> 1. Der er en baggrund i både felterne og buttons - og det skal der også være :-) Det er den indre 1px hvide kant der kan ses i IE som jeg gerne vil have fjernet.

> 2. Lad mig få noget kode :-) Har prøvet med submit:focus { border: 1px solid #fff; } og bare :focus { border: 1px solid #fff; } - men intet virker i IE.

> 3. Så skal der laves noget specielt til IE da FF fint kan fortolke padding: 0;. Er der ingen anden løsning?.
Avatar billede w13 Novice
05. august 2008 - 14:35 #3
2. Du må bare sætte borderen til at være fjernet hele tiden. Ellers må du nok løse det med JavaScript. Og hvorfor sætte borderen til hvid, hvorfor ikke bare border-width:0;
3. Som regel vil du godt kunne få det til at se næsten ens ud i de forskellige browsere, hvis du roder lidt med både margin og padding.
Avatar billede w13 Novice
05. august 2008 - 14:36 #4
Men måske skulle du overveje at lave dine egne knapper i stedet, dvs. bruge div- / span-elementer. =) Så får du jo fuld kontrol.
Avatar billede ssv Nybegynder
05. august 2008 - 15:48 #5
Well, jeg må lige overveje det :-)

> Hvordan kunne jeg få fjernet den sorte kant på bla. submit? Jeg synes i begge har hjulpet, så den der finder en nyttig løsning til det, render med pointene :-)
Avatar billede w13 Novice
05. august 2008 - 15:51 #6
Du bliver nødt til at sætte border-width:0; så.
Avatar billede w13 Novice
05. august 2008 - 15:53 #7
Og der er ikke nogen nem løsning til kun at sætte det, når den har "fokus", da det ikke altid er "rigtig" fokus. Og slet ikke, når det også skal virke cross-browser.
Avatar billede ssv Nybegynder
05. august 2008 - 17:19 #8
Well, jeg tænker over det :-)

- Smid et svar.
Avatar billede w13 Novice
05. august 2008 - 17:47 #9
:)
Avatar billede w13 Novice
05. august 2008 - 17:47 #10
Men jeg og Roenving bør dele, så synes også lige, han skal smide et svar.
Avatar billede olebole Juniormester
05. august 2008 - 20:31 #11
<ole>

padding må ikke have negative værdier. Det må kun margin  =)

/mvh
</bole>
Avatar billede olebole Juniormester
05. august 2008 - 20:43 #12
- lidt sjovt, for på min PC viser IE mindre luft i siderne ved 'padding:0', end FF gør  :o)
Avatar billede ssv Nybegynder
06. august 2008 - 10:03 #13
> Sjovt hvorfor min PC ikke vil vise noget andet ved padding: 0 :-)
Avatar billede roenving Novice
06. august 2008 - 15:50 #14
Oki '-)
Avatar billede olebole Juniormester
06. august 2008 - 22:59 #15
Ja, det er egentlig lidt sjovt, for jeg har idag testet denne kode på fire andre PC'er, og FF renderer mere 'luft' i siderne end IE gør:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button Test</title>
<style type="text/css">
button, .subm {
    font: 13px tahoma;
    padding: 0;
    border: 0;
}
</style>
</head>
<body>

<form action="">
    <p><input class="subm" type="submit" value="H"></p>
    <p><button type="submit">H</button></p>
</form>

</body>
</html>
Avatar billede olebole Juniormester
06. august 2008 - 22:59 #16
Hvilke browser versioner tester du i?
Avatar billede ssv Nybegynder
07. august 2008 - 14:47 #17
IE 7 & FF 3 / Vista og IE 6 / XP.

Men ja, det er underligt, dit eksempel virker udemærket kan jeg se :-)
Avatar billede roenving Novice
09. august 2008 - 13:06 #18
Tak for point ;~}
Avatar billede olebole Juniormester
09. august 2008 - 16:30 #19
"Men ja, det er underligt, dit eksempel virker udemærket kan jeg se :-)" >> hvilket indikerer, at det er noget andet, du gør forkert - og at løsningen bør findes dér  ;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