div - разное отображение в браузерах

div - разное отображение в браузерах

kastoff

Новый участник

Сообщения: 11
Благодарности: 2

Делаю сайт, верстка на div, не могу понять почему в ослике и опере отображается нормально, в firefox выпадают блоки. Помогите советом, просмотреть можно oneline.kz

код странички

Цитата:

<div id="main_box">

<div id="header_headline"><a href="/index.php" title="На первую"><img border="0" src="{THEME}/lol/oneline_1.png"></a></div>

<div id="header_subline"><a href="/index.php" class="min">первая</a> . <a href="/1/" class="min">новости</a> . <a href="/2/" class="min">главное</a> . <a href="/3/" class="min">бизнес</a> . <a href="/4/" class="min">в мире</a> . <a href="/5/" class="min">проишествия</a> . <a href="/6/" class="min">общество</a> . <a href="/7/" class="min">культура</a> . <a href="/8/" class="min">спорт</a> . <a href="/9/" class="min">автоновости</a> . <a href="/10/" class="min">блоги</a>{banner_top}
</div>

<div id="txt_line"><img border="0" src="{THEME}/lol/sob.png"></div>



<div id="spalte_links">
<div id="box_readme">
<div id="m001"><img src="{THEME}/lol/m001.gif" alt="01" width="50" height="109" border="0" /></div>
<div id="readme">
<p>{custom category="1" template="news" aviable="global" from="2" limit="6" cache="no"}</p>
<p class="readmetxt"> | <span class=in><a href="http:/index.php">Index</a></span> | « на первую</p>
</div>
</div>
</div>



<div id="spalte_rechts">
<div id="box_gpc_production">
<div id="m003"><img src="{THEME}/lol/m002.gif" alt="03" width="50" height="109" /></div>
<div id="production">
{custom category="2" template="newsfull" aviable="main" from="0" limit="1" cache="no"}
{custom category="2" template="news1" aviable="main" from="1" limit="3" cache="no"}
</div></div></div>

<div id="spalte_rechts">
<div id="txt_gpc_glavnoe"><img src="{THEME}/lol/txt_glavnoe.png" alt="тема номера" width="530" height="13" /></div>
<div id="box_gpc_production">
<div id="m003"><img src="{THEME}/lol/m003.gif" alt="03" width="50" height="109" /></div>
<div id="production1">
{custom category="3,4,5,6" template="03_biss" aviable="main" from="0" limit="4" cache="no"}
</div></div></div>



<div id="txt_line"><img border="0" src="{THEME}/lol/sport.png"></div>
<div id="spalte_links">
<div id="box_readme">
<div id="readme1">
{custom category="8" template="sport" aviable="main" from="1" limit="5" cache="no"}
</div>
</div>
</div>

<div id="spalte_rechts">
<div id="box_gpc_production">
<div id="production">
{custom category="8" template="newsfull" aviable="main" from="0" limit="1" cache="no"}
</div></div></div>



<div id="txt_line"><img border="0" src="{THEME}/lol/auto.png"></div>
<div id="spalte_links">
<div id="box_readme">
<div id="readme1">
{custom category="9" template="sport" aviable="main" from="1" limit="5" cache="no"}
</div>
</div>
</div>

<div id="spalte_rechts">
<div id="box_gpc_production">
<div id="production">
{custom category="9" template="newsfull" aviable="main" from="0" limit="1" cache="no"}
</div></div></div>

</div>

CSS

Цитата:

body {font-family: Verdana, Arial, Helvetica, sans-serif; margin-top: 0px; font-size: 10px; line-height: 15px;}

ul {
list-style-type: none;
margin-top: 0px;
margin-left: 0px;
text-indent: 0px;
padding-left: 0px;
}

div#main_box {
margin-left: 65px;
margin-right: 65px;
width: 850px;
}

div#header_headline {
width: 850px;
height: 104px;
border: 0px;
}

div#header_subline {
width: 850px;
height: 131px;
clear: both;
}

div#header_box1 {
height: 104px;
width: 850px;
}

div#txt_line {
width: 850px;
height: 47px;
}

div#spalte_links {
float: left;
width: 310px;
}

div#box_readme {
width: 310px;
}

div#m001 {
float: left;
height: 109px;
width: 50px;
margin-top: 19px;
}

div#readme {
width: 260px;
margin-top: 15px;
float: right; /* text-align: justify; */
}

div#readme1 {

margin-top: 15px;
float: right; /* text-align: justify; */
}

div#txt_categories {
width: 310px;
height: 13px;
clear: both;
padding-top: 30px;
}

div#box_categories {
width: 310px;
float: right;
}

div#txt_archives {
width: 310px;
height: 13px;
clear: both;
padding-top: 30px;
}

div#box_archives {
width: 310px;
float: right;
}

div#txt_imprint {
width: 310px;
height: 13px;
clear: both;
padding-top: 30px;
}

div#box_imprint {
width: 310px;
float: right;
}

div#imprint {
width: 220px;
margin-top: 15px;
float: right;
}

