I can't believe I'm admitting defeat to this, but I simply must!
I've been following this article - http://www.strictlycss.com/articles/article/48/how-to-center-a-tabbed-horizontal-css-menu
Have copied and pasted line for line the example and downloaded the two GIF's with the preloaded rollovers but whenever I'm viewing it in IE the images are just not aligning!
When the roll-over isn't on the element, the left-most image is corrent, but the right most image is shifted down.
When the roll-over is on the element, the left-most image jumps DOWN! and the right most image jumps down a little bit.
I'm absolutely baffled!
I'm changed the code 'slightly' to increase the size of the roll-over I want, but as you can see it's 99.9% identical to the one of the site:
CSS
HTML
Any ideas what I'm doing wrong?
*edit* - have downloaded the IE hack too, where does it go? CSS or HTML? But looking at that hack, I can't see what it exactly does! Or is that the missing piece!
I've been following this article - http://www.strictlycss.com/articles/article/48/how-to-center-a-tabbed-horizontal-css-menu
Have copied and pasted line for line the example and downloaded the two GIF's with the preloaded rollovers but whenever I'm viewing it in IE the images are just not aligning!
When the roll-over isn't on the element, the left-most image is corrent, but the right most image is shifted down.
When the roll-over is on the element, the left-most image jumps DOWN! and the right most image jumps down a little bit.
I'm absolutely baffled!
I'm changed the code 'slightly' to increase the size of the roll-over I want, but as you can see it's 99.9% identical to the one of the site:
CSS
Code:
#menu {
font-family: Arial, sans-serif;
border-bottom: 10px solid #A0CEF8;
}
#menu ul {
text-align: center;
margin: 0 0 5px 0;
}
#menu li {
display: inline;
}
#menu li a {
padding: 7px 20px 6px 20px;
text-decoration: none;
font-weight: bold;
background: url(images/tabbed-menu-left.gif) no-repeat left top;
color: #FFFFFF;
}
#menu li a:hover {
background: url(images/tabbed-menu-left.gif) no-repeat left bottom;
}
#menu li a span {
padding: 7px 20px 6px 20px;
background: url(images/tabbed-menu-right.gif) no-repeat right top;
}
#menu li a:hover span {
background: url(images/tabbed-menu-right.gif) no-repeat right bottom;
}HTML
Code:
<div id="menu">
<ul>
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>services</span></a></li>
<li><a href="#"><span>showcase</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>contact</span></a></li>
</ul>
</div>*edit* - have downloaded the IE hack too, where does it go? CSS or HTML? But looking at that hack, I can't see what it exactly does! Or is that the missing piece!