Текст выходит за слой

partiz · December 5, 2007

Хоть и звучит похоже, но такой проблемы на форуме не разбиралось.

Эксплорер все понимает, а FF и Opera нет. Скрины ниже...

Эксплорер

Опера и ФФ

Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <link rel="stylesheet" href="css.css" type="text/css" media="screen" />
 <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
 <title>Фирма "РЕМИС"</title>
</head>

<body>
<div id="container">
 <div id="navitabs">
 <span class="navitabs">
 <a href="#" ><span class="c1">+</span> <span class="c2">Средства измерения</span></a>


 <a href="#" ><span class="c1">+</span> <span class="c2">Строительная деятельность</span></a>


 <a href="#" ><span class="c1">+</span> <span class="c2">Архивная деятельность</span></a>
 </span>
 <span class="navitabs_1">
 <a href="#" ><span class="c1">+</span> <span class="c2">О компании</span></a>
 </span>
 </div>
 <div id="desc"></div>
 <div id="main">
 <div id="maintop"></div>
 <div id="mainmiddle">
 <div id="content">
 <u>Общество с ограниченной ответственностью <b>"Фирма РЕМИС"</b>:</u>

<i>Адрес:</i>
<b>123056, г. Москва, Б.Грузинская, д.39.
Тел. 745-55-20, факс 745-55-17</b>

<i>Банковские реквизиты:</i>
<b>ИНН/КПП 7703137121/771001001, р/с 40702810200000004281
в АБ ?БПФ? (ЗАО), г. Москва,
к/с 30101810400000000672, БИК 044585672.</b>
 </div>
 <div id="sidebar"></div>
 </div>
 </div>
 <div id="mainbottom"></div>
</div>
</body>
</html>

А вот КСС

body {
padding: 0;
margin: 0;
font: 76% tahoma, verdana, sans-serif;
background: #4f4d4c;
}
a {
text-decoration: none;
color: #454443;
}
a:hover {
text-decoration: underline;
}
#container {
margin: 0 auto 15px auto;
margin-top: 50px;
width: 771px;
}
#navitabs {
background: url(./img/upper.jpg) no-repeat;
width: 771px;
height: 85px;
}
.navitabs {
float: right;
margin-right: 30px;
margin-top: 15px;
font: tahoma;
font-size:12px;
color: #454443;
font-weight: bold;
}
.navitabs_1 {
font: tahoma;
font-size:12px;
color: #454443;
font-weight: bold;
float: right;
margin-right: 15px;
margin-top: 28px;
}
#desc {
padding: 0;
background: url(./img/okomp.jpg);
width: 771px;
height: 224px;
margin: 0 0 0 0;
}
#main {
width: 771px;
}
#maintop {
background: url(./img/mtop.jpg);
width: 771px;
height: 20px;
}
#mainmiddle {
background: url(./img/mmiddle.jpg);
width: 771px;
}
#mainbottom {
background: url(./img/mbottom.jpg);
width: 771px;
height: 20px;
}
#content {
width: 350px;
padding: 20px 10px 10px 20px;
color: #6f6d66;
font: tahoma;
font-size:11px;
float: left;
}
#sidebar {
width:349px;
height: 82px;
background: url(./img/3pix.jpg) no-repeat;
float: right;
padding-left: 20px;
margin: 20px 0 0 10px;
}
.c1 {font-size:12px; color: #b9a437; font-weight: bold;} 
.c2 {color: #454443}

Помогите пожалуйста, чтобы под оперой это все также хорошо смотрелось как и под Эксплорером.

з.ы. еще те, кто разбирается в программировании посмотрите страничку remis21.ru... под Оперой и Эксплорером код яваскрипта работает, а в ФФ непашед подскажите, пожалуйста, как исправить, чтобы и в ФФ работало.

klierik · December 5, 2007

не очень вникал в код, но догадываюсь что если вы после

то должно все стать на места =)

guvatara · December 5, 2007

...
#mainmiddle {
background: url(./img/mmiddle.jpg);
width: 771px;
display:table;
}
...

