IE Hacks in Navigation: CSSMenu - Horizontal

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
dlpirl

IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

I need an IE hack for my version of Navigation: CSSMenu - Horizontal so that children are not offset 40px to the right.  The problem with the code below --I don't remember where I got it-- is that it indents not only the second level, but the third as well, so that the third level appears underneath the second.

Code: Select all

*:first-child+html #primary-nav li li { 
   margin-left: -40px;
} 
Does anyone have a good IE hack that will correct this problem?  Or can some one point me to a tutorial that will help me understand how to do it?
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by KO »

If it's IE6 then...
* html #primary-nav li li { yourstyles }

affects only IE6.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by Dr.CSS »

The code you have is IE7 specific only...

*:first-child+html
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

Thanks for the IE 6 code, but if I can get IE 7 right I'll be happy. So far I can't make sense out of it.  Look at thegatewaybenicia.org in IE 7 and see what happens on the menu at Resources -> Books. That's what I am trying to correct. Both * html #primary-nav li li {mystyles } and *:first-child+html { mystyles} see to have an effect on IE 7. The best I've been able to do is the way it is now, but its still not right.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by Dr.CSS »

You've been hacked, using 1.2.3, I see nothing in IE6 but the background image, found this in the top of the body, must be in the index.php in the root of site...

A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.A su honestidad y transparencia hay que sumarle su atencion personalizada y su amplia variedad de juegos que ofrece el http://www.felizcasino.es/famosos-casin ... dores.html online.Aber die Black Jack - Regeln kennen ist mit Sicherheit keineswegs gleichbedeutend mit mit Gewinn bringend Black Jack online poker können.Chaque joueur au online casino sur Top poker en ligne reçoit cinq cartes, dans le but de réaliser la meilleure combinaison.Le nom du casino provient du mot italien "casa" qui, en italien signifie des "dés".Al pai gow online poker italia si usa un mazzo di 52 carte piu un joker.Aussi, venez découvrir les casino partouche de Keno en ligne, choisis exclusivement pour vous par nos experts pour leurs niveaux de primes et de sécurité.An erster Stelle können nach den Regeln des Black Jack online Spielens bis zu fünf Spieler gemeinsam an einem Spieltisch online poker kastenlos und sich mithilfe einer Chat - Funktion miteinander unterhalten.An erster Stelle können nach den Regeln des Black Jack online Spielens bis zu fünf Spieler gemeinsam an einem Spieltisch online poker kastenlos und sich mithilfe einer Chat - Funktion miteinander unterhalten.An erster Stelle können nach den Regeln des Black Jack online Spielens bis zu fünf Spieler gemeinsam an einem Spieltisch online poker kastenlos und sich mithilfe einer Chat - Funktion miteinander unterhalten.Plus tard, les online casino deviennent très populaire en Europe, ainsi que dans le monde entier.Quelques casino entraînent leurs employés pour trouver les compteurs de cartes, donc il faut faire attention à votre attitude.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Une table limit de casino online Texas Holdem se caractérise par ses deux mises.Debido a que la apuesta total en contra del Dealer era $16, así el online casinos toma una comision de 1.Une table limit de casino online Texas Holdem se caractérise par ses deux mises.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Debido a que la apuesta total en contra del Dealer era $16, así el online casinos toma una comision de 1.Après avoir consulter les règles et la stratégie des jeux divers en ligne, finalement vous pouvez choisir le meilleur casino online pour vous et vous pouvez jouer à un grand nombre de jeux de casino en ligne, très passionnants.Los jugadores de juegos de poker gratis free más debiles pronto van a perder frente a los jugadores sólidos y la mesa se hara corta.Le mot http://www.pokersuperbe.com vient du mot italien casa.En 1990 un autre groupe de joueurs est arrivé aux poker en ligne avec des techniques de comptage de cartes - la MIT Blackjack Team (équipe de Blackjack du MIT).Los jugadores de juegos de poker gratis free más debiles pronto van a perder frente a los jugadores sólidos y la mesa se hara corta.Le mot http://www.pokersuperbe.com vient du mot italien casa.En 1990 un autre groupe de joueurs est arrivé aux poker en ligne avec des techniques de comptage de cartes - la MIT Blackjack Team (équipe de Blackjack du MIT).Los jugadores de juegos de poker gratis free más debiles pronto van a perder frente a los jugadores sólidos y la mesa se hara corta.Le mot http://www.pokersuperbe.com vient du mot italien casa.En 1990 un autre groupe de joueurs est arrivé aux poker en ligne avec des techniques de comptage de cartes - la MIT Blackjack Team (équipe de Blackjack du MIT).Le mot http://www.pokersuperbe.com vient du mot italien casa.Los jugadores de juegos de poker gratis free más debiles pronto van a perder frente a los jugadores sólidos y la mesa se hara corta.Los jugadores de juegos de poker gratis free más debiles pronto van a perder frente a los jugadores sólidos y la mesa se hara corta.

