Я пытаюсь преобразовать то, что раньше было вкладками на основе таблицы.Похоже, что макет работает, за исключением IE7 + 9 (не пробовал 8), когда вы изменяете размер окна и сужаете его, после чего он перемещает их ниже, вместо того чтобы держать их все в одной строке и отображать полосу прокрутки.В ff9 он отлично работает.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
/******************************************
User Control Panel
******************************************/
.userCtrlPanel{
float:right;
}
/******************************************
Navbar
*******************************************/
.navbar{
clear:both;
}
.navbar ul{
list-style:none;
float:right;
margin:0px;
}
.navbar ul li{
float:left;
/*border:1px green solid;*/
padding-left:15px;
}
ul.navbar li a{
text-decoration:none;
}
/*Current Tab */
.currentTab{
background-image:url(StandardTabCurrentRight.gif);
/*border:1px solid red;*/
background-position:right;
background-repeat:no-repeat;
padding-right:12px;
padding-top:2px;
/*color:#fff;*/
}
.currentTabLeft{
background-image:url(StandardTabCurrentLeft.gif);
background-repeat:no-repeat;
/*border:1px solid blue;*/
}
.currentTabRight{
background-image: url(StandardTabCurrentBackground.gif);
/* border:1px solid purple;*/
}
/*Non-current tab*/
.nonCurrentTab{
background-image:url(StandardTabNonCurrentRight.gif);
/*border:1px solid red;*/
background-position:right;
background-repeat:no-repeat;
padding-right:12px;
padding-top:2px;
/*color:#AAAAAA;*/
}
.nonCurrentTab:hover{
color:blue;
}
.nonCurrentTabLeft{
background-image:url(StandardTabNonCurrentLeft.gif);
background-repeat:no-repeat;
/*border:1px solid blue;*/
}
.nonCurrentTabRight{
background-image:url(StandardTabNonCurrentBackground.gif);
/* border:1px solid purple;*/
}
/*Horizontal Ruler*/
.headerHR {
height:8px;
background-image:url(ParentTabBase.gif);
clear:right;
}
</style>
</head>
<body>
<div class="userCtrlPanel">
USERNAME
</div>
<!--Tabs -->
<div class="navbar">
<ul>
<li class="currentTabLeft">
<div class="currentTabRight">
<a href="#" class="currentTab">Home</a>
</div>
</li>
<li class="nonCurrentTabLeft">
<div class="nonCurrentTabRight">
<a href="#" class="nonCurrentTab">Reports</a>
</div>
</li>
<li class="nonCurrentTabLeft">
<div class="nonCurrentTabRight">
<a href="#" class="nonCurrentTab">Admin</a>
</div>
</li>
</ul>
</div>
<div class="headerHR"></div>
</body>
</html>
или рабочая копия здесь http://pastehtml.com/view/bl5bgt5le.html