Atip

Спасибо! буду колдовать

Неужели ни у кого нет хоть каких-то предположений? Помогите, пожалуйста...мне бы хоть выставить, чтобы отображалось правильно во всех браузерах. Уже всё перепробовал, думаю может сделать табличную вёрстку, но мне уже интересно узнать, что же является причиной...

Уважаемые форумчане, прошу вашего совета и помощи. Сам не волшебник, а только учусь и ничего не могу поделать, сколько не ковырялся в сети. Делаю форму поиска, в которой есть несколько текстовых полей, форм select и радиокнопки. Нужно чтобы в 1 ряд размещалось несколько элементов. Заключил всё в div'ы, в style.css указал для некоторых элементов float:left и обрадовался - в FF всё получилось как нужно, но когда открыл Оперу и IE 9 увидел тихий ужас особенно в IE, а поскольку, к сожалению IE - один из самых популярных браузеров приходится с ним считаться. Итак, три проблемы: 1) В разных браузерах по-разному располагаются блоки 2) Надпись "Евро" не влазит и переносится на другую строку 3) Поле "Цена" располагается выше относительно других полей. Скриншоты В ФФ отображается так, как я того хочу. Не влазит только "евро", когда пытаюсь экспериментировать с шириной div'а, поле для текста в опере то становится на место, то нет. Также, иногда радиокнопки становятся в столбик...И цена как-то криво стоит Скриншот из FF Скриншот из Opera Скриншот из IE ссылка: http://boogis.com/sort Код формы: <div class="sort_main" align="center"> <form name='frm' action='{%$settings.patch%}sort/?' method='GET' style="margin-bottom:0px;"> <!--Выбор региона--> <div class="sort_category"> <fieldset class='field_sort' id="sfield_category"><legend>{%$locale.17%}</legend> <select size='1' name='cat_id' style="width:300px"> <option value='' >{%$locale.693%}</option> {%$category_select%} </select> </fieldset> </div> <!--Выбор региона--> <!--Выбор категории--> <div class="sort_region"> <fieldset class='field_sort' id="sfield_region"><legend>{%$locale.16%}</legend> <select size='1' name='region_id' style="width:150px"> <option value='' >{%$locale.9%}</option> {%$region_select%} </select> </fieldset> </div> <!--Выбор категории--> <!--Отбор по цене--> <div class="sort_price"> <fieldset class='field_sort' id="sfield_price"><legend>{%$locale.2001%}</legend> <select size='1' name='cond_f_1'> <option {%if $smarty.get.$sid == 'eq'%}selected{%/if%} value='eq'>{%$locale.206%}</option> <option {%if $smarty.get.$sid == 'over'%}selected{%/if%} value='over'>{%$locale.207%}</option> <option {%if $smarty.get.$sid == 'less'%}selected{%/if%} value='less'>{%$locale.208%}</option> </select> <input name='f_1' type='text' value='{%$default%}' size='30' maxlength="20" style="width:80px"> </div > <!--Отбор по цене--> <!--Выбор валюты--> <div class="sort_currency"> {%assign var="id" value=f_2%}{%*здесь вставляем идентификатор поля*%} {%assign var="field" value=`$fields.f_2`%} {%assign var="default" value=`$smarty.get.$id`%} <fieldset class='field_sort' id='sfield_curr'> <legend>{%$field.name%}</legend> <input name='{%$id%}' id='{%$locale.2010%}' type='radio' value=''><label for="{%$locale.2010%}"> {%$locale.2010%}</label> {%foreach from=$field.values_array item='vl' key='k'%} <input name='{%$id%}' id='{%$vl%}' {%if $default == $k && $default != ""%} checked {%/if%} type='radio' value='{%$k%}'><label for="{%$vl%}"> {%$vl%}</label> {%/foreach%} </div> <!--Выбор валюты--> <!--Поле текста--> <div class="sort_text" align="left"> <fieldset class='field_sort' id="sfield_text"> <legend>{%$locale.74%}</legend> <input name='text' type='text' value='{%$smarty.get.text%}' maxlength="50" style="width:100%"> </fieldset> </div> <!--Поле текста--> <!--Должно присутствовать--> <div class="sort_photo-pricelist"> <fieldset class='field_sort' id="sfield_photo-pricelist"><legend>{%$locale.202%}:</legend> <input name='must[]' type='checkbox' {%foreach from=$smarty.get.must item='m'%}{%if $m == "f_6"%} checked {%/if%}{%/foreach%} value='f_6' style="vertical-align: middle" > {%$locale.2006%}<br /> <input name='must[]' type='checkbox' {%foreach from=$smarty.get.must item='m'%}{%if $m == "f_5"%} checked {%/if%}{%/foreach%} value='f_5' style="vertical-align: middle"> {%$locale.2007%}<br /> </fieldset> </div> <!--Должно присутствовать--> <!--Сортировка цена-время --> <div class="sort_price-date"> <fieldset class='field_sort' id="sfield_price-date"><legend>{%$locale.2008%}:</legend> <input name='sort_by' {%if $smarty.get.sort_by == 'date_add'%}checked{%/if%} type='radio' value='date_add' style="vertical-align: text-bottom"> {%$locale.2003%}<br /> <input name='sort_by' type='radio' value='f_1' {%if $smarty.get.sort_by == "f_1"%}checked{%/if%} style="vertical-align: text-bottom"> {%$locale.2002%}<br /> <br /> <input name='desc' {%if $smarty.get.desc != ""%}checked{%/if%} type='checkbox' value='yes' style="vertical-align: middle"> {%$locale.205%} </fieldset> </div> <!--Сортировка цена-время --> <!--Кнопка --> <div class="sort_start" align="center"> <input type='submit' value='{%$locale.203%}' style='cursor:pointer; margin: 0 5 5 5; width:90px; padding:1' > </div> <!--Кнопка --> </form> </div> CSS: div.sort_main{ background:none; border:0px; margin-bottom:10px; margin-top:10px; width:70%; min-width:800px; } fieldset { border:0px; font-size:11px; text-align:left; } fieldset legend { font-size:12px; font-family:Arial,Verdana,Tahoma; font-weight:bold; color:#000080; } fieldset input, fieldset select { font-size:11px; } div.sort_category{ float:left; width:300px; margin:5px; } div.sort_region{ float:left; width:150px; margin:5px; } div.sort_price{ float:left; } div.sort_photo-pricelist{ float:left; }

