PDA

View Full Version : dd dropdown tabs menu css conflict with internet explorer



Lorenabisio
09-05-2013, 08:31 PM
1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem:

Hello!

I am working on a seminary´s web design and I have been testing it first in Google Chrome, where it works perfectly. I also tested it in Firefox and no problems at all.
The issue showed up when I tested it in Internet explorer (oh no! :eek:)

I am using the dynamic drive drop down tabs menu (bluemenu option with slight changes -http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm-) and the whole lists mess up in Internet Explorer, I tried almost everything but I just don´t get where the conflict is.

The url is: www.estudiovzb.com/sitb/index.html

Any help will be highly appreciated!!

Lorena

jscheuer1
09-06-2013, 04:20 AM
The menu's a tags are inheriting width from the estudiovzb.com/sitb/estilos.css file (line #351):


li.categorias a, a:visited, a:active {
list-style: none;
width:850px;
text-decoration:none;
color:#000;

}

Which should be:


li.categorias a, li.categorias a:visited, li.categorias a:active {
list-style: none;
width:850px;
text-decoration:none;
color:#000;

}

And when that's corrected they will inherit width from (line #192):


li.linksFooterFlecha a, a:visited, a:active {
list-style: none;
width:180px;
text-decoration:none;
color:#999;

}

Which should be:


li.linksFooterFlecha a, li.linksFooterFlecha a:visited, li.linksFooterFlecha a:active {
list-style: none;
width:180px;
text-decoration:none;
color:#999;

}

And then from (line#141):


ul.linksFooter a:active, a:visited{
float:left;
width:200px;
font-family:Calibri, "Arial Narrow", "Trebuchet MS", Verdana;
font-size:12px;
color:#999;
line-height:1.5em;
list-style-type:none;
text-decoration:none;
}

Which should be:


ul.linksFooter a:active, ul.linksFooter a:visited{
float:left;
width:200px;
font-family:Calibri, "Arial Narrow", "Trebuchet MS", Verdana;
font-size:12px;
color:#999;
line-height:1.5em;
list-style-type:none;
text-decoration:none;
}

Make these changes using a text only editor like NotePad.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Lorenabisio
09-06-2013, 11:45 AM
Hey John! You are a genious!! Now I learned the right way to call css for <ul> and <li> Thank you very much!!

I have just made a $10 donation to your paypal account to show my appreciation :)

jscheuer1
09-06-2013, 01:23 PM
Thanks!

Well technically that last one should be:


ul.linksFooter a:visited, ul.linksFooter a:active{

The order of link states is important, they should be:

link
visited
hover
active

However, not all are required. Of the ones used, they must still be in that order.

Lorenabisio
09-07-2013, 12:50 PM
Excellent! I will apply that order now onwards.