We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

[ Solved ] Gah! opened it in IE (dropmenu issue)

    • 26439
    • 104 Posts
    scraf Reply #1, 18 years, 1 month ago
    // EDIT: Solution found, see second post

    Was progressing quite nicely up the learning curve of the dropmenu snippet, when I remembered that things "should" work also in Internet Explorer.

    I have screenshotted the problem, the Firefox version is the one I’m aiming at.

    http://www.scraf.com/modx_css_bug/

    I’m hoping someone can spot this IE bug, as it’s been eluding me.... ( padding, margin?)

    CSS code ( sorry for the verbosity )....

    
.navigation li{ 
  list-style:none;
 }
.navigation li.here, .nevigation li.here a {
	padding: 4px;
  margin: 6px;
  margin-bottom: 2px;
  margin-top: 2px;
  display: block;
  color: #00267f;
  border: 1px solid #000; 
  background: #FCD116;
}

.navigation ul {
    display: none;
    list-style:none;
}
.navigation li.here ul {
   display: block;
}
.navigation { 
  padding: 0px;
  margin:	0px;
  height: 100%; 
  border:	1px solid #00F; 
}
.navigation a,.navigation a:hover {
  padding: 4px; 
  margin: 6px;
  margin-bottom: 2px;
  margin-top: 2px;
  display: block;
  color: #00267f;
  border: 1px solid #FF0000; 
  background: #FCD116; 
}
.navigation a:hover {
  padding: 4px;
  text-decoration: none; 
  color: #000000; 
  background: #A1C5EC;
  border: 1px solid #000;
}


      • 26439
      • 104 Posts
      scraf Reply #2, 18 years, 1 month ago
      IE doesn’t like padding, set the padding to "0", and declared height.

      Updated css....

      .navigation li{ 
  list-style:none;
 }
.navigation li.here, .nevigation li.here a {
	height: 20px;
	padding: 0px;
  margin: 6px;
  margin-bottom: 2px;
  margin-top: 2px;
  display: block;
  color: #00267f;
  border: 1px solid #000; 
  background: #FCD116;
}

.navigation ul {
    display: none;
    list-style:none;
}
.navigation li.here ul {
   display: block;
}
.navigation { 
  padding: 0px;
  margin:	0px;
  height: 100%; 
  border:	1px solid #00F; 
}
.navigation a,.navigation a:hover {
  height: 20px;
  padding: 0px; 
  margin: 6px;
  margin-bottom: 2px;
  margin-top: 2px;
  display: block;
  color: #00267f;
  border: 1px solid #FF0000; 
  background: #FCD116; 
}
.navigation a:hover {
  height: 20px;
  padding: 0px;
  text-decoration: none; 
  color: #000000; 
  background: #A1C5EC;
  border: 1px solid #000;
}


      with thanks to
      • sottwell Reply #3, 18 years, 1 month ago
        Solution: Outsource the jobs of whoever wrote IE wink (well, I just came from the WindowsPG post laugh )
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org