Avatar billede nissen2630 Novice
27. september 2009 - 11:04 Der er 15 kommentarer og
1 løsning

<DIV> virker kun i FF

Har en kalender hvor der er en div til visning af indholdet for den pågældene dag driller.

Vist her:
http://nissensupport.dk/billeder/index.html

Øverste billede er fra FF og nederste dække over diverse Browsere.

Her oprettes DIV'en på den pågældene dag :

$events[intval($row_event->day)] .= '</div><h3><div class="desc">'.$row_event->eventContent.'</div></h3></li>';


CSS kommer her :


* {
    /* old-style reset here :) */
    border: 0px;
    padding: 0px;
}
body {
    font-family: Helvetica;
    background: white;
    text-align: center;
    background-attachment:fixed;
    background: url(../../img/body.png) fixed repeat-x;
}
body h1 {
    padding-top: 20px;
    font-size: 26px;
    color: #335;
}
table {
    border-collapse: separate;
    border: 1px solid #9DABCE;
    border-width: 0px 0px 1px 1px;
    margin: 10px auto;
    font-size: 20px;
}
td, th {
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    background: url(../img/cells_50.png);
    color: #444;
    /*position: relative;*/
}
td{
background-position: 150px 0px;
}
th{
background-position: 150px 0px;
    height: 30px;
    font-weight: bold;
    font-size: 14px;
}
td:hover, th:hover {
    background-position: 150px -50px;
    color: #222;
vertical-align: middle;
text-align: center;
}
td.date_has_event_today {
    background-position: 0px 0px;
    color: white;
}

td.date_has_event_today:hover {
    background-position: 0px -50px;
vertical-align: middle;
text-align: center;
}

td.date_has_event {
    background-position: 100px 0px;
    color: white;
   
}
td.date_has_event:hover {
    background-position: 100px -50px;
vertical-align: middle;
text-align: center;
}
td.padding {
    background: url(../img/calpad.jpg);

}
td.today {
    background-position: 50px 0px;
    color: white;
}

td.today:hover {
    background-position: 50px -50px;
vertical-align: middle;
text-align: center;
}

.events {
    position: relative;
}
.events ul {
    text-align: left;
    overflow : hidden;
    position: absolute;
    display: none;
    z-index: 1;
    padding: 15px;
    background: #E7ECF2 url(../img/popup.png) no-repeat;
    color: white;
    border: 1px solid white;
    font-size: 15px;
    width: 200px;
   
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    -border-radius: 3px;
    list-style: none;
    color: #444444;
    -webkit-box-shadow: 0px 8px 8px #333;
}

.events li {
    padding-bottom: 5px;
}

.events li span {
    display: block;
    font-size: 12px;
    text-align: justify;
    color: #555;
    z-index: 5;
}

.events li span.title {
    font-weight: bold;
    color: #222;
    z-index:5;
}

.events li div {
    display: block;
    font-size: 12px;
    text-align: justify;
    color: #555;
    z-index: 5;
}

.events li div.title {
    display: block;
    font-weight: bold;
    color: #222;
   
    z-index:5;
}

.events li div.desc {
clear: both;
    display: block;
    font-weight: bold;
    color: #222;
    z-index:1;
}
th a{
text-decoration:none;
font-size:120%;
font-weight:bold;
color: #000;
outline-width:0;
}
Avatar billede nissen2630 Novice
27. september 2009 - 11:05 #1
Må hellere lige tilføje at der er sat den korrekte DOCTYPE i alle filer :-)
Avatar billede erikjacobsen Ekspert
27. september 2009 - 11:15 #2
Kan vi ikke bare få et link til siden?
Avatar billede nissen2630 Novice
27. september 2009 - 11:29 #3
Klokken er ikke så mange endnu.Er sgu ikke rigtig vågen :-)

Linket kommer da her:
http://nissensupport.dk/gadevang/kalender.php
Avatar billede zips Juniormester
27. september 2009 - 11:38 #4
Der er da noget at rydde op i http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fnissensupport.dk%2Fgadevang%2Fkalender.php

En include side må ikke indeholde doctype og start/slut body samt html, det ser ud til det er denne fejl du laver.
Avatar billede erikjacobsen Ekspert
27. september 2009 - 11:39 #5
Ja - få validator.w3.org til at holde mund, og valider også dit CSS. Så kommer du bare tilbage, når det er i orden.
Avatar billede nissen2630 Novice
27. september 2009 - 11:41 #6
Ups kendte ikke lige den side til test... Kan godt se at der lige er lidt vi skal have kigget på... :-)
Avatar billede olebole Juniormester
27. september 2009 - 12:21 #7
<ole>

