[CSS] Raar probleem met IE met links.

[gitaarwerk]

Ik heb een menuutje, en daar moet je als je rollover doet, een lijn en achtergrond kleur krijgen.

Nu is het zo dat het in Internet Explorer de bovenste lijn niet krijgt. De rest van de lijnen wel.

Mijn ander puntje is dat als ik de lijn weg laat bij de onMouseOut zeg maar. dat deze verschuift bij Hover. Nu is dat logisch aangezien je 1px aan iedere kant erbij krijgt. Wat ik bedacht is een extra puntje padding te geven, maar dat mag niet baten. Ik kan de lijn wel de achtergrond kleure geven, maar de achtergrond van de colom wil ik eigenlijk een afbeelding zetten.

Hoe is dat het beste op te lossen? (voorbeel van het dingetje is bijvoorbeeld de microsoft knopjes bij hotmail. )

code:

a.StaticMenu        { color: #0C3B64; padding: 3px; text-decoration: none;          border-color: #FFCC00; border-style:solid; border-top-width:1px;  border-right-width:1px;  border-bottom-width:1px; border-left-width:1px; }
a.StaticMenu:hover  { color: #0C3B64; padding: 3px; text-decoration: none;          background-color: #FAEECA; border-color: #0C3B64; border-style:solid; border-top-width:1px;  border-right-width:1px;  border-bottom-width:1px; border-left-width:1px; }
a.StaticMenu:visited{ color: #0C3B64; padding: 3px;}
a.StaticMenu:active { color: #0C3B64; padding: 3px;  border-color: #FFCC00; border-style:solid; border-top-width:1px;  border-right-width:1px;  border-bottom-width:1px; border-left-width:1px;}

dat was 1 ding.

Nu het andere euvel. Ik werk nooit met lists eigenlijk. Nu heb ik iets gevonden wat wel leuk was. Ik heb het hele CSS code moeten aanpassen, maar het is gelukt.

Die list maakt zo een navigatie ala dell tabbladen :

code:

#navlist
{
    border-bottom: 1px solid #CCCCCC;
    margin: 0;
    padding-bottom: 19px;
    padding-left: 10px;
}

#navlist ul, #navlist li
{
    display: inline;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

#navlist a:link, #navlist a
{
    background: #E8EBF0;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-style: solid;
    border-color: #CCCCCC;
    
    color: #666666;
    float: left;
    font-size: small;
    font-weight: normal;
    line-height: 14px;
    margin-right: 8px;
    padding-top: 2px ;
    padding-bottom: 2px ;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

#navlist a:link, #navlist a:hover
{
    color: #2180B1;
    background-color: #D9F2FF;
    
    text-decoration: none;
    
    line-height: 14px;
    margin-right: 8px;
    padding-top: 2px ;
    padding-bottom: 2px ;
    padding-left: 10px;
    padding-right: 10px;
    
    border-style: solid;
    border-color: #CCCCCC;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    
    float: left;
}

#navlist a:link#current, #navlist a:visited#current
{
    background-color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    color: #000000;
}

Nu werkt dit prima behalve 1 ding.
Als hij visited is (gok ik) of juist niet.. Krijgt hij de class als de Hover, de onHover werkt dan ook niet.

Als hij eenmaal geklikt is dan werkt hij prima.

Ik heb het gevoel dat het niet zo moeilijk moet zijn, maar ik denk dat ik wat over het hoofd zie.

[Verwijderd]

Ik gok op de volgorde van de declaraties.

[Verwijderd]

:link
:visited
:hover
:active

Nooit een andere volgorde gebruiken, dan gaat het vanzelf goed. Iemand kwam ooit eens met het ezelsbruggetje love hate

[gitaarwerk]

ah.. ik zet het altijd op deze volgorde :

link
hover
active
visited

ok..thanks ga dat proberen.
ezelsbruggetje rules

Iemand een idee voor het "toprandje" bij css nummer 1?

[ Voor 11% gewijzigd door gitaarwerk op 02-07-2005 17:12 ]

[Verwijderd]

Iemand een idee voor het "toprandje" bij css nummer 1?

Als het me duidelijk was wat je wil bereiken misschien wel.

[gitaarwerk]

Verwijderd schreef op zondag 03 juli 2005 @ 12:00:
[...]
Als het me duidelijk was wat je wil bereiken misschien wel.

Hij moet eigenlijk gewoon een kadertje geven, je kent het wel
Enige probleem is dat hij in Internet Explorer gek genoeg geen border aan de bovenkant geeft, terwijl mozilla dat wel doet.

als ik gebruik:

code:

border-top-width: 1px; 
border-left-width: 1px; 
border-bottom-width: 1px; 
border-right-width: 1px; 
(..de rest van de code zoals kleur en border-type enzo ..)

dan laat ie gewoon niet de toprand zien.

niet bedoeld als spam :

[ Voor 6% gewijzigd door gitaarwerk op 25-02-2020 11:28 ]

[Rowanov]

Wat misschien wel handig is, in dit geval dan, is de korte notatie van dit:

Cascading Stylesheet:

border-top-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: #CCCCCC;

Dat wordt dan:

Cascading Stylesheet:

border: 1px solid #ccc;

[ Voor 5% gewijzigd door Rowanov op 04-07-2005 13:46 ]

[gitaarwerk]

Ik ga het eens proberen.
Meestal vermijd ik liever verkortingen aangezien het over het algemeen simpeler is om vanalles aan te passen

Thanks