CSS virker ikke på input

<ole>

Det kan du også, men forskellige form-elementer tager forskelligt imod CSS. Hvad er det for et element, du vil style?

type="file" og <select> er der ikke meget at gøre med - men type="text" går det helt fint med  :)

/mvh
</bole>

Hej Olebole

Det er nemlig et element/input af typen text. Ligenu er der kun en sort border omkring, uanset hvor mange forskellige måder jeg har forsøgt at lave en anden på. Intet af det har virket endnu :-(

Apo

Rettelse... Nu virker det, men kun så længe inputet ikke opbevares i en include-fil.

Hvordan får jeg det til at virke fra en include-fil (include.inc)?

Apo

Her er noget af koden fra min include.inc:

...
<input type="text" name="navn" value="Indtast navn" onfocus="this.select()" style="width: 188px; height: 20px;" class="input">
...

Og her er noget af koden fra mit stylesheet.css:

...
.input {
  text-decoration: none;
  font-family: Arial, Verdana, Helvetica;
  font-size: 12px;
  font-weight: none;
  border: 2px inset #f0edc1;
  background-color:#FFFFFF;
  color: #000000;
}
...

Apo

Det giver ingen mening at giver borderen en sort farve ved 'inset' eller 'outset'. Den vil altid blive helt sort. Det vil kun lykkes med en lys farve.

Mon ikke, det nu virker, fordi du har skiftet farve? Det sker i hvert fald ikke, fordi filen er inkluderet  :)

Nope, det virker stadig kun på det test-input som er placeret direkte på siden. Det andet input har stadig en sort ramme :-/

Apo

Nu virker det. I min include-fil har jeg to inputs (text). Jeg havde kun fjernet formatteringen på det ene, og da jeg fjernede formatteringen på det sidste virker det.

Hvordan kan det være at det ene input har indflydelse på det andet?

Apo

Du må lave en fejl, du ikke har opdaget og derfor ikke får beskrevet her - men det kan være, jeg kan finde den, hvis du lægger et link til eksemplet, hvor det går galt  :)

Hmm... 'Fort Knox' er på fuld power (adgangskontrol), og jeg henviser ikke til sider der ikke er færdige (forfængelighed) :-/

I stedet kan jeg vise dig min stylesheet.css (måske kan du spore evt. fejl der?):

html,body{
  margin:0px;padding:0px;
}
.toptekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 11px;
  font-weight: none;
  color: #FFFFFF;
  text-align: right;
}
.navigation {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 10px;
  font-weight: bold;
  color: #CC3300;
}
.hovedoverskrift {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 13px;
  font-weight: bold;
  color: #7C7C74;
}
.hovedoverskrift_copy {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 13px;
  font-weight: bold;
  color: #616161;
}
.overskrift {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 12px;
  font-weight: bold;
  color: #929287;
}
.tekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 11px;
  font-weight: none;
  color: #000000;
  text-align: justify;
}
.fedtekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  text-align: justify;
}
.normaltekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 11px;
  font-weight: none;
  color: #000000;
  text-align: left;
}
.kursivtekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 11px;
  font-weight: none;
  font-style: italic;
  color: #000000;
  text-align: justify;
}
.minitekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 10px;
  font-weight: none;
  color: #000000;
  text-align: left;
}
.flexitekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 11px;
  font-weight: none;
  color: #969696;
}
.bundtekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 10px;
  font-weight: bold;
  color: #FFFFFF;
}
.input {
  text-decoration: none;
  font-family: Arial, Verdana, Helvetica;
  font-size: 12px;
  font-weight: none;
  border: 2px inset #B5B58B;
  background-color:#FFFFFF;
  width: 188px;
  height: 21px;
  color: #000000;
}
.fejltekst {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica;
  font-size: 11px;
  font-weight: bold;
  color: #FF3007;
}
A.link1 {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #616161;
}
A.link1:visited {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #616161;
}
A.link1:hover {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #CC3300;
}
A.link1:active {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #CC3300;
}
A.link2 {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #CC3300;
}
A.link2:visited {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #CC3300;
}
A.link2:hover {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #CC3300;
}
A.link2:active {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #CC3300;
}
A.link3 {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #CC3300;
}
A.link3:visited {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #CC3300;
}
A.link3:hover {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #CC3300;
}
A.link3:active {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #CC3300;
}
A.link4 {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}
A.link4:visited {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}
A.link4:hover {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}
A.link4:active {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 10px;
    font-weight: bold;
    color: #FFFFFF;
}
A.link5 {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #7FBD47;
}
A.link5:visited {
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #7FBD47;
}
A.link5:hover {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #7FBD47;
}
A.link5:active {
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica;
    font-size: 11px;
    font-weight: bold;
    color: #7FBD47;
}