- og det skal lige siges, at 4-5 DTD'er i ét og samme dokument ikke er 4-5 gange bedre en én DTD  ;o)

Når du includer et dokument, må dette ikke indeholde DTD, HTML-, HEAD- eller BODY-tags ... kun de elementer, der skal reelt skal bruges.

En anden test, som du bør kende: Prøv at vælge View -> Source i din browser og se, hvilken kode den egentlig modtager

/mvh
</bole>
Avatar billede olebole Juniormester
27. september 2009 - 12:26 #8
Din PHP-opsætning kræver:

<?php

?>

- hvorfor du ikke kan bruge:

<?=$variabel?>

- når du printer en variabel. Drfor finde du dette i din resulterende kode:

<a href="<?=$_SERVER['PHP_SELF']?>?time=<?=$previous_year?>" title="<?=$previous_year_text?>">&laquo;&laquo;</a>

- som naturligvis ikke virker.

Husk i øvrigt også, at et tfoot element skrives i toppen af en tabel ... ikke i bunden  ;o)
Avatar billede nissen2630 Novice
27. september 2009 - 14:27 #9
Tja..Copy/Paste fra nettet er ikke altid noget hit.

De fleste fejl er rettet så nu virker det delvist :-)
Avatar billede olebole Juniormester
27. september 2009 - 15:30 #10
Problemet, når du bruger libraries som jQuery, er, at man ikke kan se, hvad der sker - med mindre man gider sidde og tygge sig gennem oceaner af kode.

Hvordan ser markup koden ud til popup-elementet - og hvordan ser CSS'en for det ud?

Husk i øvrigt stadigvæk, at tfoot skal indsættes i begyndelsen af tabellen - lige efter thead:


<table>
<thead>
    ... ... ...
</thead>
<tfoot>
    ... ... ...
</tfoot>
<tbody>
    ... det egentlige indhold ...
</tbody>
</table>

Avatar billede nissen2630 Novice
27. september 2009 - 15:59 #11
Nu er tfoot flyttet til sin rette plads :-)


CSS'en er den div er beskrevet i mit spørgsmål.

Koden som styre popup div'en

$(function () {
    $('.date_has_event').each(function () {
        // options
        var distance = 10;
        var time =50;
        var hideDelay = 50;

        var hideDelayTimer = null;

        // tracker
        var beingShown = false;
        var shown = false;

        var trigger = $(this);
        var popup = $('.events ul', this).css('opacity', 0);
   
       
        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function () {
            // stops the hide event if we move from the trigger to the popup element
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // don't trigger the animation again if we're being shown, or already visible
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;

                // reset position of popup box
                popup.css({
                    top: -2,
                    left: -76,
                    display: 'block' // brings the popup back in to view
                })

                // (we're using chaining on the popup) now animate it's opacity and position
                .animate({
                    bottom: '+=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    // once the animation is complete, set the tracker variables
                    beingShown = false;
                    shown = true;
                });
            }
        }).mouseout(function () {
            // reset the timer if we get fired again - avoids double animations
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // store the timer so that it can be cleared in the mouseover if required
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                popup.animate({
                    bottom: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    // once the animate is complete, set the tracker variables
                    shown = false;
                    // hide the popup entirely after the effect (opacity alone doesn't do the job)
                    popup.css('display', 'none');
                });
            }, hideDelay);
        });
    });
});
Avatar billede olebole Juniormester
27. september 2009 - 16:11 #12
Problemet, når du bruger libraries som jQuery, er, at man ikke kan se, hvad der sker - med mindre man gider sidde og tygge sig gennem oceaner af kode.

Hvordan ser markup koden ud til popup-elementet?
Avatar billede nissen2630 Novice
27. september 2009 - 16:17 #13
Hvordan ser markup koden ud til popup-elementet?

Er skisme ikke med på hvad det er du vil se.
Avatar billede nissen2630 Novice
29. september 2009 - 15:40 #14
olebole og zips... Smid et svar...
Tak for et par gode triks.

Finder en anden løsning på den <DIV> når jeg får tid....
Avatar billede zips Juniormester
03. oktober 2009 - 17:29 #15
Her er et svar :-)
Avatar billede nissen2630 Novice
03. oktober 2009 - 18:13 #16
olebole....Gider du smide et svar så jeg kan få lukket :-)

I skal have tak for hjælpen alle 3.
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester