Menubalk geeft in IE een andere kleur.

Status
Niet open voor verdere reacties.

Killerclown

Gebruiker
Lid geworden
30 dec 2007
Berichten
181
Goeieavond,

De menubalk van mijn website geeft in IE een deel met witte achtergrond. Dit zou grijs moeten zijn. In Firefox en Chrome wordt wel de juiste kleur gegeven.
Heeft iemand een idee hoe ik dit kan oplossen? Ik zit mij suf te zoek en waarschijnlijk is het weer iets kleins waar ik over kijk.
Website: https://www.riddlebox.be

Menubalk in IE
website-IE.jpg

Menubalk in Firefox en Chrome
website-Mozilla-Chrome.jpg

Grtn.
 
Kan je de relevante code hier delen?
Niet iedereen heeft IE.
 
Zeker. Hieronder is de css van de menubalk.

Code:
/*MENU */

/*Remove default settings of a list*/
ul {						/*unordered list*/
  list-style-type: none;	/*type nummering vd lijst*/
  margin: 0;				/*remove space around elements*/
  padding: 0;				/*remove space around elements*/
  overflow: hidden; 		/*no scrollbar when text too long*/
  background-color: #999999; /*background-color of menu*/
 
}

/*List items*/

li {
  float: left;	/*menu begins on leftside*/
  
  
}

/* Style The Dropdown Button .dropbtn */
li a, .dropbtn {
  display: inline-block;
  color: #000000;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
 
  
}


/* Change the background color of the dropdown button when the dropdown content is shown .dropdown:hover .dropbtn*/
li a:hover, .dropdown:hover .dropbtn {
  background-color: #98ca00;
  color: black;  
  padding: 14px 30px;
  background-image: url(../menu2/hatchetman.png);
  background-position: left center;
  background-repeat: no-repeat;
  
}


/* The container <div> - needed to position the dropdown content */

li.dropdown {
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 9px 25px;
  text-decoration: none;
  display: block;
  text-align: left;

  background: #cccccc;
  background-image: url(../menu2/meatcleaver.png);
  background-position: left center;
  background-repeat: no-repeat;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #98ca00}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  
}
 
Probeer eens op regel 155 van new_layout.css bij de class .dropdown cropbtn de style background-color: inherit; te wijzigen in background-color: #999999;

Hopelijk gaat het dan beter?

Verder zou ik mij persoonlijk niet zo druk meer maken om Internet Explorer, deze wordt volgens mij niet meer ondersteund door Microsoft, ze proberen indereen te laten overstappen op Edge. Op onze website gebruikt gelukkig nog maar 4% Internet Explorer en gebruikt het merendeel momenteel Crome (56%), Safari (25%), Edge (6%) en Firefox (4%)
 
@ ariecade: Yes!! Daar zat het dus. Ik zat in de verkeerde CSS te prutsen :)
Bij mij op het werk zweren ze bij IE (raar maar waar). Ik snap ook niet waarom ze daar aan blijven vasthouden.
Nu is het in ieder geval ook in orde voor IE. Voor de laatste aanhangers :p.
De site was eerst niet geconfigureerd voor IE. Ik gebruik IE al jaren niet meer.

Bedankt voor de oplossing!!!
 
@Killerclown: Graag gedaan :thumb:

Dan heb je de komende tijd nog een mooie uitdaging om je collega's te overtuigen dat IE echt niet meer kan ........... :p :D
 
Niet iedereen heeft IE.
Jawel hoor, zelfs in Windows 10 wordt IE nog steeds meegeleverd :D

Bij mij op het werk zweren ze bij IE (raar maar waar)
Met IE 11 is eigenlijk niets mis, het is volledig html5/css3 en voldoet goed aan de w3c standaard. Het wordt ook nog door MS onderhouden. Het vervelende is wel dat steeds meer websites IE niet meer ondersteunen, simpelweg omdat het door weinig mensen wordt gebruikt. Om die reden zal je over moeten stappen naar bijv. Chrome, Firefox of Opera.
 
Jawel hoor, zelfs in Windows 10 wordt IE nog steeds meegeleverd
Nee hoor, want je hebt ook die geen Windows hebben ;)
Dus niet iedereen heeft IE.

Vraagje: wat als het op een mobiel anders lijkt, hoe verwerk je dat dan?
 
Nee hoor, want je hebt ook die geen Windows hebben ;)
Dus niet iedereen heeft IE.

Vraagje: wat als het op een mobiel anders lijkt, hoe verwerk je dat dan?
Dan mis je wat mediaqueries in je CSS :p
 
Werkt alleen als alles op de pagina responsive is.
Code:
<body>
<div class="page">
...responsive content...
</div>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.page {
  width: 100%;
  min-height: 100%;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .page {
    max-width: 720px;
  }
}
@media (min-width: 1200px) {
  .page {
    max-width: 1140px;
  }
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan