krijg whatever:hover niet werkende - Softwareontwikkeling

maandag 11 juni 2007 17:37

Acties:

Topicstarter

Ik ben nog niet zo handig met css/javascript en dergelijke, maar het er toch wel een beetje verstand van.

Ik ben op het moment bezig aan een nieuw ontwerp voor mijn portfolio, in principe lukt het allemaal aardig. Ik kwam een script tegen voor dropdown menu's, na veel lezen heb ik een poging gewaagd.

Joepie, in eerste instantie, tot ik er achter kwam dat het helemaal niet werkt in IE (welke versie dan ook).

Na zoeken kwam ik een oplossing tegen namelijk 'whatever:hover'

Nu heb ik van alles geprobeerd, site's die hem gebruiken bekeken, en dat proberen na te maken. Maar geen geluk.

http://members.chello.nl/m.rijk3

Daar staat een boorbeeld van wat ik wil, maar niet werkt in IE. Het gaat om 'Top Level' 'Sub Level' etc.

Ik heb de whatever:hover onder de naam csshover.htc in mijn root staan. Ik heb zelf het idee dat ik de csshover.htc moet aanroepen in mn html, maar ik zie andere site's die hem gebruiken dat niet doen. Ik zou ook niet weten hoe ik hem moet aanroepen als dat de oplossing is.

hier mijn css voor index (home), bekijk de pagina bron van home maar voor informatie binnen mijn html, waar ik zelf denk dat de fout ergens zit. De rest is niet relevant, want daar ben ik niet mee aan het experimenteren.

Alvast bedankt!

@charset "UTF-8";
/* CSS Document */

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(../images/balk_blauw_r.jpg);
background-repeat: repeat-x;
background-position: center top;
background-color: #f6f6f6;
font: 10pt "Myriad Pro", veredana, arial, sans-serif;
color: #5b5b5b;
}

* { padding: 0; }

a {
text-decoration: none;
font-weight: normal;
font-size: 10pt ;
}

#nav {
width: 100%;
background-color: #f6f6f6;
border-bottom: px solid #cdcdcd;
text-align: center ;
}

#nav ul {
width: 44.1em;
margin: 0 auto;
list-style: none;
}

#nav li {
float: left;
position: relative;
width: 11em
}

#nav a {
display: block;
width: 11em;
color: #5b5b5b;
background-color: #f6f6f6;

}

#nav a:hover {
text-decoration: none;
color: #b0e9ff;
font-weight: bold ;
background-color: #f6f6f6;
}

#nav li ul {
display: block;
position: absolute;
width: 11em;
left: -999em;
}

#nav li:hover ul {
left: 0;
}

#nav li li, #nav li li a { display: block }

#nav li li a { width: auto; padding: 0 }

maandag 11 juni 2007 17:43

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

offtopic:
pssst: code tags

N-Freak schreef op maandag 11 juni 2007 @ 17:37:
Ik heb de whatever:hover onder de naam csshover.htc in mijn root staan. Ik heb zelf het idee dat ik de csshover.htc moet aanroepen in mn html, maar ik zie andere site's die hem gebruiken dat niet doen. Ik zou ook niet weten hoe ik hem moet aanroepen als dat de oplossing is.

Dat lijkt me toch wel vindbaar in de documentatie / examples

Anyway; waarschijnlijk iets in "een" CSS in de trant van:

Cascading Stylesheet:

1
2
3

body {
    behavior    : url(/pad/naar/csshover.htc);
}

Als je dat dan ook nog eens netjes conditioneel in je HTML opneemt is het (IMHO) helemaal mooi:

HTML:

1
2
3

    <!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" media="all" href="/pad/naar/ie.css">
    <![endif]-->

In die ie.css zet je dan bovenstaande CSS code (en eventuele andere ie-specific hacks, mocht je die gebruiken).

[ Voor 94% gewijzigd door RobIII op 11-06-2007 17:54 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

maandag 11 juni 2007 23:11

Acties:

N-Freak

Topicstarter

Oplossing gevonde na lang te hebben gezocht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Boven aan de pagina geplaatst en het werkt. Zo simpel en toch zo ingewikkeld.

In elk geval bedankt voor de moeite!