Вкладки CSS без полей с использованием изображений

Question

На пользовательских страницах Stack Overflow, где находятся вкладки (статистика, последние, ответы и т. Д.), Вы получаете иллюзию, что вкладки являются расширениями строки, на которой они сидят. Stack Overflow создает этот эффект, определяя чистые границы CSS. Я хочу добиться такого же эффекта, но у меня есть изображения как для вкладок, так и для линии, на которой они сидят.

У меня есть коробка с закругленными углами (белый фон, серый контур). Вкладки расположены сверху, одинаковые цвета. Вкладки имеют закругленные верхние углы и не имеют нижней границы. Вкладки находятся в div перед полем div.

Чтобы достичь вышеупомянутого эффекта, я полагаю, что вкладка должна спуститься и покрыть ту часть границы коробки, где они встречаются. Я выполнил это в Firefox, но в IE вы все еще можете видеть линию границы окна.

Как вы можете настроить это для работы в обоих браузерах?

Вот мой пример, который работает в FF, но не в IE: http://www.mcrackan.com/recipes/csstest-loggedin.htm

[Edit: фиксированный URL]

Answer 1

Я ранее делал что-то подобное, предоставляя «активный» вкладке класс отрицательное нижнее положение, таким образом перемещая его так, чтобы оно его поверх рамки рамки. Может быть, это решение? Например:

<style> 
ul.tabs { 
border-bottom: 1px solid blue; 
height: 20px; 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
    ul.tabs li { 
    float: left; 
    position: relative; 
    bottom: 5px; 
    margin: 0; 
    padding: 0; 
    } 
     ul.tabs li img { 
     float: left; 
     height: 20px; 
     width: 50px; 
     border: none; 
     } 
    ul.tabs li.selected { 
    bottom: -1px; 
    } 
</style> 

<ul class="tabs"> 
    <li><a href=""><img src="tab1.gif" /></a></li> 
    <li class="selected"><a href=""><img src="tab2.gif" /></a></li> 
    <li><a href=""><img src="tab3.gif" /></a></li> 
</ul> 

Answer 2

Может быть sliding doors technique может пригодиться

Этот example делает работу Firefox и IE

Answer 3

Хотя я с тех пор принято прокаткой мой собственный, один из примеров, которые помогли мне больше всего, когда я был первым выяснить язычки CSS был такой:

http://unraveled.com/projects/css_tabs/

Это метод относительного позиционирования обычно подходит для меня лучше всего.

Удачи вам!

Answer 4

Это может быть помощь tab generator.