Jump to content
Sign in to follow this  
Mira

CSS-rollover, hva er galt?

Recommended Posts

Sitter å prøver å få til en CSS-mouseover på noen linker til en russeside.

Kan like godt først som siste poste koden min.

 

html

<div id="menu_left">
 <ul>
    <li><a href="http://home.no.net/jkng" id="Om_Russen"></a></li>
 </ul>

 

CSS

#menu_left {
height: auto;
width: 149px;
float: right;
margin: 0 196px 0 0;
}

div#menu_left ul li {
list-style-type: none;
margin: 0;
padding: 0;
height: 32px;
display: inline;
}

div#menu_left ul li a {
width: 149px;
height: 32px;
display: block;
overflow: hidden;
background-position: left;
}

div#menu_left ul li a:hover {
background-position: right;
overflow: visible;
}

a#Om_Russen {
background: url(images/om_russen.gif) no-repeat;
}

 

Er ikke veldig god på CSS enda men mener da at dette burde fungere.

Problemet er at den vises ulikt i alle browsere, poster skjermbilde av alle tre her.

 

Opera

opera.gif

 

IE

IE.gif

 

FF

firefox.gif

 

Som dere ser ligger den på riktig sted i Opera, men i de to andre er den helt på villspor. Men i Opera gjenskjennes ikke bildet som en link.

Er sikkert mye tull med koden.

 

Noen som kan "belære" meg litt? ;)

 

edit: Bildet som skal brukes som BG er slik ut:

om_russen.gif

Edited by Mira

Share this post


Link to post
Tror ikke du kan ha display:inline på li samtidig som du har display:block på a.

Prøv å skift ut display:inline med en float.

Du har nok helt rett i det, fikset det nå, men har fortsatt samme problemet.

Share this post


Link to post

Joda, går vel fint det ;)

 

LINK

 

Men jeg sier ifra på forhånd, koden er et eneste rot og designet er heller ikke ferdig :whistle:

Edited by Mira

Share this post


Link to post

Ikke meningen å bumpe tråden, men er det virkelig ingen som kan svare på hvorfor den posisjoneres forskjelli i alle tre browserene og hvorfor elementer innenfor <ul></ul> ikke registreres som linker i Opera?

 

For å si det veldig "banalt", musa blir ingen hånd over linkene og det går heller ikke ann å trykke :p

Edited by Mira

Share this post


Link to post

Har det noe med at det ikke er innhold i a-elementet?

<li><a href="http://home.no.net/jkng" id="Om_Russen"></a></li>

blir til

<li><a href="http://home.no.net/jkng" id="Om_Russen">Om russen</a></li>

 

:hmm:

 

(Det SKAL forøvrig se ut som den siste snutten der uansett.) :)

Share this post


Link to post

Skal prøve det når jeg kommer hjem, men det er altså påkrevd å ha med text/ <span> der?

Edited by Mira

Share this post


Link to post
Skal prøve det når jeg kommer hjem, men det er altså påkrevd å ha med text/ <span> der?

Du vil vel at "alle" skal kunne se lenkene dine, vil du ikke? Har blitt forbauset over dette hos norskwebforum.no også, at det brukes tomme a-elementer.

 

Vi ønsker å style lenken, ikke "fjerne" den. ;)

Share this post


Link to post

du må vel ha noko innanfor <a href..... og </a> som ein skal trykke på

 

kan forresten fortelle at i min opera er det om russen bildet (trur det er det, vanskeleg å sjå) komt ut på høgresida, berre såvidt innpå skjermen

Share this post


Link to post

du må vel ha noko innanfor <a href..... og </a> som ein skal trykke på

 

Nei, ikke hvis det er grafiske knapper du bruker.. Men for ikke-grafiske nettlesere får du da ingen meny. Og det er jo ikke så veldig lurt.. Derfor bør man lage en klasse i CSS som går for <span> taggen som skjuler det du legger mellom <a href=".."> og </a>. Jeg bruker denne:

 

span.hide {
display: none;
}

 

da blir HTML'en seende slik ut:

<li><a href="http://home.no.net/jkng" id="Om_Russen"><span class="hide">Om russen</span></a></li>

 

Dermed vil grafiske nettlesere ikke vise dette, men ikke-grafiske vil vise det. Det er i hvertfall måten jeg gjør det på.

Share this post


Link to post
Eventuellt bruker man text-indent: -9999px og/eller font-size: 1px på a.

 

Mindre markup, samme resultat. :)

eventuellt

 

Overflow:hidden;

padding: nPX 0 0 0;

height /**/: nPX;

height: nPX!important;

 

;)

Share this post


Link to post

Er et eller annet rart her, koden er så akkurat slik den skal (tror jeg).

Den ser nå slik ut:

<ul>
    <li><a href="http://home.no.net/jkng" id="Om_Russen"><span id="hidden">Russen</span></a></li>
 </ul>

 

CSS

#hidden {
display: none;
}

 

Ellers er ingenting forandret, allikvel vises det ikke som link i Opera, noen som kan teste om det funker, mulig feilen ligger i liseren min (usansynelig)

Share this post


Link to post

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...