yopopt · December 5, 2007

Вс? правильно делают фф и Опера.

Можно сделать так:

html

 <div id="mainmiddle">
 <div id="sidebar"></div>
 <div id="content">
 <u>Общество с ограниченной ответственностью <b>"Фирма РЕМИС"</b>:</u>

<i>Адрес:</i>
<b>123056, г. Москва, Б.Грузинская, д.39.
Тел. 745-55-20, факс 745-55-17</b>

<i>Банковские реквизиты:</i>
<b>ИНН/КПП 7703137121/771001001, р/с 40702810200000004281
в АБ ?БПФ? (ЗАО), г. Москва,
к/с 30101810400000000672, БИК 044585672.</b>
 </div>
 </div>

В css у #mainmiddle убрать высоту, а у #content - float

Яваскрипт мягко говоря плохи удивительно как вообще работает... Переменные now, desc, content неопределены. Вы считаете что браузер сам должен догадаться что это id? Вы ошибаетесь. Используйте getElementById().

partiz · December 5, 2007

...
#mainmiddle {
background: url(./img/mmiddle.jpg);
width: 771px;
display:table;
}
...

Спасибо! Для дизайна помогло!!!

Яваскрипт мягко говоря плохи удивительно как вообще работает... Переменные now, desc, content неопределены. Вы считаете что браузер сам должен догадаться что это id? Вы ошибаетесь. Используйте getElementById().

Я не знаю как оно работает, но Опера понимает.

desc - слой.

Попробую написать через getElementById(). О результатах сообщу тут же.

yopopt · December 5, 2007

...
#mainmiddle {
background: url(./img/mmiddle.jpg);
width: 771px;
display:table;
}
...
Спасибо! Для дизайна помогло!!!

Рассмешили. Сначала криво сверстать, а после утверждать браузеру что это не див, а таблица. Чего только не бывает....

guvatara · December 5, 2007

ну если броузеры еще не понимают по человечески что такое див и как его кушать. А задача идеальная для таблиц, но хочется сделать дивами, почему не сделать. С точки зрения валидности и правильности это допустимо. Или это не так?

Тем более если это валидно и исправляет ситуацию, почему нет?

yopopt · December 5, 2007

ну если броузеры еще не понимают по человечески что такое див и как его кушать. А задача идеальная для таблиц, но хочется сделать дивами, почему не сделать. С точки зрения валидности и правильности это допустимо. Или это не так?
Тем более если это валидно и исправляет ситуацию, почему нет?

Да, вполне валидно. Да, исправляет ситуацию. Нет, это не правильно.

Для того, чтобы решить данную проблему достаточно понимать как работает float. Как он должен работать, как он работает на самом деле. И если бы автор это понимал, он бы сверстал иначе и не стал делать из дива таблицу.

guvatara · December 5, 2007

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

yopopt · December 5, 2007

Согласен, это логично.

partiz · December 5, 2007

Попробовал через getElementById() и заработало блин, сколько же подводных камней...

Для того, чтобы решить данную проблему достаточно понимать как работает float. Как он должен работать, как он работает на самом деле. И если бы автор это понимал, он бы сверстал иначе и не стал делать из дива таблицу.

автор не понимает как работает float.

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

partiz · December 5, 2007

2 yopopt ... Я почитал про float... это же всего лишь выравнивает элемент на странице... как может выравнивание элемента на странице отвечать за то, что текст из него вылезает? Я дилетант в этих дивах и просто хочу разобраться... если не сложно, объясни пожалуйста.

partiz · December 5, 2007

Объяснения по float получил по личке спасибо!

попробую на практике реализовать еще пару примеров, чтобы до конца понять спецификацию и все функции float.

Sign In

Текст выходит за слой

Question

Link to comment

Share on other sites

12 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

Join the conversation

Обсуждения

Important Information