Avatar billede davidchristensen Praktikant
11. juni 2013 - 19:45 Der er 7 kommentarer og
1 løsning

To css problemer i IE

Hej eksperter

Jeg har lavet en rimelig simpel hjemmeside til min kæreste - og alt virker fint i Crome og Firefox - men jeg fandt ud af, at i IE9 går det galt; og jeg kan simpelthen ikke regne ud hvad der sker.

Der er to problemer:

1:Skrifttypen, som jeg har valgt at bruge, bliver ikke vist i IE (Det vil sige - den bliver faktisk vist i bunden af siden, hvor der står en lille copyright-ting - men de andre steder virker den ikke.) Jeg kan ikke se hvad jeg gør galt?

2: Dropdownmenuen under 'Series' vil ikke poppe ned i IE - men virker fint alle andre steder.

Er der noget, som IE gør på en særlig måde i forhold til andre browsere? Jeg synes det hele er lidt mystisk..

Min kæreste og jeg har valgt, at vi gerne vil smide 100.- kroner efter den, som kan løse vores problemer - fordi jeg kan simpelthen ikke regne det ud selv :)

Hilsen David
-
Avatar billede claes57 Ekspert
11. juni 2013 - 20:07 #1
link til siden?
Avatar billede davidchristensen Praktikant
11. juni 2013 - 20:25 #2
Ah, ja for pokker - sorry :)

www.karenthordurnielsen.com
Avatar billede davidchristensen Praktikant
12. juni 2013 - 16:57 #3
Er her slet ikke nogen, som kan se hvor det går galt? :)
Avatar billede davidchristensen Praktikant
12. juni 2013 - 18:17 #4
Nu har jeg fået løst det første problem med skrifttypen. Jeg har indsat skriften for næsten hver eneste class i stylesheetet. Før havde jeg kun deffineret skrifttypen for body-tagget - og dét virker åbenbart ikke i IE.

Nu mangler jeg så at få dropdownmenuen til at droppe down. Kan det skyldes, at jeg har sat den ind i hele to tabeller, for at styre dens placering - at den ikke virker i IE?

Jeg synes i det heletaget IE opfører sig lidt mystisk. Der er lissom noget bagvedliggende jeg ikke helt har fattet..
Avatar billede davidchristensen Praktikant
12. juni 2013 - 18:33 #5
For at vise den løsning jeg har fundet til dropdownmenuen, poster jeg den lige her - jeg forstår nemlig ikke helt hvordan det forgår:



Her er HTML'en:

<ul class="dropdown dropdown-horizontal">
                <li><a href="./" class="dir">Frontpage</a></li>
                <li><a href="./">Series</a>
                    <ul>
                        <li><a href="index.php?side=Series-Winter">‘Winter turns every Breath into Clouds of White'</a></li>
                        <li><a href="./">MA., Final Project</a></li>
                        <li><a href="./">BA., Final Project</a></li>
                    </ul>
                </li>
                <li><a href="index.php?side=Profile" class="dir">Profile</a></li>
                <li><a href="index.php?side=Contact" class="dir">Contact</a></li>
   
            </ul>

Her er stylesheetet:

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 1597;
float: left;
}

ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 1599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 1598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

ul.dropdown li a {
    display: block;
    padding-top: 7px;
    padding-right: 28px;
    padding-bottom: 7px;
    padding-left: 0px;
}


/* -- Base style override -- */

ul.dropdown li {
padding: 0;
}


/* -- Base style reinitiate: post-override activities -- */

ul.dropdown li.dir {
padding: 7px 20px 7px 14px;
}

ul.dropdown ul li.dir {
padding-right: 15px;
}


/* -- Custom -- */

ul.dropdown ul a {
font-family: PTSansRegular;
padding: 4px 5px 4px 14px;
width: 151px; /* Especially for IE */
}

ul.dropdown ul a:hover {
background-color: #FFFFFF;
}


/* -- Drop-down open -- */

ul.dropdown li:hover > a.dir {
font-family: PTSansRegular;
background-color: #FFFFFF;
color: #333333;
}

ul.dropdown ul li:hover > a.dir {
background-color: #FFFFFF;
color: #333333;
}

ul.dropdown {
    text-transform: uppercase;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
}

ul.dropdown li {
    padding: 7px 0;
    background-color: #FFFFFF;
    color: #333333;
    line-height: normal;
    }

    ul.dropdown a:link,
    ul.dropdown a:visited { color: #999999; text-decoration: none; font-family: PTSansRegular;}
    ul.dropdown a:hover {
    color: #333333;
    text-decoration: none;
    font-family: PTSansRegular;
}
    ul.dropdown a:active { color: #333333; font-family: PTSansRegular;}

    /* -- level mark -- */

    ul.dropdown ul {
    font-family: PTSansRegular;
    width: 190px;
    background-color: #FFFFFF;
    color: #999999;
    font-size: 14px;
    text-transform: none;
    border-top-width: 0px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: none;
    border-bottom-color: #EAEAEA;
    border-left-color: #EAEAEA;
    border-right-color: #EAEAEA;
    }

        ul.dropdown ul li {
        font-family: PTSansRegular;
        color: #333333;
        filter: none;
        }

        ul.dropdown ul li.hover,
        ul.dropdown ul li:hover {
        background-color: #FFFFFF;
        }

        ul.dropdown ul a:link { color: #999999; text-decoration: none; font-family: PTSansRegular;}
        ul.dropdown ul a:visited { color: #999999; font-family: PTSansRegular;}
        ul.dropdown ul a:hover { color: #333333; text-decoration: none;font-family: PTSansRegular; }
        ul.dropdown ul a:active { color: #333333; }font-family: PTSansRegular;


/* -- Supporting class `dir` -- */

ul.dropdown *.dir {
padding-right: 28px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
Avatar billede davidchristensen Praktikant
12. juni 2013 - 20:20 #6
Når jeg sidder og kigger på csskoden, så er det måske her det går galt?:

ul.dropdown li:hover > ul {
visibility: visible;
}

Hvordan kan man evt. lave en mouse-over-event, som tricker 'visibility'?

Jeg forstår ikke helt hvorfor det ikke virker IE..?
Avatar billede davidchristensen Praktikant
12. juni 2013 - 21:00 #7
Nu har jeg sat den samme kode ind på to forskellige sider - HER http://www.karenthordurnielsen.com/test.html VIRKER DET, men HER http://www.karenthordurnielsen.com virker det IKKE..

Den eneste forskel er, at den er sat ind i en tabel i det sidste link. Men, hvorfor..?

Oh, jeg er ved at rive mig selv skaldet her.. Please hjælp :)
Avatar billede davidchristensen Praktikant
12. juni 2013 - 22:16 #8
Nu har jeg fundet ud af det!

Det var headeren i HTML'en, som gør forskellen.

Hvis den hedder:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Karen Thordur Nielsen | Photographer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="stylessheet.css" rel="stylesheet" type="text/css">

..virker det ikke, men hedder den:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylessheet.css" rel="stylesheet" type="text/css" />

..SÅ virker det, sgu! :D

Øj, jeg havde også lige fået lange boller.. Og så er det sådan en åndsvag ting..

Nåmen, tak herfra :)
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