By soezkan on

Hi folks,

since 30% of all internet users still use the IE6 I have to
configure my CSS that they can also see, when a menu-item
is active.
But I really don't know how to fix this, excuse my saying so, bullshit,
which only doesn't work with IE6!!!

<ul class="links primary-links"><li class="menu-979 active-trail first active"><a href="/preview/?q=node/46" title="About" class="active">About</a></li>
<li class="menu-987"><a href="/preview/?q=node/62" title="Informations">Informations</a></li>
<li class="menu-973"><a href="/preview/?q=node/51" title="Downloads">Downloads</a></li>
<li class="menu-977"><a href="/preview/?q=node/55" title="Contact">Contact</a></li>
<li class="menu-975 last"><a href="/preview/?q=node/53" title="Legal notice">Legal notice</a></li>
</ul>

Though there is a class="active" in my li-list bloody IE6 just ignores it because
it can't interprete class combinations like "menu-979 active-trail first active".

But how in the world can I fix that?

Best,
Soezkan

⋅ Categories: Drupal 6.x

Comments

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Ie 6 can interpret multiple classes in html, but not in css selectors. Can you show us the css that isn't working?

soezkan’s picture

soezkan commented

This is the important part of the CSS which plays a role
in the menu I mentioned above:

/**
 * Primary navigation
 */
ul.primary-links {
	list-style-type: none;
	margin-left:0;
	padding-left:0;
}

ul.primary-links li {
	float:left;
	padding-right:20px;
	padding-left: 20px;
	/*border: 1px solid red;*/
}

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
	text-decoration: none;
	color: #FFFFFF;
	outline: none;
}

ul.primary-links li a:hover, ul.primary-links li a.active {
	color: #FFFFFF;
}

ul.primary-links li {
	background-image: url(images/arrowwhite.gif); 
	background-repeat: no-repeat; 
	background-position: 6px 3px;
	color: #FFFFFF;
}

ul.primary-links li.active {
	background-image: url(images/arrowblack.gif); 
	background-repeat: no-repeat; 
	background-position: 6px 3px;
	color: #000000;
}

ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited {
	color: #FFFFFF;
}

ul.primary-links li a:hover {
	color: #FFFFFF;
}

ul.primary-links li a.active {
	color: #000000;
}
marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

You CSS looks fine, I don't see anything that would not be supported by IE6. Can you point out exactly which CSS rule is ignored by IE6?

soezkan’s picture

soezkan commented

The first one which should be highlighted.
I mean, the arrows are shown but the link text, in this case "About",
remains at its original colour, which is white, but ought to be black:

<li class="menu-979 active-trail first active"><a href="/preview/?q=node/46" title="About" class="active">About</a></li>

The following link is ignored and I don't know how to access a link within a menu-item:

<a href="/preview/?q=node/46" title="About" class="active">About</a>

Thanks
Soezkan

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I suspect that this is a specificity problem: possibly, IE6 treats ul.primary-links li a:link as more specific than ul.primary-links li a.active. Can you try changing the last 3 lines of the css to this:

ul.primary-links li a.active:link {
color: #000000;
}
soezkan’s picture

soezkan commented

Nothing changed, still the same. I even found that when I
do it as you suggested, also Firefox does not highlight the
link anymore.

What is really funny, is that the secondary menu shows the
highlighted links correctly in IE6:

<ul class="menu"><li class="leaf first active-trail"><a href="/holst-pe.de/preview/?q=node/48" title="Get started" class="active">Get started</a></li>
<li class="leaf"><a href="/holst-pe.de/preview/?q=node/50" title="Our area">Our area</a></li>
<li class="leaf"><a href="/holst-pe.de/preview/?q=node/51" title="">Downloads</a></li>
<li class="leaf"><a href="/holst-pe.de/preview/?q=node/55" title="">XXXX</a></li>
<li class="leaf last"><a href="/holst-pe.de/preview/?q=node/53" title="">YYYY</a></li>
</ul>

This active one appears correctly:

<li class="leaf first active-trail"><a href="/holst-pe.de/preview/?q=node/48" title="Get started" class="active">Get started</a></li>

and this is the CSS snippet

.leftsidebar #leftboxes {
	padding: 10px;
	background-color: #f7f7f7; 
	border-width: 1px; 
	border-style: solid; 
	border-color: #e6e6e6;
	margin-bottom: 18px;
}                         

.leftsidebar #leftboxes .leftboxesHead {
	font-size:1.2em;
	font-weight:bold;
	color:#000000;
} 

.leftsidebar #leftboxes ul.menu {
	list-style-type:none;
	margin-left:-6px;
	padding-left:0;
	margin-bottom:0;
	margin-top:9px;
} 

ul li.leaf {
	list-style:none;
	background-image:url(images/arrowblack.gif); 
	background-repeat:no-repeat; 
	background-position: 6px 4px;
	padding-right: 20px;
	padding-left: 20px;
	margin-bottom: 0px;
}

.leftsidebar #leftboxes ul.menu li.leaf {
	list-style:none;
	background-image:url(images/arrowblack.gif); 
	background-repeat:no-repeat; 
	background-position: 6px 4px;
	padding-right: 20px;
	padding-left: 20px;
	margin-bottom: 0px;
} 

.leftsidebar #leftboxes ul.menu li.leaf a {
	text-decoration: none;
	color: #333;
	outline: none;
}

.leftsidebar #leftboxes ul.menu li.leaf a:visited {
	color: #333;
}

.leftsidebar #leftboxes ul.menu li.leaf a:focus {
	color: #333;
}

.leftsidebar #leftboxes ul.menu li.leaf a:hover {
	color: #333;
}

.leftsidebar #leftboxes ul.menu li.leaf a:active {
	color: #333;
}
  
.leftsidebar #leftboxes ul.menu li.leaf a.active{
	color: #000;
	font-weight:bold;
}

.leftsidebar #leftboxes ul.menu li.leaf a.active{
	color: #000;
	font-weight:bold;
}

.leftsidebar #leftboxes ul.menu li.collapsed {
	list-style:none;
	background-image:url(images/arrowblack.gif); 
	background-repeat:no-repeat; 
	background-position: 5px 7px;
	padding-right: 20px;
	padding-left: 20px;
	margin-bottom: 0px;
} 

.leftsidebar #leftboxes ul.menu li.collapsed a {
	text-decoration: none;
	color: #333;
	outline: none;
}

.leftsidebar #leftboxes ul.menu li.collapsed a:visited {
	color: #333;
  }

.leftsidebar #leftboxes ul.menu li.collapsed a:focus {
	color: #333;
  }

.leftsidebar #leftboxes ul.menu li.collapsed a:hover {
	color: #333;
  }

.leftsidebar #leftboxes ul.menu li.collapsed a:active {
	color: #333;
  }
  
.leftsidebar #leftboxes ul.menu li.collapsed a.active{
	color: #000;
	font-weight:bold;
}

.leftsidebar #leftboxes ul.menu li.collapsed a.active{
	color: #000;
	font-weight:bold;
}

 


.leftsidebar_search #leftboxes {
	padding: 10px;
	background-color: #f7f7f7; 
	border-width: 1px; 
	border-style: solid; 
	border-color: #e6e6e6;
	margin-bottom: 18px;
} 

.leftsidebar_search #leftboxes .leftboxesHead {
	font-size:1.2em;
	font-weight:bold;
	color:#000000;
}

Any other ideas?