Проблемы с версткой в Мозиле

okunev2 · April 7, 2008

Собственно при сужение окна Мозилы, происходит это, исчезают линии таблицы местами, как то размыто:

С чем это связано, и как этот баг убить?

Storm · April 7, 2008

А код можно посмотреть?

Диагностикой по фотографии не занимаемся.

okunev2 · April 7, 2008

<table class="prod">
 <tr>
 <td style='border: 1px solid #000000;' width='186'><b>Фотография</b></td>
 <td style='border: 1px solid #000000;' width='192'><b>Наименование</b></td>
 <td style='border: 1px solid #000000;' width='179'><b>Цена
за упаковку (руб.)</b></td>
 <td style='border: 1px solid #000000;' width='159'><b>Цена
за штуку (руб.)</b></td>
 <td style='border: 1px solid #000000;' width='173'><b>Количество
в упаковке</b></td>
 </tr>
 <tr>
 <td class='catalog1' width='186' rowspan="2"><div class="color1">$pikcha</div></td>
 <td class='catalog1' width='192' height="65">$title</td>
 <td class='catalog1' width='179'>$bodytext1</td>
 <td class='catalog1' width='159'>$bodytext2</td>
 <td class='catalog1' width='173'>$bodytext3</td>
 </tr>
 <tr>
 <td style='border: 1px solid #000000;' valign="bottom" class="bn" height="18"><div class="color2"><a href="modules.php?name=$module_name&in=pic&id=$pid">ПОДРОБНЕЕ >></a></div></td>
 <td style='border: 1px solid #000000;' valign="bottom" class="bn" colspan="3"><div class="color2"><a href="modules.php?name=Contacts">ЗАКАЗАТЬ >></a></div></td>
 </tr>



</table>

css:

.prod td .color2 {
 background: #616150;
 padding: 3px 0;
 color: white;
}

.prod td .color2 a {
 display: block;
 text-decoration: none;
 color: white;
}

.prod .bn {
 height: 18px !important;
}

.prod .page {
 height: 24px;
 font-weight: bold;
 text-align: right;
}

.prod .page a {
 font-weight: bold;
 color: black;
 text-decoration: none;
}

.prod .page a:hover {
 text-decoration:underline;
}

okunev2 · April 7, 2008

Балин, ни кто не сталкивался что-ли

ZoNT · April 7, 2008

всем некогда верстать страничку

Emm · April 7, 2008

лучше бы сразу ссылку дал, ко всему этому безобразию.

okunev2 · April 7, 2008

не думаю что эта проблема в глобальной переписи верстки!

дайте дельный совет, плиз!?

ZoNT · April 7, 2008

Крутой класс у таблицы!

ZoNT · April 7, 2008

У тебя вс? в укоде такое:

valign="bottom" class="bn" height="18">

Или это ты на форум так выложил???

Emm · April 7, 2008

это такая специальная шняжина))))

okunev2 · April 8, 2008

Всегда поражался, на русских форумах только стебутса, а не помогают решить какие-то вопросы, если Emm вы профи подскажите, что и как!

ZoNT, как правильней поступить, как к таблице правильно применить стиль, чтобы этого не было?

на форум я выложил так valign="bottom" class="bn" ето в коде php, можно и так valign='bottom' class='bn'

yopopt · April 8, 2008

Всегда поражался, на русских форумах только стебутса,

Увы, но тут вы правы. Чаще всего так вс? и происходит.

Вы бы лучше выложили уже сформированный код, тот что в браузере. А так приходится гадать...

okunev2 · April 8, 2008

спасибо, yopopt, что понимаете суть дела.

вот этот код генерируется на страницу:

 <!-- Основной контент -->
 <div id="content">
<h1>КАТАЛОГ ТОВАРОВ</h1>
<div class="article">

<a href="index.php"><b>Главная</b></a> >> <b>Блоки электроустановочные</b> 



<p><table class="prod2"><table class="prod">
<tr>
 <td style='border: 1px solid #000000;' width='186'><b>Фотография</b></td>
 <td style='border: 1px solid #000000;' width='192'><b>Наименование</b></td>
 <td style='border: 1px solid #000000;' width='179'><b>Цена
за упаковку (руб.)</b></td>
 <td style='border: 1px solid #000000;' width='159'><b>Цена
