Link-Problem Internet Explorer 7

[Marcus]

Hy!

I posted this message twice this year but didn't find the answer.

========================
We manage the website http://www.itzehoer.de/. The navigation works
fine in almost any browser, except a small problem in the IE7.

The problem is, that in most cases only the text in the navigation
seems to be the link (Fahrzeuge, Unfall, ...) , in rare cases (as it
should be) the whole green row is clickable.

The css is located under http://www.itzehoer.de/source/css/itzehoer.css

We didn't find a solution for this problem. This site describes such a
problem: http://www.1ngo.de/web/IE7-link_area.html
But the workaround does not work for us.
========================

I'm still searching for the problem. Anyone here who can help me?

The sourcecode for this part is:

<div class="leftcolumn">
<div class="menu noindex">
<ul class="ebene1">
<li class="ebene1"><span title="Startseite"
class="ebene1">Startseite</span></li>
<li class="ebene1"><a href="http://edit.itzehoer-
maklerservice.iv.local/aktuelles/veranstaltungen/index.jsp?
csc=obwjhbujpo" title="Veranstaltungen"
class="ebene1">Veranstaltungen</a></li>
<li class="ebene1"><a href="http://edit.itzehoer-
maklerservice.iv.local/vertriebspartner/index.jsp?csc=obwjhbujpo"
title="Vertriebspartner" class="ebene1c">Vertriebspartner</a></li>
<li class="ebene1"><a href="http://edit.itzehoer-
maklerservice.iv.local/kontakt/index.jsp?csc=obwjhbujpo"
title="Kontakt" class="ebene1c">Kontakt</a></li>
<li class="ebene1"><a href="http://edit.itzehoer-
maklerservice.iv.local/produkte/index.jsp?csc=obwjhbujpo"
title="Produkte" class="ebene1c">Produkte</a></li>
<li class="ebene1"><a href="http://edit.itzehoer-
maklerservice.iv.local/die_itzehoer/index.jsp?csc=obwjhbujpo"
title="Die Itzehoer" class="ebene1c">Die Itzehoer</a></li>
<li class="ebene1"><a href="http://edit.itzehoer-
maklerservice.iv.local/mymaklerservice/index.jsp?csc=obwjhbujpo"
title="myMaklerservice" class="ebene1c">myMaklerservice</a></li>
</ul>
</div>
</div>

And the css-part is:

http://www.itzehoer.de/source/css/itzehoer.css

* (line 2)
{
z-index: 1;
font-family: Verdana,Arial,Geneva,Helvetica,sans-serif;
}

div, p, h1, h2, h3, h4, h5, h6, a (line 20)
{
position: relative;
font-size: 13px;
}

a:link, a:visited, a:active (line 29)
{
text-decoration: none;
font-size: 11px;
}

a:hover (line 34)
{
text-decoration: underline;
font-size: 11px;
}

a.ebene1, a.ebene1c, a.ebene1o, span.ebene1, span.ebene1c,
span.ebene1o (line 758)
{
height: 17px;
width: 151px;
margin-top: -1px;
margin-right: -1px;
margin-bottom: 0px;
margin-left: -1px;
display: block;
background-repeat: no-repeat;
background-x-position: 1px;
background-y-position: 1px;
text-decoration: none;
background-image: url(../images/layout/navigation/nav.gif);
color: #f7f7f7;
font-weight: bold;
font-size: 12px;
padding-top: 3px;
padding-left: 18px;
}

a.ebene1c, span.ebene1c, a.ebene1o, span.ebene1o (line 776)
{
background-repeat: no-repeat;
background-x-position: 1px;
background-y-position: 1px;
background-image: url(../images/layout/navigation/navarr.gif);
}

li.ebene1 a, li.ebene2 a, li.ebene3 a (line 943)
{
display: block;
}

a.ebene1c:hover, a.ebene1c:active (line 793)
{
background-x-position: 1px;
background-y-position: -19px;
color: #477311;
text-decoration: none;
}

a.ebene1:active, a.ebene1c:active, a.ebene1o:active, a.ebene1:visited,
a.ebene1c:visited, a.ebene1o:visited, a.ebene1:hover, a.ebene1c:hover,
a.ebene1o:hover (line 805)
{
font-size: 12px;
}

a.ebene1:active, a.ebene1c:active, a.ebene1o:active, a.ebene1:visited,
a.ebene1c:visited, a.ebene1o:visited, a.ebene1:hover, a.ebene1c:hover,
a.ebene1o:hover (line 805)
{
font-size: 12px;
}

I'm hoping that anyone here does know a solution!

Thx in advance!
Marcus

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Mon, 27 Aug 2007 07:32:23 GMT
Marcus scribed:

Hy!

I posted this message twice this year but didn't find the answer.

Perhaps the potential assistants were distracted by the auto-starting Flash
crap.

 

[Martin Jay]

I posted this message twice this year but didn't find the answer.

========================
We manage the website http://www.itzehoer.de/. The navigation works
fine in almost any browser, except a small problem in the IE7.

The problem is, that in most cases only the text in the navigation
seems to be the link (Fahrzeuge, Unfall, ...) , in rare cases (as it
should be) the whole green row is clickable.

The css is located under http://www.itzehoer.de/source/css/itzehoer.css

I think I've figured out what your problem is. It appears to be
located in one of your CSS browser hacks:

/* Other browsers */
/*/*/
..centercolumn
{
margin-right :164px !important;
margin-right :154px;
margin-left :190px;
}
/* */

This needs to be floated left for IE7, and given a left-margin of 0.
Like this:

/* Other browsers */
/*/*/
..centercolumn
{
float: left;
margin-left: 0;
}
/* */

I don't doubt this will break in other browsers, so you'll need
another browser hack so that only IE7 sees these changes.

There's another small problem now: the horizontal scroll bar appears
at the bottom of IE7. You'll need to adjust the '.search' class to
fix that.

 

[Marcus]

Hy!

I tried your suggestion with the following code:

*:first-child+html .centercolumn
{
float :left;
margin-left :0;
}

This is only interpreted by the IE7 and works fine for the navigation.

But now the content is broken. It appears underneath the navigation. I
can't show you this in action.

Can you please give it another try and find me another solution for
this new problem?

Thx in advance!
Marcus