Большой Воронежский Форум
Главная Регистрация Сообщения за день
» Веб-дизайн>Некорректное отображение сайта в одном из браузеров.
Bizkit 11:34 02.03.2010
При переносе сайта с одно хостинга на другой появилась проблема: В браузере Internet explorer 6 главная страница сайта отображается криво: правая часть съезжает вниз, будто не умещается. Во всех остальных браузерах всё нормально. При переносе код сайта не меняли. Что это может быть? движок сайта - Joomla [Ответ]
Байт 13:27 02.03.2010
Поклоняйся великому float:left, юзернейм.

* мало инфы, я как бе говорю [Ответ]
DRON-ANARCHY 15:19 02.03.2010
1. Только главная?
2. Каким образом смещается? Просто чуть ниже становится или заползает под левую?
3. Лучше скриншот.
4. Если это на самом деле float, то попробуйте уменьшить ширину блока div.uj_content2
А там ваще хрен его знает, что именно косячит [Ответ]
Bizkit 09:45 03.03.2010
Я в CSS почти ничего не понимаю. Попытался уменьшить div.uj_content2, колонка сузилась, но всё равно на место не вернулась. Прилагаю скрин и листинг CSS-файла:

Код:
html,body {
   margin:0 auto;
   padding:0;
}
/* define block positions */
body {
  background: #000000;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12px;
  color: #CCCCCC;
  text-align:center;
  height:100%;
}
div.uj_wrap {
  width: 965px;
  margin: 0 auto;
  padding: 0px;
  height:auto !important; /* real browsers */
  height:100%; /* IE6: treaded as min-height*/
  min-height:100%; /* real browsers */
  text-align:left;
}
div.uj_top {
  width: 965px;
  height: 30px;
  margin: 0px;
  overflow:hidden;
  text-align:right;
}
div.uj_search {
  height:30px;
  width: 20%;
  float:right;
  overflow:hidden;
}
div.uj_user7 {
  height:30px;
  width: 80%;
  float:left;
  text-align:left;
}
div.color_pink div.uj_header {
  width: 965px;
  height: 300px;
  margin: 0px;
  overflow:hidden;
  text-align:right;
  background: url("../images/header_bg_pink.jpg") no-repeat 0 0;
}
div.color_yellow div.uj_header {
  width: 965px;
  height: 300px;
  margin: 0px;
  overflow:hidden;
  text-align:right;
  background: url("../images/header_bg_yellow.jpg") no-repeat 0 0;
}
div.color_blue div.uj_header {
  width: 965px;
  height: 300px;
  margin: 0px;
  overflow:hidden;
  text-align:right;
  background: url("../images/header_bg_blue.jpg") no-repeat 0 0;
}
div.color_green div.uj_header {
  width: 965px;
  height: 300px;
  margin: 0px;
  overflow:hidden;
  text-align:right;
  background: url("../images/header_bg_green.jpg") no-repeat 0 0;
}
div.uj_menu {
  width:965px;
  height: 50px;
  float:left;
  margin: 0px;
  text-align:left;
}
div.uj_user1, div.uj_user2, div.uj_user3 {
  width:280px;
  height: 210px;
  float:left;
  margin: 20px 0 0 30px;
  overflow:hidden;
  text-align:left;
  background: url("../images/black_trans.png");
  border: 1px solid #333333;
}
div.uj_main {
  width: 965px;
  margin: 20px 0 0 0;
  overflow:hidden;
}