за штуку (руб.)</b></td>
 <td style='border: 1px solid #000000;' width='173'><b>Количество
в упаковке</b></td>

</tr>
<tr><td valign='top' style='margin: 0px; padding: 0px;'>

 <tr>
 <td class='catalog1' width='186' rowspan="2"><div class="color1"><a href="InImage/1207633805-1205937543-vkl2.jpg" rel="thumbnail" title="Товар2"><img src="InImage/thumb/1207633805-1205937543-vkl2.jpg" alt="Товар2"></a></div></td>
 <td class='catalog1' width='192' height="65"><font class='catalog_font1'>Товар2</font></td>
 <td class='catalog1' width='179'><font class='catalog_font1'>111</font></td>
 <td class='catalog1' width='159'><font class='catalog_font1'>111</font></td>
 <td class='catalog1' width='173'><font class='catalog_font1'>1111</font></td>

 </tr>
 <tr>
 <td style='border: 1px solid #000000;' valign="bottom" class="bn" height="18"><div class="color2"><a href="modules.php?name=Catalog&in=pic&id=43">ПОДРОБНЕЕ >></a></div></td>
 <td style='border: 1px solid #000000;' valign="bottom" class="bn" colspan="3"><div class="color2"><a href="modules.php?name=Contacts">ЗАКАЗАТЬ >></a></div></td>
 </tr>


</td></tr><tr><td valign='top' style='margin: 0px; padding: 0px;'>

 <tr>

 <td class='catalog1' width='186' rowspan="2"><div class="color1"><a href="InImage/1207633565-1205937543-vkl2.jpg" rel="thumbnail" title="Товар1"><img src="InImage/thumb/1207633565-1205937543-vkl2.jpg" alt="Товар1"></a></div></td>
 <td class='catalog1' width='192' height="65"><font class='catalog_font1'>Товар1</font></td>
 <td class='catalog1' width='179'><font class='catalog_font1'>1111</font></td>
 <td class='catalog1' width='159'><font class='catalog_font1'>111</font></td>
 <td class='catalog1' width='173'><font class='catalog_font1'>111</font></td>
 </tr>
 <tr>

 <td style='border: 1px solid #000000;' valign="bottom" class="bn" height="18"><div class="color2"><a href="modules.php?name=Catalog&in=pic&id=42">ПОДРОБНЕЕ >></a></div></td>
 <td style='border: 1px solid #000000;' valign="bottom" class="bn" colspan="3"><div class="color2"><a href="modules.php?name=Contacts">ЗАКАЗАТЬ >></a></div></td>
 </tr>


</td></tr></table></p></div>


 <div class="clear"></div>
 <div class="empty"></div>

 <div class="clear"></div>
 </div>
 <!-- / Основная часть -->
 </div>
 <!-- / Основная часть -->

yopopt · April 8, 2008

Не хватает ещ? каких-то стилей... Может сможете выложить готовую страничку целиком?

И ещ? одно: зачем Вы запихиваете таблицу в параграф?

okunev2 · April 8, 2008

параграф, это стиль, полоса справа с отступом.

вот весь код css:

html {
 color: #000;
 background: #FFF;
}

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {
 margin: 0;
 padding: 0;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

fieldset,img {
 border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
 font-style: normal;
 font-weight: normal;
}

li {
 list-style: none;
}

caption,th {
 text-align: left;
}

h1,h2,h3,h4,h5,h6 {
 font-size: 100%;
 font-weight: normal;
}

q:before, q:after {
 content: '';
}

abbr,acronym {
 border: 0;
 font-variant: normal;
}

sup {
 vertical-align: text-top;
}

sub {
 vertical-align: text-bottom;
}

input,textarea,select {
 font-family: inherit;
 font-size: inherit;
 font-weight: inherit;
}

legend {
 color:#000;
}

/********* blue - green - violet - rosy - yellow - orange *********/

/********* Общие установки *********/
* {
 font-family: tahoma;
 font-size: 12px
}

.clear {
 clear: both;
 font-size: 0px;
 width: 100%;
}

html, body {
 width: 100%;
 height: 100%;
 behavior: url('csshover.htc');
}

a {}

a:hover {
 text-decoration: none;
}

a.pager:hover {
 text-decoration: underline;
 font: bold;
}

a.pager {
 text-decoration: none;
 font: bold;
}

p {
 margin: 14px 0;
 padding-right: 10px;
 font-size: 12px;
 color: black;
 line-height: 1.4;
 text-align:justify;
}

p em {
 color: #064A92;
}

/*************************** Заголовки ***************************/
h1 {
 display: block;
 font-size: 16px;
 color: #65CFE9;
 font-weight: bold;
 margin-bottom: 30px
}

h2 {
 width: 283px;
 height: 27px;
 background: url(images/h2.jpg) no-repeat;
 font-size: 16px;
 color: white;
 text-align: center;
 font-weight: bold;
 line-height: 1.6;
}
/*************************** / Заголовки ***************************/

#all {
 position: relative;
 min-height: 100%;
 margin: 0 auto;
 min-width: 1000px;
 min-height: 100%;
 width: expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':'100%');
 text-align: left;
 background: url(images/main_bg.jpg) repeat-x 0 370px;
}

