0
У меня это ниже html на моей странице. Мне нужно chart_div прямо под классом zoom_controls. Нижеприведенный код работает на IE и Chrome, но на Firefox, chart_div движется прямо на странице. Любые идеи, что может быть причиной этого?отображение divs друг на друга в firefox
<div id="tab10">
<div id="container">
<table>
<tr>
<td>
<div class="zoom_controls"> <a class="profile" style="width: 100px;" id="volume_d" href="#" data-chart="line" data-range="1m">Volume</a>
<a class="profile" style="width: 100px;" id="Total" href="#" data-chart="line" data-range="1m">Total</a>
</div>
<div id="chart_div" style="width:700px; height:300px;"></div>
</td>
</tr>
</table>
</div>
</div>
это мой CSS файл:
<style type="text/css">
.zoom_controls a {
display: block;
width: 80px;
height: 16px;
line-height: 16px;
margin-top: 3px;
float: left;
text-decoration: none;
color: black !important;
text-align: center;
border: 1px #CCC inset;
/* Should look a lot like the original :) */
background-image: linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
background-image: -o-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
background-image: -moz-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
background-image: -ms-linear-gradient(bottom, rgb(214, 214, 214) 34%, rgb(232, 232, 232) 100%);
}
.zoom_controls a.active {
background-color: #a6d1ff;
background-image: linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
background-image: -o-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(118, 175, 201) 34%, rgb(166, 209, 255) 100%);
}
body {
font: 10px arial;
text-align:center;
width: 100%;
background: #F9F8F6;
margin-top:0;
border:0;
}
#top {
background: white;
margin-top:0;
}
table {
border-collapse:collapse;
border: 0;
margin:0 auto;
}
table caption {
text-align: left;
color: #00006E;
font-weight:bold;
font: 15px arial;
}
table td {
border: 0px;
}
#header {
text-align: center;
font: 12px sans serif;
}
#logo {
float: left;
}
hr {
background-color: #00006E;
border: 0 none;
color: #00006E;
height: 4px;
}
.tabs li {
list-style:none;
display:inline;
}
.tabs a {
padding:5px 10px;
display:inline-block;
background:#C0C0C0;
color:#000;
text-decoration:none;
text-align: center;
font: 18px sans serif;
font-weight: bold;
}
.tabs a.active {
background:#6E6EFF;
color:#fff;
}
h1 {
font: 25px sans serif;
font-weight: bold;
}
</style>
http://jsfiddle.net/isherwood/QphhM/1/
У вас есть классы CSS в то, что можно было бы делать что-нибудь, и мы не могли бы вы ноу размещать таблицы стилей для нас? – TND
@Stuart, я просто разместил файл css, спасибо – user1471980
Я бы сказал, что это поведение потому, что у вас нет ни одного css для самого контейнера 'zoom_control', а для' 'elem в нем у вас есть' float: left; '- define 'zoom_control' -' display: block; позиция: относительная; 'и' chart_div' - 'clear: both;' – Elen