div.uj_breadcrumb, div.blog {
  clear:both;
}
div.uj_left {
  width:27%;
  float:left;
  margin: 0px;
  text-align:left;
  border: 1px solid #333333;
  padding: 5px;
}
div.uj_right {
  width:27%;
  float:right;
  margin: 0px;
  text-align:left;
  border: 1px solid #333333;
  padding:5px;
}
div.uj_content1 {
  width:42%;
  float:left;
  margin: 0px;
  text-align:left;
  padding:5px;
}
div.uj_content2 {
  width:70%;
  float:left;
  margin: 0px;
  text-align:left;
  padding:5px;
}
div.uj_content3 {
  width:99%;
  float:left;
  margin: 0px;
  text-align:left;
  padding:5px;
}
div.uj_bottom {
  width: 965px;
  height: 280px;
  clear:both;
  margin: 0px;
  float:left;
  overflow:hidden;
  background: url("../images/bottom_bg.jpg") no-repeat 0 0;
}
div.uj_user4, div.uj_user5, div.uj_user6 {
  width:280px;
  height: 210px;
  float:left;
  margin: 20px 0 0 30px;
  overflow:hidden;
  text-align:left;
  background: url("../images/black_trans.png");
  border: 1px solid #333333;
}
div.color_pink div.uj_footer {
  width: 965px;
  height: 90px;
  margin: 0;
  padding:10px 0;
  clear:both;
  text-align: center;
  font-size: 10px;
  background: url("../images/footer_bg_pink.jpg") no-repeat 0 0;
}
div.color_yellow div.uj_footer {
  width: 965px;
  height: 90px;
  margin: 0;
  padding:10px 0;
  clear:both;
  text-align: center;
  font-size: 10px;
  background: url("../images/footer_bg_yellow.jpg") no-repeat 0 0;
}
div.color_blue div.uj_footer {
  width: 965px;
  height: 90px;
  margin: 0;
  padding:10px 0;
  clear:both;
  text-align: center;
  font-size: 10px;
  background: url("../images/footer_bg_blue.jpg") no-repeat 0 0;
}
div.color_green div.uj_footer {
  width: 965px;
  height: 90px;
  margin: 0;
  padding:10px 0;
  clear:both;
  text-align: center;
  font-size: 10px;
  background: url("../images/footer_bg_green.jpg") no-repeat 0 0;
}

/* buttons and other input fields */
button, input.button {
  background: transparent;
  font-size: 12px;
  height: 20px;
  padding: 0 15px 5px 15px;
  cursor: pointer;
}
input.inputbox, textarea, select {
  background: transparent;
  margin: 5px;
  color: #CCCCCC;
}
form, fieldset {
  border: 0px;
}
div.uj_search input.inputbox {
  width: 150px;
}
.color_pink button, div.color_pink input.button {
  color: #b84589;
  border: 1px solid #b84589;
}
.color_pink button:hover, div.color_pink input.button:hover {
  color: #ffffff ;
  border: 1px solid #ffffff;
}
.color_pink input.inputbox, div.color_pink textarea, div.color_pink select {
  border: 1px solid #b84589;
}
.color_yellow button, div.color_yellow input.button {
  color: #BBBB44;
  border: 1px solid #BBBB44;
}
.color_yellow button:hover, div.color_yellow input.button:hover {
  color: #ffffff ;
  border: 1px solid #ffffff;
}
.color_yellow input.inputbox, div.color_yellow textarea, div.color_yellow select {
  border: 1px solid #BBBB44;
}
.color_green button, div.color_green input.button {
  color: #44BB44;
  border: 1px solid #44BB44;
}
.color_green button:hover, div.color_green input.button:hover {
  color: #ffffff ;
  border: 1px solid #ffffff;
}
.color_green input.inputbox, div.color_green textarea, div.color_green select {
  border: 1px solid #44BB44;
}
.color_blue button, div.color_blue input.button {
  color: #4499bb;
  border: 1px solid #4499bb;
}
.color_blue button:hover, div.color_blue input.button:hover {
  color: #ffffff ;
  border: 1px solid #ffffff;
}
.color_blue input.inputbox, div.color_blue textarea, div.color_blue select {
  border: 1px solid #4499bb;
}