* html #all {
 height: 100%
}

/*************************** Шапка ***************************/
#header_ {
 width: 100%;
 height: 370px;
 background: url(images/header_.jpg) repeat-x;
}

#header {
 position: relative;
 width: 100%;
 height: 370px;
 background: url(images/header.jpg) no-repeat left;
}


#search_header {
 position: absolute;
 width: 230px;
 height: 21px;
 margin: 30px 0 0 30px;
 text-align: left;
}

input.search_area {
 width: 175px;
 height: 21px;
 padding-bottom: 2px;
 padding-top: 2px;
 border-left: 1px solid #bebdbd;
 border-right: 1px solid #bebdbd;
 border-top: 1px solid #bebdbd;
 border-bottom: 1px solid #bebdbd;
 margin: 0 0 0 0;
 color:#bebdbd;
 font: 8pt Tahoma, Verdana;
 vertical-align: middle;
 text-align: left;
}

input.searh_bottom {
 border-left: 0px solid #000;
 border-right: 0px solid #000;
 border-top: 0px solid #000;
 border-bottom: 0px solid #000;
 cursor: hand;
 vertical-align: middle;
}

#logo {
 position: absolute;
 width: 230px;
 height: 62px;
 margin: 80px 0 0 30px;
 background: url(images/logo.jpg) no-repeat;
}

#logo a {
 width: 230px;
 height: 62px;
 display: block;
 cursor: hand;
}

#tel2 {
 position: relative;
 margin: 3px 0 0 27px;
 color: #7B7970;
 width: 210px;
 height: 31px;
 font: 15pt Tahoma, Verdana;
}

#tel {
 position: absolute;
 width: 210px;
 height: 31px;
 margin: 239px 0 0 44px;
 background: url(images/tel.jpg) no-repeat;
}



#nav {
 position: absolute;
 margin: 23px 0 0 306px;
}

#nav li {
 float: left;
 width: 20px;
 height: 20px;
 margin-right: 16px;
}

#nav li a {
 width: 20px;
 height: 20px;
 display: block;
}

#nav li.first {
 background: url(images/nav1.gif) no-repeat;
}

#nav li.second {
 background: url(images/nav2.gif) no-repeat;
}

#nav li.third {
 background: url(images/nav3.gif) no-repeat;
}

#menu {
 position: absolute;
 margin: 108px 0 0 300px;
 overflow: hidden;
}

#menu li {
 float: left;
 height: 23px;
 padding: 0 5px;
 margin-left: -1px;
 border-left: 1px solid white;
}

#menu li a {
 position: relative;
 float: left;
 height: 23px;
 padding: 0 10px;
 text-decoration: none;
 color: white;
 line-height: 1.4;
 font-size: 16px;
}

#menu li a:hover {
 background: url(images/menu_on.gif) repeat-x;
}

#menu li a img {
 position: absolute;
 top: 0;
 left: 0;
}

#menu_bottom {
 position: absolute;
 margin: 98px 0 0 300px;
 overflow: hidden;
}

#menu_bottom li {
 float: left;
 height: 22px;
 padding: 0 5px;
 margin-left: -1px;
 border-left: 1px solid white;
}

#menu_bottom li a {
 position: relative;
 float: left;
 height: 22px;
 padding: 0 10px;
 text-decoration: none;
 color: white;
 line-height: 1.4;
 font-size:16px;
}

#menu_bottom li a:hover {
 text-decoration: underline;
}

/*************************** / Шапка ***************************/

