chromestyle nav/highlight active page IE problem

[Oak]

Hi all!

Thank you for your time!

http://www.capoeiracanal.co.uk/capoe...hool-links.php

If you look at the nav bar in (IE6) you will see the active page nav-link highlighted in white (slightly off to the right).

In (FF) you can see the active nav-link again, but the the background white is inside the link how I would like it to be.

You notice that, when hover style, the change of color only covers say 90% of the link, it lines up with the drop down menu. If I were able to stop this rule the highlight would no longer overlap to the left in IE?!

This problem has been posted @ http://www.webforumz.com/css-forum/6...rrent-page.htm

We tried many style changes and IE hacks with no success so far.

So I hand it over to the people that created Chromestyle nav bar.

Thanks

[BLiZZaRD]

okay.. a few things.. first IE6 CSS is horrible, and trying to code for it is improbable at best. IE6 doesn't parse the :hover class.

Second you are calling ID's and classes that don't exist in your stylesheet. class "end" and "chromemenu" for example aren't in the CSS yet you use them in the HTML...

split your CSS rules for ul and li only put display: inline on the li portion. Your 90% hover problem is because you have adaptive menus (meaning the hit area stretches to fit the text inside) and you have the whole ul set to 100%.

If I get some time today I will try to clean up your CSS and get it to work for you, but you can work on that while I am busy

In the end you don't need CSS hacks for IE, and using them is silly, as it will cause headaches later when new rules are patched into it and your hacks cease to work. Make it work got gen 4 browsers and make it degrade to the lower ones.

I will see what I can do for you in a few hours.

[Oak]

Hey

Thats very helpful! I am going threw the CSS & HTML and will correct what I can.

Thank you for offering to tidy up my CSS!

[Oak]

Well I had a look at the div id chromemenu, on the Dynamic Drive website, and as far as I can see my code it is how it should be, but I don't know much!

THis is taken from DR free script.

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
</ul>
</div>

<!--1st drop down menu --> 
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
</div>


<!--2nd drop down menu --> 
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

The list (<ul>) above makes up the menu bar itself, and should be assigned a unique ID (ie: "chromemenu"). This ID is then passed to the JavaScript function "startchrome()", at the end of the menu.
http://www.dynamicdrive.com/dynamici...rome/index.htm

[Oak]

Your 90% hover problem is because you have adaptive menus (meaning the hit area stretches to fit the text inside) and you have the whole ul set to 100%.

hmm, am I supposed to change the percent to 750px? or say give each li width in px ?

[Oak]

split your CSS rules for ul and li only put display: inline on the li portion.

Is this what you mean?

	}
.chromestyle ul {
}
.chromestyle li{
display: inline;
}
.chromestyle ul a{
color: #fcfefe ;
padding: 5px 18px;
margin: 0;
text-decoration: none;
border-right: 1px solid #8F9191 ; /*THEME CHANGE HERE*/
}
.chromestyle li a{
color: #fcfefe ;
padding: 5px 18px;
margin: 0;
text-decoration: none;
border-right: 1px solid #8F9191 ; /*THEME CHANGE HERE*/
}
.chromestyle li a:hover{
    background: #EAEAE8 url("button/button6_end.gif") center center repeat-x;
}
.chromestyle ul a:hover{
    background: #EAEAE8 url("button/button6_end.gif") center center repeat-x;
	}
.chromestyle ul a[rel]:after{ /*HTML to indicate drop down link*/
content: "";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}
.chromestyle li a[rel]:after{ /*HTML to indicate drop down link*/
content: "";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/

[BLiZZaRD]

Close.

.chromestyle ul {
}
.chromestyle li{
display: inline;
}

This part. the basic standard definitions of the UL and the LI. after that if they are going to share the same attributes you can leave them together (depending on the attributes/elements you can even drop li calls and just use UL, or vise versa).

My apologies for not getting back to this, I will try to do so today.

[Oak]

Close.
This part.

Sorry, do you mean this

 	<!--//  
.chromestyle ul {
}
.chromestyle li{
display: inline;
}
//-->

My apologies for not getting back to this, I will try to do so today.

You are a gent!