div#logo {
float: left;
height: 109px;
width: 50px;
margin-top: 19px;
}

div#archives {
width: 260px;
margin-top: 15px;
float: right;
}

div#categories {
width: 260px;
margin-top: 15px;
float: right;
}

div#spalte_rechts {
width: 530px;
float: right;
}

div#box_projection {
width: 530px;
}

div#m002 {
float: left;
height: 109px;
width: 50px;
margin-top: 19px;
}

div#projection {
width: 480px;
height: 230px;
float: right;
margin-top: 19px;
}

div#txt_gpc_production {
width: 530px;
height: 13px;
padding-top: 30px;
clear: both;
}

div#txt_gpc_glavnoe {
width: 530px;
height: 13px;
padding-top: 20px;
clear: both;
}

div#box_gpc_production {
width: 530px;
float: right;
}

div#m003 {
float: left;
height: 109px;
width: 50px;
margin-top: 19px;
}

div#production {
width: 480px;
margin-top: 17px;
float: right;
}
div#production_1 {
width: 530px;
margin-top: 17px;
float: right;
}
div#production1 {
width: 480px;
margin-top: 17px;
float: right;
}
div#production2 {
width: 480px;
margin-top: 3px;
float: right;
}

div#production3 {
margin-top: 3px;

}

div#txt_affiliates {
width: 530px;
height: 13px;
padding-top: 30px;
clear: both;
}

div#box_affiliates {
width: 530px;
float: right;
}

div#m004 {
float: left;
height: 109px;
width: 50px;
margin-top: 19px;
}

div#affiliates {
width: 440px;
margin-top: 17px;
float: right;
}

div#txt_connected {
width: 530px;
height: 13px;
padding-top: 30px;
clear: both;
}

div#box_connected {
width: 530px;
float: right;
}

div#connected {
width: 440px;
margin-top: 17px;
float: right;
}

div#txt_contact {
width: 530px;
height: 13px;
padding-top: 30px;
clear: both;
}

div#box_contact {
width: 530px;
float: right;
margin-bottom: 30px;
}

div#contact {
width: 440px;
margin-top: 17px;
float: right;
}

div#readmetxt {
margin-top: 0px;
margin-bottom: 25px;
}

div.postings {
margin-top: 0px;
margin-bottom: 25px;
}

h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
font-weight: bold;
color: #3B303F;
margin-top: 0px;
}