/* menus */
div.moduletable ul, div.moduletable_menu ul {
  text-align: left;
  margin: 5px 0 10px 0;
  padding: 0px  0 10px 0;
  color: #ffffff;
  list-style-type:none;
}
div.moduletable ul li , div.moduletable_menu ul li 
{
  padding: 5px 0 0 0;
  display:block;
  width: 220px;
  height: 15px;
  margin: 0 15px 0 15px;
}
div.moduletable ul li a , div.moduletable_menu ul li a
{
  text-decoration:none;
  font-weight: bold;
  font-size:12px;
  margin: 0 0px 0 15px;
  color: #ffffff;
}
div.moduletable ul li a:hover , div.moduletable ul li#current a,
div.moduletable_menu ul li a:hover , div.moduletable_menu ul li#current a
{
  text-decoration:underline;
  color: #CCCCCC;
}
div.color_pink div.moduletable ul li ,div.color_pink div.moduletable_menu ul li 
{
  background: url("../images/li_bg_pink.png") no-repeat 0 8px;
}
div.color_yellow div.moduletable ul li ,div.color_yellow div.moduletable_menu ul li 
{
  background: url("../images/li_bg_yellow.png") no-repeat 0 8px;
}
div.color_green div.moduletable ul li ,div.color_green div.moduletable_menu ul li 
{
  background: url("../images/li_bg_green.png") no-repeat 0 8px;
}
div.color_blue div.moduletable ul li ,div.color_blue div.moduletable_menu ul li 
{
  background: url("../images/li_bg_blue.png") no-repeat 0 8px;
}
div.uj_user7 ul, div.uj_user8 ul {
  text-align: left ;
  margin: 0px;
  margin-top:10px;
  padding: 0px;
  height: 20px;
  color: #666666;
  border-left: 1px solid #666666;
}
div.uj_user7 div.moduletable ul li,div.uj_user7 div.moduletable_menu ul li,
div.uj_user8 div.moduletable ul li,div.uj_user8 div.moduletable_menu ul li
{
  display:inline;
  padding: 0;
  margin:0;
  background: transparent;
  border-right: 1px solid #666666;
}
div.uj_user7 ul li a, div.uj_user8 ul li a
{
  height: 30px;
  padding: 20px 15px 0 20px;
  margin:0;
  text-decoration:none;
  font-weight: bold;
  font-size:10px;
  color: #666666;
  text-decoration:none;
}
div.uj_user7 ul li a:hover, div.uj_user7 ul li#current a, div.uj_user8 ul li a:hover, div.uj_user8 ul li#current a
{
  color: #FFFFFF;
  text-decoration:underline;
}
div.uj_menu ul {
  text-align: center;
  margin: 0px 0px 0 20px;
  padding: 0px;
  height: 50px;
  color: #ffffff;
}
div.uj_menu div.moduletable ul li, div.uj_menu div.moduletable_menu ul li
{
  margin: 0px;
  padding: 0px;
  display: inline; 
  float:left;
  width: 150px;
  height: 50px;
  background: transparent;
}
div.uj_menu ul li a
{
  text-decoration:none;
  display: block;
  width: 150px;
  height: 50px;
  font-weight: bold;
  font-size:16px;
  padding: 15px 0px 0 0px;
  margin: 0px 0px 0 0px; 
  color: #FFFFFF;
  background:url("../images/menu_seperator.png") no-repeat 148px 0;
}

div.uj_menu ul li a:hover, div.uj_menu ul li#current a
{
  text-decoration:underline;
  color: #CCCCCC;

}


