Søg
Avatar billede Max Novice
12. januar 2009 - 13:14 Der er 20 kommentarer og
1 løsning

Hover på div's indhold

Hej alle,

Jeg har (tilsyneladende som så mange andre) nogle problemer med forskelle på de forskellige browsere og css. Problemet er, at jeg vil lave en simpel :hover på en div, som så skal skifte border-color (div'en altså) ;). Det virker som planlagt i Firefox, men IE laver som sædvanligt vrøvl. I Firefox bliver :hover'en aktiveret uanset hvor i div'en jeg peger, men i IE bliver den kun aktiveret hvis jeg peger på kanten af div'en, hvilket jo i og for sig giver god mening. Jeg har givet div'en en diplay:block; for at få den udfyldt, men det ignorerer IE bare. Jeg søgte på Google efter en løsning, og alle synes at være enige om, at bruge #content i deres tag, men ak, lige lidt hjælper det.. I får lige min div her:

.scrl_l
{
    display: block;
    max-width: 12px;
    max-height: 243px;
    min-width: 12px;
    min-height: 243px;
  position: relative;
  top: -1px;
  left: -1px;
  border: solid 1px gray;
}
.scrl_l:hover
{
    border-color: Blue;
}

Se bare bort fra positionering, da div'en er en del af andre div'er.

Håber I kan hjælpe mig til at få det til at virke.

Mvh.
Avatar billede zips Juniormester
12. januar 2009 - 13:19 #1
Hover virker ikke på et div element i IE kun på a elementer :)
Avatar billede jokkejensen Novice
12. januar 2009 - 13:33 #2
jo det er IE6 det ikke virker. (fix: http://www.xs4all.nl/~peterned/csshover.html)

Det skyldes den absolutte potionering.

Har du ikke et link, så man kan gendanne fejlen ?

/J
Avatar billede Max Novice
12. januar 2009 - 13:38 #3
Hmm.. Har ikke nogen position:absolute, men en position:fixed. Kan det være det? Har ikke et link, da det bare er en testside indtil videre, men du kan da få hvad jeg har på den side..

html:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>DivTest</title>
  <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <div class="sldr_m">
      <div class="scrl_l">
      </div>
      <div class="sldr">
      </div>
      <div class="scrl_r">
      </div>
    </div>
  </div>
  </form>
</body>
</html>

css:

body
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    height: 100%;
    min-height: 100%;
    width: 100%;
}

.sldr_m
{
    max-width: 762px;
    max-height: 243px;
    min-width: 762px;
    min-height: 243px;
  position: fixed;
  top: 150px;
  left: 150px;
  border: solid 1px red;
}

.sldr
{
    max-width: 734px;
    max-height: 243px;
    min-width: 734px;
    min-height: 243px;
  position: relative;
  top: -246px;
  left: 13px;
  border: solid 1px green;
}

.sldr div
{
}

.sldr div img
{
}

.scrl_l
{
    display: block;
    max-width: 12px;
    max-height: 243px;
    min-width: 12px;
    min-height: 243px;
  position: relative;
  top: -1px;
  left: -1px;
  border: solid 1px gray;
}
.scrl_l:hover
{
    border-color: Blue;
}

.scrl_r
{
    display: block;
    max-width: 12px;
    max-height: 243px;
    min-width: 12px;
    min-height: 243px;
  position: relative;
  top: -491px;
  right: -749px;
  border: solid 1px gray;
}
.scrl_r:hover
{
    border-color: Blue;
}
Avatar billede olebole Juniormester
12. januar 2009 - 13:48 #4
<ole>

Det var godtnok et _temmelig_ uortodokst stylesheet. Jeg forstår ikke begrundelsen for adskillige af dine style regler. Hvorfor samme max- og min-width (og -height)? Hvorfor de top- og left-værdier?

Div er i øvrigt block-elementer fra fødslen, så det er overflødigt at tildele dem display:block

/mvh
</bole>
Avatar billede Max Novice
12. januar 2009 - 13:54 #5
Hov.. Bare se bort fra min- og max-værdierne. De er udskiftet med alm. width og height. Block-tingene var et forsøg på at få IE til at te sig..

body
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

.sldr_m
{
    width: 762px;
    height: 243px;
  position: fixed;
  top: 150px;
  left: 150px;
  border: solid 1px red;
}

.sldr
{
    width: 734px;
    height: 243px;
  position: relative;
  top: -246px;
  left: 13px;
  border: solid 1px green;
}

.sldr div
{
}

.sldr div img
{
}

.scrl_l
{
    width: 12px;
    height: 243px;
  position: relative;
  top: -1px;
  left: -1px;
  border: solid 1px gray;
}
.scrl_l:hover
{
    border-color: Blue;
}

.scrl_r
{
    width: 12px;
    height: 243px;
  position: relative;
  top: -491px;
  right: -749px;
  border: solid 1px gray;
}
.scrl_r:hover
{
    border-color: Blue;
}
Avatar billede olebole Juniormester
12. januar 2009 - 13:58 #6
- og dine left- og top-værdier?
Avatar billede jokkejensen Novice
12. januar 2009 - 14:04 #7
Det virker når der er indhold i, eller man tildeleer dem en baggrundsfarve :)

