Chrome CSS Drop Down Menu Offsets with Centered Pages
I decided to try Chrome CSS Menu on a project I'm working on. While I'd love a pure CSS solution, I don't have time to roll my own, and everything I saw relies on fixed width parent elements. The Chrome menu is very easy to drop into your existing CSS html.
The one problem I had was using this menu with a fixed-width, centered page. For example, a 900 pixel wide page, centered:
<style>
div#ie_fix {
text-align:center;
}
div#container {
margin: 0 auto 0 auto;
text-align: left;
width:900px;
position:relative;
}
</style>
<div id="ie_fix">
<div id="container">
***MAIN PAGE GOES HERE***
</div>
</div>
div#ie_fix {
text-align:center;
}
div#container {
margin: 0 auto 0 auto;
text-align: left;
width:900px;
position:relative;
}
</style>
<div id="ie_fix">
<div id="container">
***MAIN PAGE GOES HERE***
</div>
</div>
I really needed that container div to be positioned relative, and that was making the drop down menu offsets off by whatever the left page margin happened to be.
My solution was to change (hack) the chrome.js file to stop spidering up the parent elements when it hit that container div.
Make this:
while (parentEl!=null)
Into this:
while (parentEl!=null && parentEl.id!='container')
Thanks for the solution ;-)
great solution.
thank you very much.