[CSS] links niet klikbaar in IE6 - Softwareontwikkeling

donderdag 20 maart 2008 17:46

Acties:

Rocket surgeon

Topicstarter

Ik heb een unordered list absoluut gepositioneerd binnen een relatieve div. Deze lijst wordt in de meeste browsers juist gepositioneerd, behalve voor IE6. M.b.v. een apart stylesheet wordt de lijst ook voor IE6 goed gepositioneerd. Maar daar komt mijn probleem; op één of andere manier werken de links in deze lijst in IE6 niet.

Het gaat om de taalkeuze rechtsboven op deze pagina.
Er is ook een kleinere testcase.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl-nl" lang="nl-nl" >
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> Testcase
    </title>
    <link rel="stylesheet" href="../reset.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    
   <!--[if IE 6]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" />
    <![endif]-->
    
  </head>
  <body>
    <div id="header">
      <h1>
        <a href="http://bemaphoutmeel.nl">BEMAP Houtmeel B.V.</a></h1>
      <ul id="taalmenu">
        <li>
          <a href='#'>Link1</a>
        </li>
        <li>
          <a href='#'>Link2</a>
        </li>
      </ul>
    </div>
  </body>
</html>

css (alle browsers)

Cascading Stylesheet:

header
html, body {
    font-family: "Arial";
    font-size: 11px;
    line-height:20px;
  letter-spacing: 1.3px;    
}

body {
  background-color:#666;
}
#header {
position:relative;
  width: 816px;
  height: 80px;
  background: url(../images/header2.png) no-repeat;
  padding-top: 28px;  
}

#header h1 {
  width: 237px;
  padding-top: 20px;  
  height: 40px;
  background: url(../images/logo.gif) no-repeat bottom;
  text-indent: -9999px;
  margin: 0px auto;
}

#header h1 a {
  height: 40px;
  display: block;
  border: 0px;
}

#taalmenu {
  position:absolute;
  right:38px;
  top:7px;
}

#taalmenu a, #taalmenu a:visited, #taalmenu a:active, #taalmenu a:link  {
color: #fff;
text-decoration:none;
border:0;
}

#taalmenu a:hover{
text-decoration:underline;
}

#taalmenu li {
  display: inline;
}

IE6 only

Cascading Stylesheet:

Heeft iemand een idee o/* IEPNGFIX*/
div#header, div#mainnav_wrap, div#content, div#footer { 
  behavior: url(http://bemaphoutmeel.nl/iepngfix.htc); 
}

#taalmenu {
  text-align:right;
  margin-top:-88px;
}

Ik heb moeite hier relevante oplossingen op google/GoT bij te vinden.
Heeft iemand een idee in welke richting ik het moet zoeken?

donderdag 20 maart 2008 17:56

Acties:

DeZzL

Rocket surgeon

Topicstarter

Na de hele dag zoeken kom je de oplossing natuurlijk nét tegen wanneer een topic hebt aangemaakt. Het heeft te maken met de iepngfix die ik gebruik.

In certain situations elements with a transparent PNG background can break links and form elements that they contain (I think it’s caused because even though IE renders the background under the elements, (il)logically the image is placed above it).

Anywho, the solution (that worked for me, anyway) is to make sure that the container with the background is not positioned, and the active elements inside are. See http://www.hrunting.org/csstests/iealpha.html

There may be a way to automatically add an inner container with this script, but it would be very nontrivial.

[ Voor 6% gewijzigd door DeZzL op 20-03-2008 17:56 ]

Reageer