Husk også at flytte page directive og DTD op på samme linie, og lige efter hinanden:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"  Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Avatar billede Max Novice
12. januar 2009 - 14:15 #8
Top og left værdier er der bare for at få placeret scrl_l og scrl_r rigtigt. De skal stå på kanten af hhv. venstre og højre side af sldr_m. Ved ikke om det er den rigtige måde at gøre det på. Med tiden skal sldr placeres mellem sldr_l og sldr_r.

Baggrundsfarve-tricket virker sørme! :) En skam man ikke kan gøre det med background-color: transparent; ..
Avatar billede jokkejensen Novice
12. januar 2009 - 14:16 #9
ja jeg ved sku heller ikke lige hvorfor, men sikkert en bug - Og jeg formoder der alligevel skal være noget indhold i divet ? Måske du kan neste en div deri med height: 100%; og width: 100%;, hvis du er til den slags :)

/J
Avatar billede olebole Juniormester
12. januar 2009 - 14:35 #10
Det er ofte et problem med tomme elementer i IE. Men grunden til, jeg nævner det med dine left- og top-værdier, er, at du meget let får bøvl med at placere andre elementer med dén fremgangsmåde  ;o)
Avatar billede Max Novice
12. januar 2009 - 14:45 #11
Hvilken ville være den bedste fremgangsmåde?
Avatar billede Max Novice
13. januar 2009 - 08:50 #12
Jokkejensen, kan du ikke smide et svar? Så kommer der points.

Tak for hjælpen begge to. :)
Avatar billede jokkejensen Novice
29. januar 2009 - 16:02 #13
np, jeg bruger det her hack til at løse, men det bliver højst sandsynligt høvlet til jorden når olebole kigger med :)

background-image: url(data:image/gif;base64,AAAA);

/J
Avatar billede jokkejensen Novice
29. januar 2009 - 16:02 #14
how, svar.
Avatar billede olebole Juniormester
29. januar 2009 - 16:31 #15
jokke >> Hvis der implicit i din bemærkning ligger, at du selv er klar over, det er skodkode udokumenteret, behøver jeg vel ikke høvle det i jorden. At jeg måske burde høvle dig i jorden for at sprede den slags, er så en helt anden ting - men den viden er jeg også helt sikker på, du har. Og så kan man jo kun undre sig  =)

Man kan bare give elementet en baggrundsfarve, så plejer det at virke
Avatar billede jokkejensen Novice
29. januar 2009 - 16:55 #16
hehe ja, jeg er nok klar over du krummer tær :), ja til baggrundsfarve, men så skal man vel til at sætte opacity osv hvis det skal være transperent, endnu et hack hvis netop IE skal være med.

En transperent gif, beklager at sige det i '09, ville også løse problemet hvis den bliver trukket stor nok :).

Ellers må man til at neste alt muligt markup, men vil hellere holde det sematisk korrekt. Så jeg vælger lige at kaste den i mit CSS :)

/J
Avatar billede olebole Juniormester
29. januar 2009 - 23:19 #17
Personligt ville jeg hellere bruge en png-24 med 1% opacity:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TITLE</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.myDiv {
    width: 300px;
    height: 300px;
}
.trans {
    background: url(trans.png);   
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.trans {
    background: transparent;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='trans.png', sizingMethod='scale');
}
</style>
<![endif]-->
</head>
<body>

<div class="myDiv trans" onmouseover="alert('hep')"></div>

</body>
</html>

- og allerhelst:

<link href="style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link href="ie6_png.css" rel="stylesheet" type="text/css">
<![endif]-->
Avatar billede jokkejensen Novice
04. marts 2009 - 09:44 #18
filter validerer vel heller ikke som ren CSS, så det er vel et fedt hvilken metode man bruger ? - det er jo kun ie7 der er problemet.

/J
Avatar billede olebole Juniormester
04. marts 2009 - 09:50 #19
Ja, hvis du synes  =)
Avatar billede jokkejensen Novice
04. marts 2009 - 09:58 #20
Forsøgte nu bare at blive klogere :), IE7 håndtere forresten fint png, så det er kun ie6 der skal hackes.
Avatar billede olebole Juniormester
04. marts 2009 - 13:51 #21
Ja, jeg glemte, der er en gammelsproglig studine, der har skramlet standard vedr. conditional comments sammen  ;o)

Der burde 'naturligvis' have stået:
    <!--[if lt IE 6]>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 21:03 Forlænge ringetid Af 1Dorte i Apps til Android
17/0117:38 Video ikoner Af Malm i Windows
17/0117:27 Video ikoner Af logbuilders i Windows
16/0110:29 Negativ billeder på samsung Af ALICE i Småopgaver
15/0115:45 HJÆLP - Lopslag, Indeks? Hvad gør jeg! Af Eva i Excel
White papers
Flere white papers »