Почему при определенных условиях ломается верстка?

Question

[Петр Волханов]

Проблемы с версткой, при определенных условиях верстка ломается и вот как это выглядит:



Вот html разметка:

<div id="map_details">
<br><br>
<a href="build.php?id=39"><img src="img/x.gif" class="def2" alt="Собственные прибывающие войска" title="Собственные прибывающие войска"></a>
<span class="d2">»</span>
	<div class="mov"><span class="d2">1&nbsp;Приб.</span></div><div class="dur_r">in&nbsp;<span id="timer1">0:08:52</span>&nbsp;ч.</div></div>

А вот как должно быть, правильный вариант:



Как исправить верстку? Что для этого нужно? Какой CSS нужно использовать, что бы добиться такого результата как на второй картинке?

Comments

[Петр Волханов]

Какие CSS стили нужно применить к этой HTML разметке, чтобы получить результат как на второй картинке?

[bezymenka]

теперь
table {
background-color: #C0C0C0;
border-collapse: separate;
empty-cells: show;
line-height: 16px;
width: 100%;
}

compact.css?e21d2 строка 3419

убери ширину width: 100%;

[Петр Волханов]

У меня в файле compact.css в строке 3419 абсолютно другое значение(

[bezymenka]

ну найди где у тебя

table {
background-color: #C0C0C0;
border-collapse: separate;
empty-cells: show;
line-height: 16px;
width: 100%;
}

и удали width: 100%;

[bezymenka]

его надо перенести просто в то место где он должен быть.
видимо вставить внутрь блока content и задать отступ наверх

[Петр Волханов]

@bezymenka Попробуй сейчас зайти в аккаунт, я ничего не менял, отправил еще войска в атаку и все стало ОК.

[bezymenka]

Первый скрин - это с моими изменениями в хроме.
а это то что я вижу сейчас

[Петр Волханов]

@bezymenka Я разобрался - тут проблема не в CSS, а в PHP шаблоне, то есть это проблема программирования, а не верстки... Но Вам, все равно, огромное спасибо, за помощь!

[bezymenka]

О_о там просто едут стили, ты пробовал сделать три шага, что я описала? три строчки и все работает, я же проверила. там просто таблица пытается все место занять вот и едет все. и подвал скачет. ему не нужно позиционирование. Зачем же задавать вопрос, если не пользуешься советами? хэх

[Петр Волханов]

@bezymenka Я задал другой вопрос - Проблемы с версткой в шаблоне при определенных условиях Там PHP код отвечает за отображение страницы. Когда 2 и более атаки, то этот блок оборачивается в таблицу и все встает на свои места, а если атака одна, то отображается без таблицы, поэтому верстка ломается. Если я не смогу программно решить проблему, то буду править CSS. Тебе отдельно СПАСИБО за помощь!

[bezymenka]

Не за что, обращайся

[bezymenka]

[bezymenka]

или доступ давай на сайт)))))))))))

[Петр Волханов]

@bezymenka
логин AlexXx
пасс 77a6efe9

[bezymenka]

travianx5.ru/login.php не заходит

[bezymenka]

ой, туплю)))

[bezymenka]

да и кусок кода то ты выложил html, как же твои стили посмотреть?

[bezymenka]

[e-mail]

[bezymenka]

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

[bezymenka]

При каких условиях? что меняете, когда ломается?
Мне кажется где-то флоаты неправильно срабатывают, или указана жесткая ширина блоков, тогда, если добавляется какой-либо текст, блоки просто не влазят.
Задайте ширину в процентах.
Перед футером вставьте блок и в css укажите .clear {clear: both;}

[Петр Волханов]

@bezymenka Какие CSS стили нужно применить к этой HTML разметке, чтобы получить результат как на второй картинке?

[bezymenka]

Чтобы ответить на этот вопрос, мне нужно чтобы Вы ответили на мои вопросы выше.
При каких условиях? что меняете, когда ломается? Или полный код

[Петр Волханов]

@bezymenka Когда отправляю войска в атаку, то ломается верстка, причем я уже 100% выяснил, что ломается она из-за того куска HTML кода, который я продемонстрировал в самом вопросе. Нужно этот блок разместить в одну строку с помощью правил CSS и тогда все будет ОК. Сможете помочь, потому как я в верстке полный ноль?

[bezymenka]

ну во первых футер у тебя сумасшедший какой-то

div#footer {
bottom: 0px;
height: 90px;
left: 0;
margin-top: 90px;
min-width: 980px;
position: absolute;
right: 0;
font-size: 11px;
line-height: 19px;
}

[Петр Волханов]

@bezymenka Дело в том, что в CSS файле у футера нет значения position: absolute; Может оно наследуется? Такое может быть?

[Петр Волханов]

Сорри, протупил, уже нашел!

[bezymenka]

этот блок влез наверх теперь

<table cellpadding="1" cellspacing="1" id="building_contract">
		<thead><tr>
        <th colspan="4">Строительство:			 <a href="?buildingFinish=1" onclick="return confirm('Finish all construction and research orders in this village immediately for 2 Gold?');" title="Finish all construction and research orders in this village immediately for 2 Gold?"><img class="clock" alt="Finish all construction and research orders in this village immediately for 2 Gold?" src="img/x.gif"></a>
			            </th>
		</tr></thead>
		<tbody>
        <tr><td class="ico"><a href="?d=8177&amp;a=0&amp;c=CLO"><img src="img/x.gif" class="del" title="cancel" alt="cancel"></a></td><td>Железная Шахта (Level 15)</td><td>in <span id="timer2">14:09:23</span> hrs.</td><td>done at 01:57</td></tr>            </tbody>
	</table>

Answer 1

[bezymenka]

position: absolute; убери с футера.
new_layout_ltr.css тут в 125 строке

Answer 2

[Krickt]

Очень похоже на поехавшую css-сетку...
Более без кода не сказать.

Comments

[Петр Волханов]

@shiza36 Какие CSS стили нужно применить к этой HTML разметке, чтобы получить результат как на второй картинке?

[Krickt]

@eprivalov нужно CSS смотреть

[Петр Волханов]

@shiza36 дело в том, что к этим классам не применяется никаких стилей CSS

[Krickt]

@eprivalov напишите мне по контактам в профиле, помогу

Answer 3

[akashtrih]

Иногда такое происходит, когда что-то выводится перед html. Например, ошибки php уровня notice или warning, вывод var_dump()

Comments

[Петр Волханов]

@akashtrih Так я отключил вывод PHP ошибок в браузер...