css-meny

[Format71]

Sliter med ett par ting.

 

.: titt her :.

 

Knappene i headeren skal fungere som hovedmeny, og på mouseover ønsker jeg å få frem tekst under knappen.

 

Opera funker som jeg vil. IE viser for det første en stygg firkant rundt knappene som jeg vil ha vekk, pluss at ingen tekst kommer frem.

 

Noen som kan hjelpe meg?

 

Neste steg er å få byttet bilde på knappene når musa er over. Det så jeg det nettopp var en diskusjon på, så det får jeg vel forsøke å få til først.

 

Noen som vet en grei måte å lage 'hot-state' bilder i photoshop? Forsøkte å leke litt med farge justeringer, men fikk ikke helt den effekten jeg ville ha.

 

-Vegar

[Loomy]

Opera funker som jeg vil. IE viser for det første en stygg firkant rundt knappene som jeg vil ha vekk,

Ikke IE sin skyld at du ikke har slått av border

 

img.ingenborder {
border:0px;
}

<img class="ingenborder" src="blahblah"...

[haugsand]

Dette eksemplet ser hvertfall ut til å virke i IE.

[Format71]

Ikke IE sin skyld at du ikke har slått av border

Hey! Rolig nå. Jeg har aldri bedt om noen bord, og da skal jeg heller ikke ha bord. Er det virkelig etter standarden at man automatisk peiser på med en stygg fet kant rundt bilder når de står inni en <a> ?

 

Dette eksemplet ser hvertfall ut til å virke i IE.

Det er det eksempelet jeg har brukt for å få det til å funke i Opera, men neimen om det vil i IE...

 

Relevante stildefinisjoner:

#button01 {
    position: absolute;
    left: 370px;
    top: 60px;
    height: 100px;
}

div a span {display:none;}
div a:hover span {
    display: block;
    position: absolute; top: 75px; left: 0; width: 60px;
    padding: 0px; margin: 0px; z-index: 100;
    font: 10px Verdana, sans-serif; text-align: center;
}

 

Og koden for første knapp:

<div id="button01"><a href="index.html"><img src="images/btnHome.png" alt="" /><span>Forside</span></a></div>

-Vegar

[epsil]

Er det virkelig etter standarden at man automatisk peiser på med en stygg fet kant rundt bilder når de står inni en <a> ?

Visningen av lenker er ikke eksplisitt definert i standarden, men overlates til hver enkelt nettleser:

 

User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not.

Skal du ha en uniform visning, må du definere denne eksplisitt med stilsett.

 

Dette eksemplet ser hvertfall ut til å virke i IE.

Det er det eksempelet jeg har brukt for å få det til å funke i Opera, men neimen om det vil i IE...

Jeg foreslår at du lager en vertikal liste og bruker Stuart Langridge’s accessible image replacement i kombinasjon med Pixy’s brilliant Fast Rollovers.

 

Edit: Mellomrom …

Endret 17. februar 2004 av ePsiLON47

[Format71]

Se det - det var mange gode linker. Skal se om jeg får til noe ut fra de.

 

Frustrerer meg fortsatt over at ting ikke fungerer i IE, da...

 

Vedrørende bord rundt bilder i IE - ville det ikke da vært naturlig å fjerne denne med text-decoration: none i stede for border: 0 ? Det er jo på en måte streken under text-linker som av en eller annen grunn blir gjort omm til strek rundt hele bildet?

 

Men det er vel bare å akseptere det slik det er. Det funker jo med border: 0, så da er jeg egentlig fornøyd ;-)

 

-Vegar

[haugsand]

Border og text-decoration er ikke det samme.

 

Prøv for eksempel å sette border-bottom: 1px solid #00f; i tillegg til text-decoration: underline; på et element.