#catalog {
 float: left;
 width: 290px;
 margin: -60px 0 0 0;
}

.catalog_font1 {
 font: 9pt Verdana;
}

#catalog .inn {
 position:relative;
}

#links {
 margin: 22px 0 0 11px;
 line-height: 1.8;
}

#links li {
 clear: both;
}

#links li a {
 position: relative;
 float: left;
 clear: both;
 height: 18px;
 padding-left: 24px;
 color: #064A92;
 font-weight: bold;
 text-decoration: none;
 background: url(images/links_off.gif) 6px 6px no-repeat;
}

#links li a:hover {
 text-decoration: underline;
 background: url(images/links_on.gif) top left no-repeat;
}

#content {
 position: relative;
 margin: -60px 40px 0 310px;
 padding-top: 6px;
 background: url(images/content_bg.jpg) no-repeat 230px 60px;
}

#content .article {
 margin: 5px 0;
 border-right: 2px solid #186A98;

}

table.prod2 {
 border-collapse: collapse;
 border: 0px solid #000;
}

.prod {
 /*width: 98%;*/
 border: 0px solid black;
 color: black;
}

.prod th {
 text-align: center;
 font-weight: bold;
 padding: 4px;
 border: 0px solid black;
}

.prod td {
 text-align: center;
 border: 0px solid black;
 padding: 3px;
}

.prod td .color1 {
 /*background: #A09E9;*/
 background: #ffffff;
 padding: 0px 0;
}

.color2 {
 /*background: #A09E9F;*/
 background: #ffffff;
 padding: 3px 0;
}

.prod td .color2 {
 background: #616150;
 padding: 3px 0;
 color: white;
}

.prod td .color2 a {
 display: block;
 text-decoration: none;
 color: white;
}

.prod .bn {
 height: 18px !important;
}

.prod .page {
 height: 24px;
 font-weight: bold;
 text-align: right;
}

.prod .page a {
 font-weight: bold;
 color: black;
 text-decoration: none;
}

.prod .page a:hover {
 text-decoration:underline;
}

.empty {
 width: 100%;
 height: 140px;
}

/*************************** Футер ***************************/
#footer_ {
 position: relative;
 width: 100%;
 min-width: 1000px;
 width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?'1000px':'100%');
 height: 126px;
 margin-top: -126px;
 text-align: center;
 background: url(images/footer_.jpg) repeat-x left 17px;
}

#footer {
 position: relative;
 width: 100%;
 height: 126px;
 text-align: left;
 font-size: 12px;
 background: url(images/footer.jpg) no-repeat left;
}

#footer .right {
 float: right;
 width: 604px;
 height: 78px;
 margin-top: 17px;
 background: url(images/footer_right.jpg) no-repeat;
}

#diz {
 position: absolute;
 margin: 67px 0 0 130px;
 color: #8E8A73;
}

#diz a {
 color: #8E8A73;
}

#copyright {
 position: absolute;
 margin: 108px 0 0 110px;
 color: #8E8A73;
}

#copyright a {
 color: #8E8A73;
}
/*************************** / Футер ***************************/

td.catalog1 {
 border-top: 0px solid #000;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
 border-bottom: 1px solid #000000;
}

yopopt · April 8, 2008

Это происходит из-за border-collapse: collapse; в table.

okunev2 · April 8, 2008

И как это побороть?

ZoNT · April 8, 2008

не использовать border-collapse !!!

okunev2 · April 8, 2008

border-collapse: collapse;

убрал, но теперь толстые стыки видно между двумя ячейками!

ZoNT · April 8, 2008

вот поправь теперь стили у этих ячеек!

okunev2 · April 8, 2008

т.е.?

okunev2 · April 8, 2008

Объясните популярно, есть таблица, пример приведите, и какие стили к ней прописать, чтобы этого не было!!!!!!!!!!!!!

Dimitry Wolotko · April 8, 2008

Хватит требовать то!

okunev2 · April 8, 2008

Хватит требовать то!

Хватит флудить!

Dimitry Wolotko · April 8, 2008

Держи себя в руках.

Тебе замечание.

okunev2 · April 8, 2008

Здесь любые вопросы, лечат замечаниями, а не понятные вопросы высмеивают так?

Sign In

Проблемы с версткой в Мозиле

Question

Link to comment

Share on other sites

37 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information