/* headers */
h1, h2, h3, h4, div.componentheading, div.contentheading 
{
  color: #FFFFFF;
}
div.color_pink div.uj_user1 h1, div.color_pink div.uj_user1 h2, div.color_pink div.uj_user1 h3, div.color_pink div.uj_user1 h4, 
div.color_pink div.uj_user2 h1, div.color_pink div.uj_user2 h2, div.color_pink div.uj_user2 h3, div.color_pink div.uj_user2 h4,
div.color_pink div.uj_user3 h1, div.color_pink div.uj_user3 h2, div.color_pink div.uj_user3 h3, div.color_pink div.uj_user3 h4,
div.color_pink div.uj_user4 h1, div.color_pink div.uj_user4 h2, div.color_pink div.uj_user4 h3, div.color_pink div.uj_user4 h4,
div.color_pink div.uj_user5 h1, div.color_pink div.uj_user5 h2, div.color_pink div.uj_user5 h3, div.color_pink div.uj_user5 h4,
div.color_pink div.uj_user6 h1, div.color_pink div.uj_user6 h2, div.color_pink div.uj_user6 h3, div.color_pink div.uj_user6 h4
{
  background: url("../images/square_pink.png") no-repeat 10px 0px;
  padding: 2px 0 0 40px;
  text-align: left;
}
div.color_yellow div.uj_user1 h1, div.color_yellow div.uj_user1 h2, div.color_yellow div.uj_user1 h3, div.color_yellow div.uj_user1 h4, 
div.color_yellow div.uj_user2 h1, div.color_yellow div.uj_user2 h2, div.color_yellow div.uj_user2 h3, div.color_yellow div.uj_user2 h4,
div.color_yellow div.uj_user3 h1, div.color_yellow div.uj_user3 h2, div.color_yellow div.uj_user3 h3, div.color_yellow div.uj_user3 h4,
div.color_yellow div.uj_user4 h1, div.color_yellow div.uj_user4 h2, div.color_yellow div.uj_user4 h3, div.color_yellow div.uj_user4 h4,
div.color_yellow div.uj_user5 h1, div.color_yellow div.uj_user5 h2, div.color_yellow div.uj_user5 h3, div.color_yellow div.uj_user5 h4,
div.color_yellow div.uj_user6 h1, div.color_yellow div.uj_user6 h2, div.color_yellow div.uj_user6 h3, div.color_yellow div.uj_user6 h4
{
  background: url("../images/square_yellow.png") no-repeat 10px 0px;
  padding: 2px 0 0 40px;
  text-align: left;
}
div.color_blue div.uj_user1 h1, div.color_blue div.uj_user1 h2, div.color_blue div.uj_user1 h3, div.color_blue div.uj_user1 h4, 
div.color_blue div.uj_user2 h1, div.color_blue div.uj_user2 h2, div.color_blue div.uj_user2 h3, div.color_blue div.uj_user2 h4,
div.color_blue div.uj_user3 h1, div.color_blue div.uj_user3 h2, div.color_blue div.uj_user3 h3, div.color_blue div.uj_user3 h4,
div.color_blue div.uj_user4 h1, div.color_blue div.uj_user4 h2, div.color_blue div.uj_user4 h3, div.color_blue div.uj_user4 h4,
div.color_blue div.uj_user5 h1, div.color_blue div.uj_user5 h2, div.color_blue div.uj_user5 h3, div.color_blue div.uj_user5 h4,
div.color_blue div.uj_user6 h1, div.color_blue div.uj_user6 h2, div.color_blue div.uj_user6 h3, div.color_blue div.uj_user6 h4
{
  background: url("../images/square_blue.png") no-repeat 10px 0px;
  padding: 2px 0 0 40px;
  text-align: left;
}
div.color_green div.uj_user1 h1, div.color_green div.uj_user1 h2, div.color_green div.uj_user1 h3, div.color_green div.uj_user1 h4, 
div.color_green div.uj_user2 h1, div.color_green div.uj_user2 h2, div.color_green div.uj_user2 h3, div.color_green div.uj_user2 h4,
div.color_green div.uj_user3 h1, div.color_green div.uj_user3 h2, div.color_green div.uj_user3 h3, div.color_green div.uj_user3 h4,
div.color_green div.uj_user4 h1, div.color_green div.uj_user4 h2, div.color_green div.uj_user4 h3, div.color_green div.uj_user4 h4,
div.color_green div.uj_user5 h1, div.color_green div.uj_user5 h2, div.color_green div.uj_user5 h3, div.color_green div.uj_user5 h4,
div.color_green div.uj_user6 h1, div.color_green div.uj_user6 h2, div.color_green div.uj_user6 h3, div.color_green div.uj_user6 h4
{
  background: url("../images/square_green.png") no-repeat 10px 0px;
  padding: 2px 0 0 40px;
  text-align: left;
}
div.color_pink div.uj_left h1, div.color_pink div.uj_left h2, div.color_pink div.uj_left h3, div.color_pink div.uj_left h4, 
div.color_pink div.uj_right h1, div.color_pink div.uj_right h2, div.color_pink div.uj_right h3, div.color_pink div.uj_right h4
{
  color: #FF0297;
  text-align: left;
}
div.color_yellow div.uj_left h1, div.color_yellow div.uj_left h2, div.color_yellow div.uj_left h3, div.color_yellow div.uj_left h4, 
div.color_yellow div.uj_right h1, div.color_yellow div.uj_right h2, div.color_yellow div.uj_right h3, div.color_yellow div.uj_right h4
{
  color: #FFFF00;
  text-align: left;
}
div.color_blue div.uj_left h1, div.color_blue div.uj_left h2, div.color_blue div.uj_left h3, div.color_blue div.uj_left h4, 
div.color_blue div.uj_right h1, div.color_blue div.uj_right h2, div.color_blue div.uj_right h3, div.color_blue div.uj_right h4
{
  color: #0099FF;
  text-align: left;
}
div.color_green div.uj_left h1, div.color_green div.uj_left h2, div.color_green div.uj_left h3, div.color_green div.uj_left h4, 
div.color_green div.uj_right h1, div.color_green div.uj_right h2, div.color_green div.uj_right h3, div.color_green div.uj_right h4
{
  color: #00FF00;
  text-align: left;
}
h1, div.componentheading {
  font-size: 20px;
}
h2, div.contentheading {
  font-size: 20px;
}
h3 {
  font-size: 16px;
}
h4 {
  font-size: 16px;
}


