css - Menu vises ikke korrekt i IE - Udvikleren.dk - Programmering, webdesign og grafik

Tags: ie internet-explorer css

<< < 1 2 > >>

Bruger #17072 @ 14.03.12 12:26

Hej
Jeg har haft held med at lave en drop-down menu på min hjemmeside, men jeg har et lille problem med min menu.
Her er min CSS-fil

CSS kode

 body {
     background-image:url(images/background.gif);
     color: #000000;
     font-family: Arial, Helvetica, sans-serif, Verdana;
     font-size: 12px;
     margin: 0px;
     padding: 0px;
 }
 * {margin: 0px;padding: 0px;}
 .clear{clear:both;}
 #container {
     margin: 0px auto;
     text-align: left;
     width: 780px;
 }
 a {
     color: #000000;
     font-family: Arial, Helvetica, sans-serif, Verdana;
     font-size: 12px;
 }
 /********************** Header ***************************/
 #header {
     background-image:url(images/header.jpg);
     background-repeat:no-repeat;
     width:768px;
     height:262px;
 }
 #menu {
     position:relative;
     background-image:url(images/menu.jpg);
     background-repeat:no-repeat;
     width:768px;
     height:117px;
 }
 #menu ul{
     position:absolute;
     top:30px;
     left:265px;
     margin: 0;
     padding: 0;
     list-style: none;
 
 }
 #menu li{
     padding: 0 0 0 10px;
     display: inline;
     position: relative;
 }
 #menu li ul{
     padding-top: 5px;
     display: none;
     position: absolute;
     top: 30px;
     z-index: 999;
 }
 #menu li:hover ul{
     display: block;
     background-color: #000;
     opacity: 0.5;
     left: auto;
     top: auto;
     right: auto;
     bottom: auto;
 }
 #submenu ul li a, #submenu a:visited {
     text-align: center;
     margin-left: 5px;
     text-decoration: none;
     position: relative;
 }
 
 #menu a{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bolder;
     text-transform: uppercase;
     color: #d8cd8d;
     text-decoration: none;
 }
 #menu a:hover{
     color:#3e3c27;
 }
 h1,h2,h3,h4 {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 18px;
     font-weight: bolder;
     text-transform: uppercase;
     color: #171508;
 }
 h1,h2 {
     position:absolute;
     top:94px;
 }
 h1 {
     left:241px;
 }
 h2 {
     right:75px;
 }
 h3 {
     margin: 15px 0px 0px 30px;
     border-bottom: solid 1px #625d3b;
 }
 h4 {
     margin: 15px 0px 0px 30px;
     font-size:16px;
     border-bottom: solid 1px #625d3b;
 }
 /********************** Main ***************************/
 #main {
     background-image:url(images/main_bg.gif);
     background-repeat: repeat-y;
     display:block;
     width:768px;
     height:auto;
 }
 #content {
     background-image:url(images/content_bg.gif);
     background-repeat: repeat-y;
     width:768px;
 }

I chrome, firefox, safari og opera virker den fint, ved at menuen kommer frem lige under det menupunkt den hører til, men i IE, både 8 og 9 kommer det frem på en ny linje.
Min menu er lavet således:

HTML kode

 <ul>
 <li><a href="index.php">Forside</a></li>
 <li><a href="nyheder.php">Nyheder</a></li>
 <li><a href="om.php">Om os</a></li>
 <li><a href="admins.php">Admins</a></li>
 <li><a href="servers.php">Servere</a>
 <ul>
 <li><a href="addons.php" id="submenu">Addons</a></li>
 <li><a href="stats.php" id="submenu">Stats</a></li>
 </ul>
 </li>
 <li><a href="forum.php">Forum</a></li>
 </ul>

Er der nogen der kan fortælle mig hvad jeg gør forkert?

Indlæg senest redigeret d. 14.03.2012 12:28 af Bruger #17072

13 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 8 karma

Sorter efter stemmer Sorter efter dato

Bruger #17118 @ 14.03.12 12:51

Kan se det er et freetemplets. Men jeg får samme skærmbilled i både firefox og IE 9.

Kan ikke klikke på undermenu.

Kan vi være enig om at det er