:(
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

Wow. The site looks normal in both IE7 and FF, but when I view source in IE7 I see the code you've posted.  However when I view source in FF I don't see it. I opened the index.php in the root of public_html and I see nothing unusual. What should I look for and how can I fix this? I know I should upgrade out of cmsms 1.2.3, but I need to fix this first, right? Or will the upgrade itself not only prevent new hacks but remove the current one?
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

OK. I got rid of all the hacker files and modifications to my templates in the database. And I've upgraded http://thegatewaybenicia.org to cmsms 1.3.

Now the issue with the 3rd level menu on IE 7 is the same.  Check out 'Resources -> Books. The fly-out should not indent. I haven't looked at it in IE 6 yet, but I expect it may be the same.

Any suggestions on how I can fix this issue?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by Dr.CSS »

Have you looked at it in Firefox, I have a really hard time getting to the second level, you need to combine the menu related CSS like make all the calls thru the primary-nav part because it will over rule any menu ul li calls...
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

Yes, its fine in Firefox. Nothing is indented etc. This is only an IE hack issue. I'll look at the IE css code and see if I can make sense of what you are saying about primary-nav vs.menu ul li calls.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by Dr.CSS »

What ver. of Ff you using because it's not good in mine?...

#menu ul {
  margin: 0;
  padding: 0;
  line-height: normal; 
}

#menu ul li {
  width: 8em;
  display: inline;
  float: left;
  padding-top: 0.8em;
  list-style: none;
  text-align: center;
  border-right: 1px solid #4B3829;
  border-left: 1px solid #4B3829;
  border-bottom: 1px solid #4B3829;
}

#menu ul li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  padding-bottom: 0.9em;
  color: #222;
}

OK here is the problem in Firefox, for mine...

#menuwrapper {
  overflow: hidden;
  background-color: #AE7E5A;
  /*border-bottom: 1px solid #C0C0C0;*/
  width: 100%;
  display: inline;    remove this, not needed
}

And this is pushing the third level to the left in IE7...

*:first-child+html #primary-nav li li {
  margin-left: -40px;
}

This targets IE7 only...

*:first-child+html
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

OK. I made those two changes...

Code: Select all

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
   overflow: hidden; 
   background-color: #AE7E5A;
   /*border-bottom: 1px solid #C0C0C0;*/
   width: 100%;
/*   display: inline; */
}

Code: Select all

/* *:first-child+html  */
#primary-nav li li { 
   margin-left: -40px;
} 
but now it looks worse (IMO) in my FF (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14) --should be the latest as I keep it updated when prompted.

and it looks terrible in IE7. That menuwrapper seems to be needed.

I'll leave it this way just a bit (1-2 hours) or until I get your response (hopefully sooner.)  I don't want to leave it this way.
Last edited by dlpirl on Sat Jun 21, 2008 9:26 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by Dr.CSS »

Sorry I didn't get back till now...

If you need those settings for IE7 then take them out of the other areas and add this...

*:first-child+html #menuwrapper {
  display:inline
}

*:first-child+html #primary-nav li li {
  margin-left: -40px;
}

*:first-child+html #primary-nav li li  li {
  margin-left: 0px;
}
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

Thanks, Mark. The last code bit did what I was looking for --removes the 40px indent on the 2nd child menu items in IE7.  However, I didn't explain that I do need the wrapper code for my Firefox.  Without it, the area on the right side of the menu bar is blank. (It should show text: "The Gateway Benicia" and a key "logo".

What is it now that doesn't look right to you in your Firefox version and IE 6?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by Dr.CSS »

The menuwrapper is set to width:100% so it covers the right side making it 450px or 500px should keep it from hiding in firefox...

It's not that it doesn't look right in my Ff just that you have padding-top in the li for your top level items and padding-bottom in the a which makes the second level a, which is what the hover works from, too far from the top of the li to get the hover to work in my Ff...

The original template wasn't made for drop downs so the menu should have been worked off of primar-nav and nothing in the menu ul li or a...

If you hold the mouse over a link then hold down the button you will see the dotted outline of the link, like on a second level link, it isn't the full height of the li...
dlpirl

Re: IE Hacks in Navigation: CSSMenu - Horizontal

Post by dlpirl »

OK. I had to take a big side trip to get page editing functions of the site back after the hack. Sorry for the delay, Mark. And thanks for your help.

Now that I am looking at it in IE 6, there is a bigger issue than the menu, and that is that the sideBar does not float right as the css says it should and it does in IE7 and Ff.  What's the best way to deal with that?
Locked

Return to “Layout and Design (CSS & HTML)”