/* moduletables */
div.moduletable, div.moduletable_menu {
  margin: 0 0 10px 0;
}
div.moduletable div, div.moduletable_menu div, div.moduletable_text div{
  margin: 5px;
}


div.uj_bottom div.moduletable, div.uj_bottom div.moduletable_menu, div.uj_bottom div.moduletable_text{
  float:left;
}

/* normal links */
div.color_pink a {
  color: #B84589;
  text-decoration: underline;
}
div.color_yellow a {
  color: #BBBB44;
  text-decoration: underline;
}
div.color_blue a {
  color: #4499BB;
  text-decoration: underline;
}
div.color_green a {
  color: #44BB44;
  text-decoration: underline;
}
div.color_pink a:hover, div.color_yellow a:hover, div.color_blue a:hover, div.color_green a:hover {
  color: #ffffff;

}
a img {
  border: 0px;
}

/* define contact section */

.contact_email {
  text-align: left;
}
.contact_email label {
  float:left;
  width: 150px;
}
.contact_email label.contact_textmsg, .contact_email label.copy {
  width: 380px;
}
.contact_email input {
  margin:3px;
}
.contact_email input#contact_email_copy {
  margin:3px;
  padding:0px;
  width:15px;
  float:left;
}
.contact_email input.inputbox, input.inputbox, input.required {
  width:200px;
}
.contact_email textarea {
  width:200px;
  height: 100px;
}
/* some general stuff */
img {
  margin: 5px;
}
p {
  padding: 0;
  margin: 5px;
}
p.iteminfo, p.articleinfo {
  width: 100%;
  text-align: center;
  font-size: 10px;
  overflow:hidden;
}
div.color_pink p.iteminfo, div.color_pink p.articleinfo {
  color: #B84589; 
}
div.color_yellow p.iteminfo, div.color_yellow p.articleinfo {
  color: #BBBB44; 
}
div.color_blue p.iteminfo, div.color_blue p.articleinfo {
  color: #4499BB; 
}
div.color_green p.iteminfo, div.color_green p.articleinfo {
  color: #44BB44; 
}
p.iteminfo span, p.articleinfo span {
  float:left;
  clear: both;
  width: 100%;
}
span.dropcap {
  color: #edb27a;
  margin: 0px;
  font-size: 30px;
}
div.color_pink span.dropcap,div.color_pink span.small,div.color_pink div.uj_breadcrumb {
  color: #B84589; 
}
div.color_yellow span.dropcap, div.color_yellow span.small, div.color_yellow div.uj_breadcrumb {
  color: #BBBB44; 
}
div.color_blue span.dropcap, div.color_blue span.small, div.color_blue div.uj_breadcrumb {
  color: #4499BB; 
}
div.color_green span.dropcap, div.color_green span.small, div.color_green div.uj_breadcrumb {
  color: #44BB44; 
}
span.small {
  font-size: 10px;
}
div.uj_breadcrumb {
  font-size: 10px;
}
div.uj_breadcrumb div.moduletable img {
  vertical-align:middle;
  margin-bottom:4px;
}
div.uj_breadcrumb img {
  display:none;
}
div.uj_breadcrumb a {
  padding:0 12px 0 0;
}
div.color_pink div.uj_breadcrumb a  
{
  background: url("../images/li_bg_pink.png") no-repeat top right;
}
div.color_yellow div.uj_breadcrumb a  
{
  background: url("../images/li_bg_yellow.png") no-repeat top right;
}
div.color_green div.uj_breadcrumb a  
{
  background: url("../images/li_bg_green.png") no-repeat top right;
}
div.color_blue div.uj_breadcrumb a  
{
  background: url("../images/li_bg_blue.png") no-repeat top right;
}