#submenu ul li a, #submenu a:visited {
text-align: center;
margin-left: 5px;
text-decoration: none;
position: relative;
}

den som fejler i sub?

margin-left er kun fra start er menu, ikke fra under menu titlen.

På min hjemmeside, starter jeg menuen således:

<ul id="nav">
<li>
<a class="active" href="Hjem">Hjem</a>
</li>

<ul>
<li>
<a class="active" href="undermenu">Undermenu til Hjem</a>
</li>
</ul>
</ul>

.css

CSS kode

 #nav {
     display: block;
     background: transparent url(../images/nav_bg.jpg) repeat-x left top;
     padding: 0;
     margin: 0;
     height: 34px;
     z-index: 100;
       position: relative;
     width: 100%;
     list-style: none;
     text-align: center;
 }
 
 #nav li {
     text-align: center;
     display: block;
     float: left;
     height: 34px;
     margin: 0;
     padding: 0;
       position: relative;
     background: url(../images/nav_sep.jpg) no-repeat 0 0;
 }
 
 #nav li a {
     float: left;
     height: 25px;
     padding: 0 15px;
     padding-top: 9px;
     color: #ccc;
     font-size: 0.9em;
     margin-left: 2px;
 }
 
 #nav li a:hover {
     background: url(../images/nav_over.jpg) repeat-x 0 0;
     color: white;
 }
 
 #nav li a.active {
     background: url(../images/nav_over.jpg) repeat-x 0 0;
       color: white;
     font-weight: bold;
 }
 
 #nav li.sep {
     background: url(../images/nav_sep.jpg) no-repeat 0 0;
     width: 2px;
     height: 34px;
     float: left;
 }
 
 #nav li.left {
     background: url(../images/nav_l.jpg) no-repeat left top;
     width: 36px;
     height: 34px;
     float: left;
 }
 
 #nav li.right {
     background: url(../images/nav_r.jpg) no-repeat right top;
     width: 36px;
     height: 34px;
     float: right;
 }
 
 #nav li ul {
     display: none;
     width: 170px;
     position: absolute;
     top: 34px;
     left: 0;
     margin: 0;
     padding: 0;
     /* Transparent background for drop down menu */
       background:transparent filter: alpha(opacity=90);
       filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
       opacity:0.90;
 }
 
 #nav li ul li {
       border: 0;
       height: 25px;
       color: #99FF00;
       background: #111;
       margin: 0;
 }
 
 #nav li ul li a {
     display: block;
       height: 25px;
       width: 140px;
       padding: 0 20px 0 15px;
       border-top: 1px #333 solid;
       white-space: nowrap;
       background: #000;
       color: white;
       text-align: left;
       line-height: 25px;
       font-weight: normal;
 }
 
 #nav li ul li a:hover {
       color: #99FF00;
       background: #111;
 }
 
 /* Hacks for Opera to fix the drop down menu problem */
 html:first-child #nav li a {
     float: none;
     height: 34px;
     padding-top: 0;
     line-height: 34px;
     display: block;
 }
 html:first-child #nav li ul li a {
       height: 25px;
       line-height: 25px;
 }

.html (menu)

HTML kode

 <ul id="nav">
                 <li class="left">&nbsp;</li>
                 <li><a class="active" href="index.html" title="Home page">Home</a></li>
                 <li>
 
                     <a href="#" title="">Drop Down example <img src="images/nav_bullet.jpg" alt="" /></a>
                     <!-- submenu -->
                     <ul>
                        <li><a href="#" title="">Our shcool</a></li>
                        <li><a href="#" title="">Location</a></li>
                        <li><a href="#" title="">Staff</a></li>
                     </ul>
 
                 </li> <!-- /end Drop Down Example -->
                 <li>
                     <a href="#" title="">Topics <img src="images/nav_bullet.jpg" alt="" /></a>
                     <!-- submenu -->
                     <ul>
                        <li><a href="#" title="">Math</a></li>
                        <li><a href="#" title="">English</a></li>
 
                        <li><a href="#" title="">Art &amp; Music</a></li>
                        <li><a href="#" title="">Science &amp; Tech</a></li>
                     </ul>
                 </li>
                 <li><a href="index.html" title="">Teachers Space</a></li>
 
                 <li><a href="index.html" title="">Parents Space</a></li>
                 <li><a href="contact.php" title="Contact Us">Contact Us</a></li>
                 <li class="sep">&nbsp;</li>
                 <li class="right">&nbsp;</li>
             </ul>

