Всем привет!
Ситуация такая: есть примитивнейший ХТМЛ-код, который дает примерно вот такую картинку:
Вроде все просто и наглядно: есть очерченный желтой рамкой блок фиксированной высоты, в нем понизу справа прилеплен абсолютный див с синей рамкой, в котором слева направо уложены плавающие закладки. Вроде все пучком.
К сожалению, при коротком тексте подписи закладка получается слишком маленькая, некрасивая. Пробуем исправить при помощи свойства width="80px" для внутреннего элемента:
Уже получше, но длинная подпись вылезает за края. И это естественно, потому что для таких случаев надо использовать свойство min-width и делать подработку напильником для IE6. Это, собственно, именно то, с чего я начинал и обо что споткнулся. Потому что, как оказалось, в FF при этом ломается выравнивание текста, а в Опере вообще все съезжает к едрене фене:
Потыкать страницу вживую можно вот здесь: http://bfigeiro.googlepages.com/min-width.html, а ее исходный текст выглядит вот так:
| Код |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#top {
position: relative;
height: 80px;
border: 1px solid yellow;
}
#tabs {
position: absolute;
bottom: 0px;
right: 0px;
border: 1px solid blue;;
}
#tabs div {
float: left;
bottom: 0px;
left: 0px;
margin-bottom: 10px;
border: 1px solid red;
}
#tabs div a {
display: block;
min-width: 80px;
text-align: center;
padding: 2px 10px;
}
</style>
<script type="text/javascript" language="javascript">
</script>
</head>
<body>
<div id="top">
<div id="tabs">
<div><a href="">Tab1</a></div>
<div><a href="">Tab2</a></div>
<div><a href="">Internationalization</a></div>
</div>
</div>
<div style="position: relative; clear: both;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean molestie consequat pede. Proin pede. Suspendisse potenti. Fusce a justo nec sem cursus aliquet. Integer egestas viverra sem. Pellentesque erat. Sed et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eget risus a lectus euismod semper. Nullam imperdiet, purus in elementum varius, eros mauris facilisis neque, in pharetra pede mauris sit amet lacus. Integer id leo vel quam suscipit viverra. Vestibulum non tortor non sapien accumsan egestas.
</div>
</body>
</html>
|
Есть у кого-нибудь идеи, как побороть? Глюк хотя и не особо критичный, но досадный. Одного времени сколько схавал, зараза :(
Как обычно, вопрос из разряда "плюсоперспективных" 
|