Изображения
[Ответ]
Death323 09:56 03.03.2010
Стопроцентный способ IE 6 Blocker Script избавится от этого косяка, и многих других проблем [Ответ]
P@rtiz@n 10:18 03.03.2010
Bizkit, А в других браузерах норм? Если да, тогда не загоняйся, IE мало кто пользуется [Ответ]
seo 10:57 03.03.2010

Сообщение от P@rtiz@n:
Bizkit, А в других браузерах норм? Если да, тогда не загоняйся, IE мало кто пользуется

почти 10%, не сказал бы, что мало [Ответ]
Death323 11:02 03.03.2010
А если серьезно, то добавь в классы div.uj_left и div.uj_content2 вот такое свойство.

Код:
clear:right;

Сообщение от seo:
почти 10%, не сказал бы, что мало

Тут сильно от тематики сайта зависит.
Если посмотреть Хабр например, то там 0%.
А если посмотреть статистику кулинарного сайта, то и все 50%

Пы.Сы. Когда он вообще уже загнется(IE6) [Ответ]
svga 12:43 03.03.2010

Сообщение от Death323:
Пы.Сы. Когда он вообще уже загнется(IE6)

в восьмерке у ТС те же самые проблемы.

тут как бы - http://bvf.ru/forum/showthread.php?t=531180 .

одна таблица вида
<table>
<tr><td>левая часть</td><td>правая часть</td></tr>
</table>

решит всю проблему как класс, без плясок с чудо стилями дивов и всяких неожиданных поползновений сайта во всяких браузерах. [Ответ]
Death323 12:49 03.03.2010

Сообщение от svga:
в восьмерке у ТС те же самые проблемы.

тут как бы - http://bvf.ru/forum/showthread.php?t=531180 .

одна таблица вида
<table>
<tr><td>левая часть</td><td>правая часть</td></tr>
</table>

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

У него там шаблон динамический походу и можно еще и правый сайдбар подключать когда надо.
Поэтому я думаю легче косяк в CSS найти в данном случае чем полностью переверстывать шаблон из дивов в таблицы.

А вообще иногда проще на таблицах конечно замутить. [Ответ]
svga 13:01 03.03.2010

Сообщение от Death323:
Поэтому я думаю легче косяк в CSS найти в данном случае чем полностью переверстывать шаблон из дивов в таблицы.

ничего ПОЛНОСТЬЮ переверстывать не надо. просто добавить ОДНУ таблицу в ОДНО проблематичное место.
верстка в которой присутствуют и таблицы, и дивы не перестает работать, так что не надо рассказывать про полное переделывание шаблона. [Ответ]
Death323 14:38 03.03.2010

Сообщение от svga:
ничего ПОЛНОСТЬЮ переверстывать не надо. просто добавить ОДНУ таблицу в ОДНО проблематичное место.
верстка в которой присутствуют и таблицы, и дивы не перестает работать, так что не надо рассказывать про полное переделывание шаблона.