Спасибо за совет. Но при использовании width или min-width блок будет оставаться определённого размера. а если сделать так, чтобы контейнер с фотками "сползал" вниз (также, как и сейчас), но чтобы он смещал вниз все контейнеры, которые находятся под ним?

Знаю вопорс элементарный и ответ наверняка есть на форуме. Но поскольку я только-только начал осваивать css, то большинство ответов, которые я нашёл, мне не понятны, а готовые решения мне не нужны - хочу сам научиться. Читал описание позиционирования элементов на этом сайте, но отличия очень смутно понимаю. Поэтому решил создать новую тему. Имеется вот такая беда: HTML: <div class="mes_body"> <div> <div class="mes_info"> Текст левой колонки <div class="price"> Цена находится под текстом слева </div> </div> <!--Фото, тут код не убирал, чтобы не убрать ничего лишнего--> <div class="mes_photo"> {%if $message.fields.i|@count > 0%} <div align="center"> Нажмите на фото, чтобы увеличить<br /> <div class='otherimages'> {%foreach from=$message.fields.i item='image' key='key'%} <a class="zoom" rel="group{%$message.id%}" title="{%$image.name%}" href="{%$settings.patch%}uploads/images/tb/{%$image.value%}"><img style='vertical-align: middle;' src="{%$settings.patch%}uploads/images/ts/{%$image.value%}" title="{%$message.title%} - {%$image.name%}" alt="{%$image.name%}" border="0"></a> {%/foreach%} <br /><font color="#D6DAE1" size="2px">Текст под фоткой</font> </div> </div> {%/if%} </div> <!--Конец фото--> </div> <!--Текст объявления--> <div class="mes_text">{%$message.text%}</div> <!--Текст объявления конец--> <div> <p class="contact">Связаться с автором объявления:</p> Блок находится под текстом сообщения, слева </div> <p class='social'>Добавьте объявление в соц. сети и закладки:</p> скрипт соц кнопок </div> CSS: div.mes_body { background:none; } div.mes_info { text-align:left; margin-top:20px; margin-bottom:20px; float:left; height:140px; } div.mes_photo { height:140px; margin-bottom:1px; margin-left:1px; } div.price { width:200px; font-size:14px; text-align:center; border: 1px dotted #F30; padding:10px; margin-top:10px; } div.mes_text { width:100%; text-align:left; font-size:12px; margin-top:20px; padding:10px; } p.contact { font-size:14px; font-weight:bold; margin-top:15px; margin-bottom:5px; } div.otherimages { margin:3px; padding:3px; } div.otherimages img { margin:3px; } .social { font-weight:bold; color:#228B22; margin-top:15px; margin-bottom:5px; } на моём разрешении, в полный размер окна всё отображается хорошо: http://clip2net.com/s/1605B А вот на другом разрешении или если просто уменьшить окно браузера фото наползает на всё остальное: http://clip2net.com/s/1605S Помогите, пожалуйста, разобраться где моя ошибка. Пробовал позиционировать элементы по-разному (absolute, relative тд), но ничего хорошего из этого не вышло