Chrome CSS Menu Help needed

[dramaqueen]

I'm working on the chrome css menu script at http://www.atgt.dramatic-design.com/index2.shtml and I'd like to get rid of the trailing divider image after "Contact".

I'm not sure how to do that. Can you assist?

[djr33]

Please link to the script in question.

Seems like you just need to figure out how to make the size of the table smaller (i'm assuming this uses a table)... but no clue without seeing the script. I'm no JS expert, so I dunno if I can help.... we'll see.

[jscheuer1]

Get rid of this:

#chromemenu ul li a[onMouseover]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}

from chromestyle.css

[dramaqueen]

John,

That didn't work. In fact, it didn't change it at all.

I'm also trying to figure out how to center the menu items within the complete menu bar.

[dramaqueen]

The script in question is: http://www.dynamicdrive.com/dynamici...rome/index.htm

It is within a table and I know how to resize the total size of the menu bar. I'm keeping it a % based bar because I want it to look good in all resolution sizes; however I'd like to center the items within the bar (not individual items--those are fine, but rather, all the items as a group).

[jscheuer1]

John,

That didn't work. In fact, it didn't change it at all.

I'm also trying to figure out how to center the menu items within the complete menu bar.

Actually, it did change it but not in IE. But, I had misunderstood your question, so that didn't address your concern anyway. This menu is very tricky and may not be able to be centered in the fashion you describe, although it might, I'd try adding a dummy (empty) item at the left side and setting its width with style.

[.alias.]

Some body else was asking similar things not long ago read throught these posts they will no doubt help you

http://www.dynamicdrive.com/forums/s...ead.php?t=8522

[jscheuer1]

Some body else was asking similar things not long ago read throught these posts they will no doubt help you

http://www.dynamicdrive.com/forums/s...ead.php?t=8522

Chris, as far as I can tell, nothing was resolved in the above thread, so why bother posting it?

[.alias.]

I thought in the end you came up with a solution, but reading it again i was wrong you just said that it could be done but it wasn't the best way as it would vary on screen resolution so you didnt actual show him how to do it

[jscheuer1]

Ah well, this one's a slightly different question and unless there is a simpler more elegant solution that I've missed, this is a good as it gets, replace your existing chromemenu division with this code:

<script type="text/javascript">
function cliswidth(){
var w=0
var crhomelis=document.getElementById('chromemenu').getElementsByTagName('li');
for (var i_tem = 1; i_tem < crhomelis.length; i_tem++)
w+=crhomelis[i_tem].firstChild.offsetWidth
return w;
}

function addDummy(){
if (!document.getElementById('dum')){
var dummy=document.createElement('li');
dummy.innerHTML='<a href="javascript:void(0);">&nbsp;</a>'
dummy.id='dum'
document.getElementById('mnu').insertBefore(dummy, document.getElementById('mnu').firstChild);
}
document.getElementById('dum').firstChild.style.width=Math.floor(document.getElementById('chromemenu').offsetWidth/2-cliswidth()/2)-18+'px';
}

if ( typeof window.addEventListener != "undefined" ) {
    window.addEventListener( "load", addDummy, false );
    window.addEventListener( "resize", function(){setTimeout('addDummy();',20)}, false );
}
</script>
<div id="chromemenu">
<ul id="mnu">
<!--[if IE]>
<li><a href="javascript:void(0);" style="width:expression(document.getElementById('chromemenu').offsetWidth/2-cliswidth()/2-18+'px');">&nbsp;</a></li>
<![endif]-->
<li><a href="index.shtml">Home</a></li>
<li><a href="specials.shtml">Specials</a></li>
<li><a href="store.shtml" onMouseover="cssdropdown.dropit(this,event,' dropmenu1')">Store</a></li>
<li><a href="about.shtml">About Us</a></li>
<li><a href="testimonials.shtml">Testimonials</a></li>

<li><a href="contact.shtml" onMouseover="cssdropdown.dropit(this,event,' dropmenu2')">Contact</a></li>
</ul>
</div>