Prøv evt. Virker i alle browsere ved mig.

Indlæg senest redigeret d. 14.03.2012 13:01 af Bruger #17118

Bruger #17015 @ 14.03.12 13:18

614

Læs denne artikel:
http://css-tricks.com/reduced-test-cases/

Når du har læst den, kan du vise os din opdaterede kode hvis du ikke selv har løst problemet undervejs. :-)

Bruger #17118 @ 14.03.12 12:30

Lav en ie.css ?




Bare et eksempel.

Bruger #955 @ 14.03.12 12:35

1.624

Lav en ie.css ?




Bare et eksempel.

Det kræver stadig, at han hvad der skal stå i de CSS filer.

Kenneth, har du siden liggende et sted hvor vi kan se den?

Bruger #17072 @ 14.03.12 12:38

152

Ja, den ligger på mit webhotel, men den er ikke opdateret til at bruge menuen, men den ligger til testing her: Testing-Server

Bruger #17072 @ 14.03.12 12:59

152

Ja, havde ikke testet i nyeste version af firefox, i version 10 virkede det, men i den nye version 11 virker det ikke

Jo vi kan godt blive enige om det stykke CSS du har kopieret der er til min submenu. Hvad skal jeg så gøre med margin-left?

Bruger #17118 @ 14.03.12 13:01

Tjek forrige svar. Håber det kan hjælpe dig.

Bruger #17072 @ 14.03.12 13:23

152

Har kigget lidt på din CSS-fil og fandt lidt ud af at jeg muligvis skal bruge dette:

CSS kode

 67. #nav li ul {
 68.     display: none;
 69.     width: 170px;
 70.     position: absolute;
 71.     top: 34px;
 72.     left: 0;
 73.     margin: 0;
 74.     padding: 0;
 75.     /* Transparent background for drop down menu */
 76.       background:transparent filter: alpha(opacity=90);
 77.       filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
 78.       opacity:0.90;
 79. }

Har jeg ret i det, eller ligger jeg helt ved siden af? Prøvede det nemlig og det virker stadig ikke

Bruger #17118 @ 14.03.12 13:27

Hvorfor ikke prøve det frem ?

Ved mig fader den ned fra den toptitle jeg har musen over. Men ja.

Bruger #17072 @ 14.03.12 18:08

152

Har nu forsøgt at lave ændringer, så min CSS kommer til at ligne din mest muligt, uden at jeg ødelægger det fine design jeg arbejder med:

CSS kode

 #menu {
     position:relative;
     background-image:url(images/menu.jpg);
     background-repeat:no-repeat;
     width:768px;
     height:117px;
     display: block;
     padding: 0;
     margin: 0;
     z-index: 100;
 }
 #menu ul{
     position:absolute;
     top:30px;
     left:265px;
     margin: 0;
     padding: 0;
     list-style: none;
 
 }
 #menu li{
     padding: 0 0 0 10px;
     display: inline;
     position: relative;
     margin: 0;
 }
 #menu li ul{
     padding-top: 5px;
     display: none;
     position: absolute;
     top: 30px;
     left: 0;
     padding: 0;
     margin: 0;
     z-index: 999;
 }
 #menu li:hover ul{
     display: block;
     background-color: #000;
     opacity: 0.5;
     left: auto;
     top: auto;
     right: auto;
     bottom: auto;
 }
 #submenu ul li a, #submenu a:visited {
     text-align: center;
     margin: 0;
     text-decoration: none;
     position: relative;
     left: 0;
     padding: 0;
 }
 
 #menu a{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bolder;
     text-transform: uppercase;
     color: #d8cd8d;
     text-decoration: none;
 }
 #menu a:hover{
     color:#3e3c27;
 }

Men det virker stadigvæk ikke i IE og Firefox 11

<< < 1 2 > >>

Menu vises ikke korrekt i IE

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler