[CSS/IE8] Hover werkt niet altijd correct op button

[mschol]

ik ben bezig met een prive project, wat later mogelijk toegankelijk wordt voor anderen.
nu loop tegen een klein probleempje aan waar ik niet echt uit kom, en ik zou het graag opgelost zien

ik heb een button met een class, die een border toont zodra er overheen wordt gegaan met de muis d.m.v. de pseudo class :hover
dit functioneert in FF 3.6.8 prima echter in IE8, browser mode IE8 pakt hij de :hover alleen als de muis van links, onderen of rechts komt, komt de muis van boven wordt de :hover niet getriggerd
stel ik de pagina in op browser mode IE7 (via de developer toolbar) functioneer hij wel correct.

de testcase is hier te vinden: http://tinyurl.com/2v7r9zl
een vereenvoudigde versie van het probleem element is hier te vinden: http://tinyurl.com/2d8fmup
het betreft de search knop rechts bovenin

de bijbehorende html code en CSS:

HTML:

    <form id="search" action="">
    <div>
    <input name="searchFor" type="text" size="10" />
        <input type="submit" class="submitsearch" value="Search" />
    </div>
    </form>

Cascading Stylesheet:

.submitsearch{
    border:1px hidden;
    background-color:transparent;
    background:url(http://<domein>/spacer.gif);
}

/****** Pseudo classes search ******/
.submitsearch:focus{
    border:1px solid;   
}

.submitsearch:hover{
    border:1px solid;   
}

.submitsearch:active{
    border:1px solid;   
}

wat heb ik geprobeerd:

• Pseudo classes :active, :focus toegevoegd; dit werd op aangedragen als oplossing
• een transparante background toegevoegd, omdat IE kennelijk niet altijd een :hover herkent als je niet op het element zit maar pas op de tekst
• omliggende divs korter gemaakt om te 100% zeker te zijn dat ze niet "over" de search knop heen lagen, Dit deed enkele keer het probleem verplaatsen van de bovenkant naar de onderkant, ik heb meerdere malen gekeken en er lijkt op dit moment geen enkel element over de zoek knop of daar dicht bij in de buurt te zitten wat de boel in de wat zou kunnen schoppen

Helaas kan ik de sites waar ik de 2 bovenste oplossingen heb gevonden niet vinden anders had ik ze er zeker bij vermeld..

Test omgeving:
IE8
FF 3.6.8
Windows 7 ultimate

[ Voor 3% gewijzigd door mschol op 05-12-2010 16:39 . Reden: ik wil niet dat mijn domein in de post staat ]

[Verwijderd]

Ik heb geen IE8 tot mijn beschikking op het moment, maar ik kan me voorstellen dat hij een kleur wilt. Dus "border: 1px solid #000;" oid. Verder zou ik de knop nog even een keer bekijken als ik jou was... Hij verspringt als je er overheen gaat, dat kan niet de bedoeling zijn?

[mschol]

Verwijderd schreef op zondag 05 december 2010 @ 12:32:
Ik heb geen IE8 tot mijn beschikking op het moment, maar ik kan me voorstellen dat hij een kleur wilt. Dus "border: 1px solid #000;" oid. Verder zou ik de knop nog even een keer bekijken als ik jou was... Hij verspringt als je er overheen gaat, dat kan niet de bedoeling zijn?

de kleur is inderdaad een hele handige (al gaf hij hier in IE en FF gewoon het gewenste zwarte randje)
het verspringen van de knop is hier niet zichtbaar, het tekst veld verspringt wel zodra de border verschijnt, ook niet helemaal wat ik zou willen maar dat vond ik een minder vervelend probleem (en heb daarom niet gevraagd hoe dat e.v.t. op te lossen zou zijn)

-edit-
kleur toegevoegd en nu is het probleem verplaatst naar de bovenkant van de button

[ Voor 6% gewijzigd door mschol op 05-12-2010 12:38 ]

[Verwijderd]

mschol schreef op zondag 05 december 2010 @ 12:35:
[...]

de kleur is inderdaad een hele handige (al gaf hij hier in IE en FF gewoon het gewenste zwarte randje)
het verspringen van de knop is hier niet zichtbaar, het tekst veld verspringt wel zodra de border verschijnt, ook niet helemaal wat ik zou willen maar dat vond ik een minder vervelend probleem (en heb daarom niet gevraagd hoe dat e.v.t. op te lossen zou zijn)

Ik zie nu net dat ik niet helemaal goed gelezen heb, denk dat ik er weinig aan kan doen verder, aangezien ik het niet kan testen. Maar je probleem met het tekstblok die verspringt komt door je border, op het moment dat deze erbij komt wordt je element 2px breder, dat moet niet zo moeilijk zijn om dat op te lossen. Het makkelijkste is om er voor te zorgen dat die 2px er al bij zitten op het moment dat je niet hovert.

edit: Ik zie dat je #globalLink over het form heen valt, dit zou eventueel rare situaties op kunnen leveren.

[ Voor 5% gewijzigd door Verwijderd op 05-12-2010 12:41 ]

[mschol]

Verwijderd schreef op zondag 05 december 2010 @ 12:39:
[...]

Ik zie nu net dat ik niet helemaal goed gelezen heb, denk dat ik er weinig aan kan doen verder, aangezien ik het niet kan testen. Maar je probleem met het tekstblok die verspringt komt door je border, op het moment dat deze erbij komt wordt je element 2px breder, dat moet niet zo moeilijk zijn om dat op te lossen. Het makkelijkste is om er voor te zorgen dat die 2px er al bij zitten op het moment dat je niet hovert.

met wat spelen met de padding is dat "probleem" inderdaad inmiddels opgelost (ik ben geen grote held met css)

edit: Ik zie dat je #globalLink over het form heen valt, dit zou eventueel rare situaties op kunnen leveren.

wellicht ten overvloede: ik draai hier op 1920x1080 (browser is echter niet full screen) en zowel in firebug als in de developer toolbar, als ik het element selecteer, valt hij er niet over heen..

-edit-
ik heb chrome voor de vorm ook maar even gedownload, die opent standaard in een 800x600 een venster, deze resized naar 1024x768 via webdeveloper extension en het desbetreffende element viel een stukje over de input textbox heen, dus een width van 400 toegevoegd en nu komt hij er zeker niet overheen..
tevens verplaatst het probleem zich van boven naar onderen en visa versa, waarom is me niet geheel duidelijk.

-edit2-
ik heb een kleine test pagina gecreerd om te kijken of het echt een element is dat de problemen veroorzaakt:
http://tinyurl.com/2d8fmup

deze pagina bevat 69 regels html inclusief de benodigde css, en ook daar doet het probleem zich voor...
lijkt er haast op dat het een bug in IE8 is..

[ Voor 29% gewijzigd door mschol op 05-12-2010 16:43 ]

[Tarilo]

Om het verspringen te voorkomen zou je ook standaard al een border kunnen meegeven met een zelfde kleur als de achter grond. Vervolgens verander je alleen de kleur als je hovert.

Padding werkt natuurlijk ook...