To css problemer i IE

link til siden?

Ah, ja for pokker - sorry :)

www.karenthordurnielsen.com

Er her slet ikke nogen, som kan se hvor det går galt? :)

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..

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;
}

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..?

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 :)

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 :)