Здравствуйте.
Я столкнулся с проблемой верстки карты. При первичном показе страницы, карта правой и нижней границей наезжает на tab-элемент, но при
изменении размеров сраницы карта занимает правильное положение внутри tab-элемента с необходимыми отступами со всех сторон.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="tabber.js"></script> // взят отсюда: http://www.barelyfitz.com/projects/tabber/
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen"> // взят отсюда: http://www.barelyfitz.com/projects/tabber/
<title>Пример ошибки</title>
<script src="http://api-maps.yandex.ru
<script type="text/javascript">
ymaps.ready(init);
function init() {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64], // Москва
zoom: 10
});
}
</script>
</head>
<body>
<div class="tabber" style="position:absolute; left:20px; right:20px; top:0px; bottom:50px">
<div class="tabbertab" title="Tab 1" style="height:100%;">
<div id="map" style="left:10px; right:10px; width:100%; height:100%">
</div>
</div>
</body>
</html>
Причем, если заменить <div id="map" style="left:10px; right:10px; width:100%; height:100%"> на <div style="background-color:red; left:10px; right:10px; width:100%; height:100%"> то красный квадрат сразу отобразится в корректных границах без изменения размеров окна браузера.
Как можно было бы исправить эту проблему? Заранее благодарю за помощь.