Gå til innhold

Css inline internet explorer problem


Anbefalte innlegg

Jeg prøver å lage en vanrett meny med popup i css. Problemet er at internet explorer kun viser denne loddrett.

 

Css koden er:

* {
   padding: 0;
   margin: 0;
   font-family: Arial, sans-serif;
   
 	}
 	
 	body {
   margin: 20px;
   font-size: 12px;
   behavior: url(csshover.htc);
 	}
 	
 	ul {
   list-style: none;
   width: 125px;
   list-style-type: none;
   float: inherit;
   display: inline;

 	}

 	ul a {
   color: #FFF;
   text-decoration: none;
   display: block;
   padding: 5px 5px 5px 10px;
   width: 125px;
   background: #333;
   float: left;
 	}
 	
 	ul a:hover {
   color: #4BD8FF;
   text-decoration: none;
   background: #3C3C3C;
 	}
 	
 	ul li {
   border-bottom: 1px solid #FFF;
   float: left;
   position: relative;
   display: inline;
 	}
 	
 	ul li ul {
   list-style: none;
   position: absolute;
   down: 140px;
   top: 25px;	
   display: none;
   width: 125px;
   border-left: 1px solid #FFF;
 	}
 	
 
 	
 	ul li:hover ul { display: block; }

Html koden er:

<ul>
 	<li><a href="index.html">Home</a></li>
 	<li><a href="about.html">About</a></li>
 	<li><a href="gallery.html">Gallery</a>
   <ul>
   	<li><a href="gallery1.html">Gallery 1</a></li>
   	<li><a href="gallery2.html">Gallery 2</a></li>
   	<li><a href="gallery3.html">Gallery 3</a></li>
   	<li><a href="gallery4.html">Gallery 4</a></li>
   </ul>
 	</li>
 	

Problemet med popup funksjonen i IE er fikset (behavior: url(csshover.htc);), det som er rart er at hvis jeg ikke har en <html> tag i starten av html filen så vises denne vannrett i IE, men hvis det står <html> i starten av filen så blir den loddrett. Jeg har funnet koden på internett, der den egentlig var loddrett, det jeg har gjort for å få den vannrett er å legge til "display: inline;" under ul {..}. Da blir den vannrett i opera men ikke i IE

 

Jeg kan ikke så veldig mye css, så det hadde vært fint med litt hjelp

Lenke til kommentar
Videoannonse
Annonse

Du har ihvertfall glemt å avslutte <ul>.

 

Fungerer det bedre med:

<ul>
 <li><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="gallery.html">Gallery</a>
  <ul>
   <li><a href="gallery1.html">Gallery 1</a></li>
   <li><a href="gallery2.html">Gallery 2</a></li>
   <li><a href="gallery3.html">Gallery 3</a></li>
   <li><a href="gallery4.html">Gallery 4</a></li>
  </ul>
 </li>
</ul>

Lenke til kommentar

<div id="horisontal-meny">
<ul>
   <li id="active"><a href="index.htm">Index / Forsiden</a></li>
   <li><a href="kategori-2.html">Eggs</a></li>
   <li><a href="#">Cheese</a></li>
   <li><a href="#">Vegetables</a></li>
   <li><a href="#">Fruit</a></li>
   </ul>
</div>

 

#horisontal-meny ul {
list-style-type: none; /* Fjerner bullets */
margin: 0;
padding: 0;
text-align: center;
}

/* Tvinger listen til å bli en rett strek meny */
#horisontal-meny ul li { 
display: inline;
}

#horisontal-meny ul li a { 
text-decoration: none; /* Fjerner under-streken */
padding: .2em 1em; /* Sørger for å gjøre enkelte av dem i et egen "boks" i a statment */
color: #fff;
background-color: #036; /* Legg til bakgrunnsfarge for a statment */
} 


/* bakgrunnsfarge for rollover + tekst. */
#horisontal-meny ul li a:hover {
color: #fff;
background-color: #369;
}

/* Aktiv side */

#active a { 
color: #fff; 
background-color: #002142;
text-decoration: none;
}

 

Håper dette er til hjelp.!! :w00t:

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...