Apo

Det hjælper ikke uden filen, det skal styre  :)

Kommer her ;-)

<form method="post" action="nyhedsbrev.asp">
          <input type="hidden" name="check" value="true"><table border="0" cellspacing="0"
          cellpadding="0" style="border: 1px solid rgb(128,128,128)" bgcolor="#DFDFCE">
            <tr>
              <td width="10" height="10"></td>
              <td width="188" height="10"></td>
              <td width="10" height="10"></td>
              <td width="188" height="10"></td>
              <td width="10" height="10"></td>
              <td width="64" height="10"></td>
              <td width="10" height="10"></td>
            </tr>
            <tr>
              <td width="10"></td>
              <td width="188"><input type="text" name="navn2" value="Indtast navn" onfocus="this.select()" style="width: 188px; height: 21px;" class="input"></td>
              <td width="10"></td>
              <td width="188"><input type="text" name="email2" value="Indtast emailadresse" onfocus="this.select()" style="width: 188px; height: 21px;" class="input"></td>
              <td width="10"></td>
              <td width="64"><input type="submit" name="send"
              style="width: 64px; height: 18px; cursor: hand; font-family: Arial, Trebuchet MS; font-size: 8pt; color: rgb(0,0,0); background-image: url('../grafik/knap_tilmeld.gif'); background-color: rgb(255,255,255); border: 0px"
              value=" "></td>
              <td width="10"></td>
            </tr>
            <tr>
              <td width="10" height="10"></td>
              <td width="188" height="10"></td>
              <td width="10" height="10"></td>
              <td width="188" height="10"></td>
              <td width="10" height="10"></td>
              <td width="64" height="10"></td>
              <td width="10" height="10"></td>
            </form>
            </tr>
          </table>

Apo

Nææhhh ... umiddelbart kan jeg ikke se nogen fejl. Det virker _komplet_ sort, at ét input-felt skulle influere på et andet ...!??!!!  :)

Med fare for at være 'en totalt-tumpe', er jeg nødt til at tro, du må lave en anden fejl  ;o)

Nu har jeg ændret på .input:

...
.input {
  text-decoration: none;
  font-family: Arial, Verdana, Helvetica;
  font-size: 12px;
  font-weight: none;
  border-top: 1px #B5B58B;
  border-bottom: 1px #B5B58B;
  border-left: 1px #B5B58B;
  border-right: 1px #B5B58B;
  background-color:#FFFFFF;
  color: #000000;
}
...

Men på siden vises inputs stadig som inset??! Det er et eller andet helt galt :-/

Apo

Ja, det kan jeg godt forstå. Det er fordi, du ikke explicit har sat en border-type - så bruges default-værdien 'inset'  ;o)

.input {
  text-decoration: none;
  font-family: Arial, Verdana, Helvetica;
  font-size: 12px;
  font-weight: none;
  border-top: 1px solid #B5B58B;
  border-bottom: 1px solid #B5B58B;
  border-left: 1px solid #B5B58B;
  border-right: 1px solid #B5B58B;
  background-color:#FFFFFF;
  color: #000000;
}

Det virker stadig ikke. Nu bliver der kun vist Explorer standard farver :-/

Hvad f..... går der galt 8-|

Apo

Kan du ikke prøve at lave et eksempel i en 'nedkogt' kopi og lægge den online?

Hej olebole.

Jeg har fået det til at virke. Jeg havde flere elementer (på flere forskellige sider) som blev kaldt med .input, og som åbenbart gik ind og påvirkede CSS'en. Efter at have fjernet formatteringerne på samtlige af disse elementer, virker det.

Det undrer mig blot, at formattering af elementer har indflydelse på CSS'en, men det har det åbenbart.

Kaster du et svar hen ad siden, så er der points til dig :-)

Apo

Gerne, men det er lidt ærgeligt, vi ikke kan få rettet dine fejl - for det _kan_ ikke lade sig gøre, som du beskriver det her.
Du laver med 100% sikkerhed en eller flere fejl ...... men hvor(?)  :)

Hmm... Lige nu er der ingen fejl, så vidt jeg ved/kan se.

Jeg tror desuden at fejlene skyldtes, at mit FTP-program (WS_FTP95) ikke opdaterer filerne korrekt, inden de uploades. Når jeg f.eks. er i en mappe, og opdaterer min css-fil, skal jeg først ud af mappen før filen opdateres, og tilbage igen.

Så jeg tror at mysteriet er løst :-)

Men points skal du ihvertfald have sammen med tak for hjælpen.

Apo

... selvtak  :)