Tohin

По ночам надо спать! Извините....

Есть список, в каждом элементе списка от 2 div которые содержат картинки разной ширины 452 и 215 пикселей. Div должны располагаться в линию с заданными отступам по 10 пикселей. Соответственно, я рассчитываю, что ширина элемента списка будет (10+452+10)+(10+215+10) =707 пикселей. Выглядеть должно примерно так http://jsfiddle.net/8b4dso7L/3/ , но это работает только при ширине родительского элемента не менее 711 пикселей. при задании ширины родительского элемента в 707px верстка съезжает http://jsfiddle.net/k9j1gbsp/3/ В чем я туплю? Откуда еще 4 пикселя?

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

То есть линия div, внутри еще два div'а, внутри label и внутри label'а input/select? Как-то кучеряво выходит.... И у меня заставить это заработать не получилось... Может table?

Пример кода http://jsfiddle.net/FkWuR/ Никак не могу справится с разметкой. чуствую изначально пошел не в ту сторону, а теперь глаз замылился, вот и туплю. В идеале должно быть так: В Хроме 16, IE 8, Opera8.54 отображается примерно так как хочется. В ИЕ7 все идет столбиком. В FF поле E-mail сползает вниз. Андроидный браузер переносит поле Тема на новую строку... HTML <div class="feedback"> <form class="content2" method="post" action="index.php?id=8"> <input name="formid" value="feedbackForm" type="hidden"> <p><label accesskey="n">Имя*<input name="Name" size="20" maxlength="60" type="text"></label></p> <p><label accesskey="f">Фамилия<input name="Surname" size="20" maxlength="60" type="text"></label></p> <p><label accesskey="e">E-mail*<input name="email" size="20" maxlength="40" type="text"></label></p> <p><label accesskey="s">Тема*<select name="subject"> <option selected="selected" value="Запрос поддержки">Вопрос</option> <option value="Проблемы с сайтом">Замечания по работе сайта</option> <option value="Общие вопросы">Общие вопросы</option> </select></label></p> <p><label accesskey="c">Текст письма <textarea cols="40" rows="10" name="comments"></textarea></label></p> <p class="break">Пожалуйста введите код (чтобы предупредить спам):</p> <p class="line"> <img src="index.php_files/veriword.jpg" alt="verification code"> <input name="vericode" size="20" type="text"> <input id="sbmt" name="submit" value="Отправить" type="submit"></p> </form> </div> CSS .feedback {width: 600px;color: #999;padding-bottom:30px; margin: 50px 0 0 50px} .feedback, .feedback input, .feedback select, .feedback textarea {border: solid 1px #999;} .feedback input, .feedback select, .feedback textarea, p.break {display:block; margin-bottom:5px;} .feedback textarea {width:540px;} .feedback p {display: inline-block; margin:5px 30px 0} .line img, .line input {display: inline; margin: 0 20px;} #sbmt {background: none repeat scroll 0 0 black; color: white;}

Без него картинки вылезают за пределы дива... Но мысль интересная. Буду тестить. UPD: Я конечно идиот, а Влад видимо постеснялся мне о этом сказать. Все параметры перенесены в CSS проблема решена.

После передышки помог дядя Гугль. Ссылка на ресурс: http://www.w3schools.com/TAGS/att_img_hspace.asp Решение найдено: В теге img пишем style="margin:0px 50px" работает пытаюсь вкрутить в css, но не выходит. пишу div.contacts a img { margin:0px 5px; } Превьюшка в дримвавере показывает правильно, а внешние браузеры фигу...

Обычно всегда спаршиваю у Гугла.. Но тут впал в ступор... Помогите, кто чем может, а то мозг сейчас через уши вытечет.... HTML (работает в ИЕ, но в Опере все картинки склеиваются, выглядит убого): <div class="contacts"> <a href="link"><img src="pic/home.gif" alt="Home_site" width="11" height="9" hspace="5" align="left"/></a> <a href="index.php?id=100"><img src="pic/map.gif" alt="Карта сайта" width="11" height="9" hspace="5" align="left"/></a> <a href="mailto:email@kremlin.ru"><img src="pic/mail.gif" alt="E-mail" width="10" height="9" hspace="5" align="left"/></a> <a href="/index.php?id=63"><img src="pic/rus_cz.gif" width="38" height="9" hspace="5" align="left" alt="Český" /></a></div> Css .contacts { position: absolute; width:156px; height:9 px; top:40px; right:0px; display: inline; white-space: nowrap; } .contacts a img { /*тут пробовал и только "а" и маргин, результата нет*/ padding-right: 5px; padding-left: 5px; } Валидацию xHTML 1.0 Transitional вроде прохожу без замечаний. В фаерфоксе код еще не тестил. В хтмл переносы строки понаставил для удобочитаемости.