Если так, то конечно поможет, но мне как-то не очень нравится такое решение, какой-то кастыль что-ли получается.
Плюс у него это будет сделать не так просто, придется не только шаблон исправить таким образом, но и PHPкод который выводит левый и правый сайдбар в зависимости от наличия в них модуля.
Поэтому я и написал что в этом конкретном случае легче поправить css двумя малекими вставочками, которые и нужны только для IE6 [Ответ]
Bizkit 14:45 03.03.2010
Death323, спасибо, попробую.

И 6 IE ещё многие пользуются. Например у меня подруге как поставили 5 лет назад XP, так она его и не переставляла. И самое ужасное, что этот горе-браузер стоит у моего начальника на буке, он-то этот баг и заметил. А я при всём желании у себя это старьё поставить не могу без перестановки винды. [Ответ]
alemiks 20:33 03.03.2010
Так бывает, когда контент шире контейнера
Код:
div.uj_content2 { overflow: hidden; }
[Ответ]
Death323 01:39 04.03.2010

Сообщение от alemiks:
Так бывает, когда контент шире контейнера

Код:
div.uj_content2 { overflow: hidden; }

Это не из за того что шире, есть такая фигня у ИЕ6, что он блоки со свойством float
и шириной заданой в процентах ,округляет до целых чисел и потом прибавляет еще по 1 px.
Вот если конкретно на этом примере, если поменять ширину блока с 70% (как сейчас) на 50% например, все равно он перенесет второй блок ниже, хотя он и стане гораздо уже. Ну вот есть такой тупизм у ИЕ6.

А вот overflow: hidden; тоже будет неправильно, если текст будет шире блока то он просто его скроет, вместо того чтобы перенести на новую строку [Ответ]
alemiks 09:30 04.03.2010

Сообщение от Death323:
Это не из за того что шире, есть такая фигня у ИЕ6, что он блоки со свойством float
и шириной заданой в процентах ,округляет до целых чисел и потом прибавляет еще по 1 px.
Вот если конкретно на этом примере, если поменять ширину блока с 70% (как сейчас) на 50% например, все равно он перенесет второй блок ниже, хотя он и стане гораздо уже. Ну вот есть такой тупизм у ИЕ6.

хм, не могу проследить связь между первым и вторым предложением) Сделали вы 50% ширину, ие что-то там прибавил и чо?) Стало 27% + 50% = всё равно больше 100%?
Ну и насчет «Это не из за того что шире, есть такая фигня у ИЕ6» готов послушать, из-за чего, т.к. полный ноль в css

Сообщение от Death323:
А вот overflow: hidden; тоже будет неправильно, если текст будет шире блока то он просто его скроет, вместо того чтобы перенести на новую строку

Если предполагается, что кто-то кривыми ручонками будет вставлять широкие картинки в контент и при этом нужно, чтобы вёрстка не разваливалась, тут или overflow:hidden, или таблица [Ответ]
Death323 20:54 04.03.2010

Сообщение от alemiks:
хм, не могу проследить связь между первым и вторым предложением) Сделали вы 50% ширину, ие что-то там прибавил и чо?) Стало 27% + 50% = всё равно больше 100%?
Ну и насчет «Это не из за того что шире, есть такая фигня у ИЕ6» готов послушать, из-за чего, т.к. полный ноль в css

Я наверное, косноязычен, но это достаточно извесный баг IE5-7.
вот тут про него
http://www.positioniseverything.net/...ed-margin.html
А вот тут у Лебедева
http://goo.gl/ClLa
http://goo.gl/y5RW

а тут на хабре
http://goo.gl/GKmn

Способы обхода по ссылкам можно отследить разные [Ответ]
Bizkit 21:48 04.03.2010
alemiks,
Death323, Спасибо вам обоим! Попробовал оба ваши способа и оба нормально работают [Ответ]
Вверх

Версия для ПК
(c) Большой Воронежский Форум