Forum Moderators: not2easy
As a side-effect this small contribution to y'all on how to get sliding doors to work cross-browser, while not using floats and centering the menu on the page. It's not fully finished (neither is the real project), so I did this while it was still fresh in my mind.
There's obviously an image needed, so I'll describe it:
It's 2 tabs with both top corners rounded at some 5px radius, with a 3d effect, stacked on under the other.
Each tab is about 400px wide (less will do too) and 80px high, both or contrasting in color.
The hight of the tabs is important to the code the width not as long as it's enough to cover whatever text you'll enter in a "reasonable" font size for the UA.
The radius is kinda important as it needs to clear the text using the padding. The image I had worked reasonable with a 7px padding in the horizontal direction and a 5px padding in the vertical direction (it's optical. The border feels like 2px wide and I'll reuse that weight as a line under the menu.
Instead of floats it uses display:inline. Since padding works significantly different in IE, some serious repositioning had to be done in conditional comments. The trick to get them right I used was to use pastel colors as backgrounds and position them with those instead of trying it with the real images,. It was much easier that way.
Also different: IE adds a space in the <li> after the <a>, while safari and Firefox2 add the space between the <li>, again needs some conditional adjusting of the padding and margins to get a similar look.
As usual IE6 doesn't do hover on anything but a <a> tag, so the <li> can't change it's background on hover in IE6, I've added some graceful degradation there instead of using javascript.
IE6 also had trouble with some transparent png background, so I made a jpg that blended against a white background for it too.
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<style type="text/css">
* {
border:0;
padding:0;
margin:0;
font-family: Verdana, Arial, sans;
}
body {
background-color: #aaa;
padding-top: 10px;
}
#wrapper {
width:770px;
padding:2px;
margin:0 auto 20px auto;
background-color: white;
border-right: 2px black solid;
border-bottom: 2px black solid;
border-top: 1px #666 solid;
border-left: 1px #666 solid;
}
#menu {
text-align: center;
}
#menu ul {
padding: 5px 0 2px 0 ;
border-bottom: solid 2px #333;
}
#menu li {
display: inline;
background:url("/style/header.png") no-repeat 100% -80px;
padding: 5px 9px 2px 0 ;
}
#menu a {
background:url("/style/header.png") no-repeat 0% -80px;
padding: 5px 0 2px 9px;
text-decoration: none;
color:black;
}
#menu li:hover {
background:url("/style/header.png") no-repeat 100% top;
}
#menu li:hover a {
background:url("/style/header.png") no-repeat 0% top;
color:red;
}
#menu #select {
background:url("/style/header.png") no-repeat 100% top;
padding-bottom: 4px;
}
#menu #select a {
background:url("/style/header.png") no-repeat 0% top;
padding-bottom: 4px;
}
#content {
padding-top: 12px;
min-height: 200px;
background:url("/style/background.png") no-repeat top left;
}
#footer {
font-size: 0.8em;
font-style: italic;
border-top: 1px #333 solid;
padding:3px 0 3px 0;
}
</style>
<!--[if IE 6]>
<style type="text/css">
/* fix margin not working against body */
/* fix auto margins not working properly in quirks mode */
body {
padding-bottom: 20px;
text-align: center;
}
#wrapper {
text-align: left;
}
/* fix min-height not working */
/* fix transparent png not workign as background */
#content {
height: 200px;
background: url(/style/background.jpg) no-repeat -5px 0;
}
/* fix <li> expanding due to containing the <a> and becoming to big */
/* fix space inside the <li> instead of between the <li>s */
#menu li {
padding: 0 3px 0 0;
margin-right: 5px;
}
#menu #select {
padding: 0 3px 0 0;
}
/* fix skinny fonts on windows */
#menu a {
font-weight:bold;
}
/* graceful fallback to allow some hover effect */
#menu a:hover {
color:red;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
/* fix margin not working against body */
body {
padding-bottom: 20px;
}
/* fix <li> expanding due to containing the <a> and becoming to big */
/* fix space inside <li> instead of between <li>s */
#menu li {
padding: 0 5px 0 0;
margin-right: 5px;
}
#menu #select {
padding: 0 5px 0 0;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="menu">
<ul>
<li id="select"><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<div id="content">
<p>Ipso lorem</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
This will work on a fluid design just as well, the reasons to have here a 800px wide body had nothing to do with the menu.
If anybody has further enhancements, or reports of browsers not working properly (I've tested it in IE6 (win), IE7 (win), FF2 (mac) and Safari(mac) so far).
I'm most interested in FF3 and opera actually (they would be kinda hard to fix depending on what's wrong with it)
