Problemer med meny med bakgrunn og hover

[muffe]

Jeg har en meny som ser sånn ut:

 

<div id="mainmenu">
       <h2>Meny</h2>
       <ul>
         <li><a href="index.html" title="Startside">Hjem</a></li>
         <li><a href="fakta.html" title="Diverse unyttige fakta">Fakta</a></li>
         <li><a href="produkter.html" title="Våre stinkende produkter">Produkter</a></li>
         <li><a href="forhandlere.html" title="Våre forhandlere">Forhandler</a></li>
         <li><a href="bestill.html" title="Bestill noen av våre produkter">Bestilling</a></li>
       </ul>
     </div>

 

De er stylet med denne CSS-koden:

 

* {
 font-family      : Verdana, Sans-Serif;
 font-size        : 1em;
 margin           : 0;
 padding          : 0;
}


#mainmenu a:link, #mainmenu a:visited {
 background       : #0000b3 url('images/button.png') no-repeat 0 0;
 color            : #fff;
 display          : block;
 font-family      : "Times New Roman", Times, Serif;
 font-size        : 1.6em;
 height           : 34px;
 margin           : 0 0 10px 0;
 padding          : 5px 0 5px 0;
 text-align       : center;
 text-decoration  : none;
}


#mainmenu a:hover {
 background       : #000088 url('images/button.png') no-repeat 0 -44px;
 margin           : 0 0 10px 0;
 padding          : 5px 0 5px 0;
}


#mainmenu ul {
 list-style-type  : none;
}

 

Problemet er at når :hover effekten skal slå inn, så ser det ut som om margene settes til 0, og den boksen under "hopper" opp til den over, og sånn hopper de frem og tilbake. Noen som kan hjelpe meg her? Siden er dessverre ikke på nett, så det blir litt vanskelig å vise i "real life".

 

Bør vel også legge til at siden oppfører seg glitrende i Firefox (både 1.0.7 og 1.5 RC2), det er (som vanlig) kun i Internet Explorer dette skjer.

[Lovskogen]

Burde du ikke style div#mainmenu ul li a og div#mainmenu ul li a:hover ?

#mainmenu gjelder jo div'en? Dessuten burde du sette en ID på UL.

Endret 13. november 2005 av George Bush

[muffe]

Det er jo bare en <ul> inne i <div id="mainmenu">, hvorfor er det da nødvendig å sette en id på <ul>?

 

Og går det i det hele tatt an å legge en :hover på et <li> element i Internet Explorer? Trodde IE bare aksepterte :hover på linker jeg?

[Lovskogen]

Fordi, om du setter feks. ID="menu" på UL så kan du style via:

UL#menu li a:hover

 

Forresten så kan du få :hover på det meste i IE:

http://designalized.com/blog/2005/10/how-to-fix-hover-in-ie/

Endret 13. november 2005 av George Bush

[HrDings]

Jeg har en meny som ser sånn ut:

 

<div id="mainmenu">
       <h2>Meny</h2>
       <ul>
         <li><a href="index.html" title="Startside">Hjem</a></li>
         <li><a href="fakta.html" title="Diverse unyttige fakta">Fakta</a></li>
         <li><a href="produkter.html" title="Våre stinkende produkter">Produkter</a></li>
         <li><a href="forhandlere.html" title="Våre forhandlere">Forhandler</a></li>
         <li><a href="bestill.html" title="Bestill noen av våre produkter">Bestilling</a></li>
       </ul>
     </div>

 

De er stylet med denne CSS-koden:

 

* {
 font-family      : Verdana, Sans-Serif;
 font-size        : 1em;
 margin           : 0;
 padding          : 0;
}


#mainmenu a:link, #mainmenu a:visited {
 background       : #0000b3 url('images/button.png') no-repeat 0 0;
 color            : #fff;
 display          : block;
 font-family      : "Times New Roman", Times, Serif;
 font-size        : 1.6em;
 height           : 34px;
 margin           : 0 0 10px 0;
 padding          : 5px 0 5px 0;
 text-align       : center;
 text-decoration  : none;
}


#mainmenu a:hover {
 background       : #000088 url('images/button.png') no-repeat 0 -44px;
 margin           : 0 0 10px 0;
 padding          : 5px 0 5px 0;
}


#mainmenu ul {
 list-style-type  : none;
}

 

Problemet er at når :hover effekten skal slå inn, så ser det ut som om margene settes til 0, og den boksen under "hopper" opp til den over, og sånn hopper de frem og tilbake. Noen som kan hjelpe meg her? Siden er dessverre ikke på nett, så det blir litt vanskelig å vise i "real life".

 

Bør vel også legge til at siden oppfører seg glitrende i Firefox (både 1.0.7 og 1.5 RC2), det er (som vanlig) kun i Internet Explorer dette skjer.

5146262[/snapback]

Det var akkurat samme problem som jeg hadde for et par dager siden. Var dessverre dårlig hjelp å få på dette forumet.

 

Men, fant ut at på egenhånd at ved å installere IE 7 på siden min fungerte det uten å modifisere koden min.

[Lovskogen]

Må dere ha JS for å kunne lage en simpel meny?

Se her

[HrDings]

Må dere ha JS for å kunne lage en simpel meny?

Se her

5146470[/snapback]

??

 

Hvor var det snakk om JS her?

[Lovskogen]

IE7-greia som han skulle legge inn.

[HrDings]

IE7-greia som han skulle legge inn.

5147916[/snapback]

Det har vel mindre med JS å gjøre enn å faktisk fikse FEILENE i IE å gjøre. JavaScript er bare måten det gjøres på. Men man trenger ikke å åpne filene en gang, det er bare å laste dem opp og å legge inn en linjes-kode i headeren og så fungerer XHTML og CSS slik som det gjør i ordentlige browsere. Scriptene lastes ikke en gang med mindre man bruker Internet Explorer.

 

Det å slippe å endre sin validerende kode uten noe arbeid er mye mye bedre enn noen andre hack spør du meg.