glow efekt s css v FF / dinamicen width s CSS v FF

takle css mam in v IE lepo nardi glow efekt s filtri
zdej bi pa rd se v FF neki podobnga spacal
lahko enostavna odebelitev borderja, ampak potem morm povecat tut width, height za tisto razliko
css:

body { behavior:url("cssfocusandhover.htc"); }

input.text, input.button, textarea.memo {
border: solid 1px #7489B8;
}

input.button {
background: #ebeaee;
border-width: 2px;

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#ffe4e3ee, GradientType=0)
progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=1, Direction=135);

}

input.button:hover {
margin: -1px -1px;
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#ffe4e3ee, GradientType=0)
progid:DXImageTransform.Microsoft.Glow(color = blue, enabled = true, strength = 1);

}

input[type=button].button:hover {
border-width: 3px;
/* tuki pa neki like: width: width + 2px; height: height + 2px;
v IE so propertiji lahko doloceni z: expression(nekJSexpr);
*/
}

tnx

tolko o tvojem allmighty cssju

# Line: 0 Context : body

Property behavior doesn't exist : url("cssfocusandhover.htc")
# Line: 0 Context : input.button

attempt to find a semi-colon before the property name. add it
# Line: 0 Context : input.button

Property progid doesn't exist : DXImageTransform
# Line: 0 Context : input.button

Parse Error - DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#ffe4e3ee, GradientType=0) progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=1, Direction=135);


Očitno ne ti IE ne omogoča povečave besedila, zato naj ti razložim.


Property behavior doesn't exist : url("cssfocusandhover.htc")
Property progid doesn't exist : DXImageTransform

To pomeni da to ni standarden CSS. Pravzaprav mislim da je filter celo ActiveX, kar pomeni da bo stvar delovala le v Oknih (po možnosti čim novejših) in v IE. Če se ti splača delati stran le za samega sebe pa presodi sam.

na kratko: narest CSS stil, ki bo v :hover naredu: premaknu element levo-gor za 1px (to je ze), odebelil rob za 1px (tut ze), povecu element za 2px - kompenzacija za tist premik tko, da zgleda kot, da se je naredla obroba na zunanji strani
ali pa na nek drug nacin narest obrobo OKOL elementa

Tole je standardni CSS samo ti ne bo delal v IE.

Predvidevam da imaš tukaj neko tabelo za navigacijo.
#navBar {
vse lastnosti
position:
top:
left:
}

#navbar td {
vse lastnosti
text-size:
width:
height:
border:
margin:
padding:
}

#navbar td:hover {
vse lastnosti za takrat ko bo miškin kazalec nad celico od tabele
text-size:
width:
height:
border:
margin:
padding:
}

Morda imaš samo slike namesto tabele, ampak psevdorazred :hover dela tudi pri slikah (pravzaprav če ti uspe skombinirati z a:hover ti bo delalo v IE in v FF ter ostalih brskljalnikih).

Če ti gre za posebne efekte bi lahko uporabil tudi slike v celicah tabele za ozadje in samo zamenjal ozadje pri :hover.
Skratka možnosti imaš veliko, samo pazi, ker IE podpira :hover samo pri sidrih (a).

PA folk dejte dati linke do vaših dejanskih strani in ne da krneki na pamet tle pišemo css!!
Tako vam bodo lažje pomagali.
Mislim, da IE ne podpira pseudo:classa :hover na nobenem elementu razen <A href=""> (link)


BTW, to je narobe:
style="button"
V atribut style se piše dejansko CSS kodo, npr:
style="background: #ebeaee; border-width: 2px;"

Jaz bi enostavno določil širino in višino input gumbov, potem bi ga bi jo v :hover povečal.

input.button {
border: solid 1px #7489B8;
background: #ebeaee;
border-width: 2px;
width: 8em;
height: 4em;
}

input.button:hover {
margin: -1px -1px;
border-width: 3px;
width: 9em;
height: 5em;
}

Lahko poskusiš tudi podati width: 105%; v :hover, če deluje ne da bi določil prvotno velikost v .button.

Aja pa ne uporabljal px, ker se ti bo stran ob različnih velikostih fontov oblikovno sesula. em je relativna enota glede na velikost fonta in je nekako najboljša izbira. Kakšna je podpora za em v IE pa ne bi vedel.

fiksne vrednosti sirine/visine ne pridejo v postev, procentualne velikosti tut ne
glede em bom pa se pogledu

outline ti dela v FF 0.9.1 ? meni ne

(za vsak slucaj se posebi navedeni propertiji)

input {
outline: blue solid 5px;
outline-color: blue;
outline-style: solid;
outline-width: 5px;
}

clo pise, da ni podprt: w3schools css reference

bo zgleda res edini 'efekt' v :hover gumba boldanje fonta .. yipee

se tole o outline
na eni strani bojo taki gumbi, na drugi drugacni, pa tut razlicni na eni strani - obnasanje mora bit pa za vse enako
za vsak gumb pa ne mislm pisat stila - ubije smisel css-ja

aja pa tist "-moz-outline" tut ne dela v FF
mogoce dela za 'a' al pa kak drug element .. za input ne dela

v Operi mi lepo dela

tole ma zeljen efekt:

input.button:hover {
margin: -1px -1px;
}

input[type=button].button:hover {
border-width: 3px;
}

"css hack" zato, da se tist stil uporab v mozz in ostalih browserjih, v IE bo pa itak glow filter