h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
font-weight: bold;
color: #3B303F;
margin-top: 0px;
margin-bottom: 15px;
}
/* Îòîáðàæåíèå çàãîëîâêà íîâîñòè */
.in {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; font-weight: bold; color: #FF007E; margin-top: 0px; margin-bottom: 0px;}
.in a:active, .in a:visited, .in a:link { color: #FF007E; text-decoration: none;}
.in a:hover {color: #3B303F; text-decoration: none;}

.min {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; font-weight: bold; color: #3B303F; margin-top: 0px; margin-bottom: 0px;}
.min a:active, .min a:visited, .min a:link { color: #3B303F; text-decoration: none;}
.min a:hover {color: #FF007E; text-decoration: none;}

.stextf {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; font-weight: bold; color: #3B303F; margin-top: 0px; margin-bottom: 0px;}
.stextf a:active, .stextf a:visited, .stextf a:link { color: #3B303F; text-decoration: none;}
.stextf a:hover {color: #FF007E; text-decoration: none;}

.stext {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; line-height: 15px; color: #777777; margin-top: 0px; margin-bottom: 0px;}
.stext a:active, .stext a:visited, .stext a:link { color: #777777; text-decoration: none;}
.stext a:hover {color: #FF007E; text-decoration: none;}

.glav {FONT-WEIGHT: bold; color: #222222; FONT-SIZE: 10px; text-decoration: none; padding-left: 10px; margin-top: 0px; margin-bottom: 0px;}
.glav a:active, .glav a:visited, .glav a:link { color: #222222; text-decoration: none;}
.glav a:hover {color: #ffffff; text-decoration: none;}
.alignleft {float: left;}
.alignright {float: right; color: #cccccc; FONT-SIZE: 10px; padding-right: 10px; azimuth:}

h3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; font-weight: bold; color: #3B303F; margin-top: 0px; margin-bottom: 0px;}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
color: #3B303F;
margin-top: 0px;
}
.fulltxt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 15px;
color: #3B303F;

}

span.marker1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
color: #ffffff;
background-color: #d7d7d7;
}

span.marker2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 15px;
color: #ffffff;
background-color: #3B303F;
}

input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 480px;
background-color: #FFFFFF;
color: #3B303F;
border-top: 1px #3B303F solid;
border-right: 1px #3B303F solid;
border-bottom: 1px #3B303F solid;
border-left: 1px #3B303F solid;
margin-bottom: 5px;
}

textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 480px; height: 140px;
background-color: #FFFFFF;
color: #3B303F;
border-top: 1px #3B303F solid;
border-right: 1px #3B303F solid;
border-bottom: 1px #3B303F solid;
border-left: 1px #3B303F solid;
margin-bottom: 5px;
}

input.search {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 220px;
background-color: #FFFFFF;
color: #3B303F;
border-top: 1px #3B303F solid;
border-right: 1px #3B303F solid;
border-bottom: 1px #3B303F solid;
border-left: 1px #3B303F solid;
margin-bottom: 5px;
}

select {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 220px;
background-color: #FFFFFF;
color: #3B303F;
border-top: 1px #3B303F solid;
border-right: 1px #3B303F solid;
border-bottom: 1px #3B303F solid;
border-left: 1px #3B303F solid;
margin-bottom: 5px;
}
.quote{font: 11px/15px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 30px;
padding-left: 15px;
border-left: 3px solid #FF007E; color:#666666;

}
input.contact {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 480px;
background-color: #FFFFFF;
color: #3B303F;
border-top: 1px #3B303F solid;
border-right: 1px #3B303F solid;
border-bottom: 1px #3B303F solid;
border-left: 1px #3B303F solid;
margin-bottom: 5px;
}

textarea.contact {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
width: 480px;
background-color: #FFFFFF;
color: #3B303F;
border-top: 1px #3B303F solid;
border-right: 1px #3B303F solid;
border-bottom: 1px #3B303F solid;
border-left: 1px #3B303F solid;
margin-bottom: 5px;
}

A:link {
color: #3B303F;
text-decoration: none;
}
A:visited {
color: #3B303F;
text-decoration: none;
}
A:active {
color: #3B303F;
text-decoration: none;
}
A:hover {
color: #3B303F;
text-decoration: underline;
}

a.m1:link {
color: #3B303F;
text-decoration: underline;
}
a.m1:visited {
color: #C1C1C1;
text-decoration: none;
}
a.m1:active {
color: #C1C1C1;
text-decoration: none;
}
a.m1:hover {
color: #ffffff;
background-color: #3B303F;
text-decoration: none;
}

a.news:link {
color: #3B303F;
text-decoration: underline;
}
a.news:visited {
color: #C1C1C1;
text-decoration: none;
}
a.news:active {
color: #C1C1C1;
text-decoration: none;
}
a.news:hover {
color: #ffffff;
background-color: #3B303F;
text-decoration: none;
}

a.head:link {
border: 0px;
text-decoration: none;
}
a.head:visited {
border: 0px;
text-decoration: none;
}
a.head:active {
border: 0px;
text-decoration: none;
}
a.head:hover {
border: 0px;
text-decoration: none;
}

/* ==================== Êàëåíäàðü */

.weekday-active-v {
color: #4b73d4;
}
.day-active-v {
color: #FF007E;
}
.calendar {

color: #303030;
font-family: verdana;
font-size: 10px;

}
.calendar td, th {
font-family: verdana;
text-decoration: none;
/* - */
padding-left: 10px;
padding-right: 4px;
padding-top: 3px;
padding-bottom: 4px;
/* - */
}
.weekday {
color: #FF007E;
font-family: verdana;
}
.weekday-active {
color: #FF007E;
font-family: verdana;
}
.day-active {
color: #FF007E;
font-family: verdana;
}
.day-active a, .weekday-active a, .day-active-v a, .weekday-active-v a {
text-decoration: underline;
}
.monthlink {
color: #5078d6;
text-decoration: none;
}

/* êîììåíòàðèè */
.bord {
border: 1px; border-color: #000000; border-style: solid;
}
.bordbot {
border-bottom: 1px; border-bottom-color: #000000; border-bottom-style: solid;
}
.comm {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; line-height: 15px; color: #777777; padding-left: 10px ; margin-top: 0px; margin-bottom: 0px;}
.comm10{
padding: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; line-height: 15px; color: #333333;}

.404 {
font-size: 30px;
font-weight: bold;
}

выручайте, что не так?

Отправлено: 20:32, 27-04-2008

bruder

Старожил

Сообщения: 313
Благодарности: 46

Профиль | Отправить PM | Цитировать

структура запутанна и если вы даете id, то они должны быть однозначны и не повторятся, в противном случае используйте классы. А в каком месте выпадают блоки, не вижу разницы?

Последний раз редактировалось bruder, 27-04-2008 в 21:52.

Отправлено: 21:30, 27-04-2008 | #2

Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля.

stone_wings

Пользователь

Сообщения: 53
Благодарности: 1

Профиль | Отправить PM | Цитировать

Цитата kastoff:

div#txt_line »

Как по мне интересная форма записи дива.. =/ Я так не делаю, и не советую.. А если нужно стиль во стиле (так сказать див в диве) то как сказал bruder, действительно лучше через классы... Т.е. другими словами выглядит это так:
#name_id {}
#name_id .name_class {}
После чего..
<div id='name_id'>
<div class='name_class'></div>
</div>

PS: Не люблю я дивы, особенно в них {position:absolute;}....

-------
Не знаешь, спрашуй...
Знаешь, доказуй...

Отправлено: 23:31, 30-04-2008 | #3