Как видно на рисунке изображено два поля: первое это отображение в Фиревокс, а второе в Експролере. Проблемы следующие: 1. С левой стороны между текстом и текст боксом разное расстояние ! 2. С правой стороны между текст боксом и баттоном разное расстояние ! 3. Разница в размерах такст бокса в этих браузерах ! 4. В Експролере баттонон знахдится на несколько пикселов выше. (в сравнении у Фиревокс все нормально ! ) Помогите устранить следующие проблемы ! Выложите пожалуйста код. Как это сделать ?
Нечего не выходит ! Все равно на несколько пикселов все съезжает (Это Ужесс !!!) Докт упе задал ! Ну вроде все как должно быть ! А оно не выходит. Помогите ! P.S Hight - зубы режут ! Аааа г))
<!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"> <body> <!-- style="overflow-y: scroll;"--> <!--[if IE]> <style> #page-info { color: red; margin-top: 1px; } </style> <![endif]--> <!--[if lt IE 8]> <style> #page-info { color: red; margin-top: 1px; } </style> <![endif]--> <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; background: transparent; } :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } </style> <div align="center" style="border: 1px solid none; height: 125px; float: right; width: 100%; margin-top: 50px;"> <div align="center" style="border: 1px solid none; width: 100%; height: 25px; float: right;"> </div> <div align="right" style="border: 1px solid none; width: 260px; height: 25px; float: left; margin-top: 3px;"> <p>bzbzbzbzbzzbbzbz</p> </div> <div align="right" style="border: 1px solid none; width: 170px; height: 25px; float: left;"> <p style="margin-top: 3px;"> kzkzkzkzk: </p> </div> <div align="right" style="border: 1px solid white; width: 163px; height: 25px; float: left;"> <p><input type="text" size="22" /></p> </div> <div align="left" style="border: 1px solid white; width: 170px; height: 25px; float: left;"> <a href="#"><img src="bt.gif" id="page-info" /></a> <!--bt.gif - стандартное изображении кнопки button --> </div> </div> </body> </html> ВОт Мой код ! Вроде сделал работает нормально (идеально) только в Фирефоксе и Експлорере !!! А в Орере и Гугл Хроме не так как нужно ! Смотрите ! Нужно что бы во всех браузерах работало Идеально !
antonn, табличная верстка еще менее кроссбраузерна и еще с большим количеством костылей, нежели дивная.
Набросал по-быстрому то, что на скрине выше. Никаких проблем, одинаковые отступы и границы. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 14px; } #enform { background: #FFA620; margin: 3%; padding: 2%; text-align: center; } #enform .textfield { width: 200px; } </style> </head> <body> <div id="enform"> <form action="" method="post"> <span>Address:</span> <input type="text" name="address" class="textfield" /> <input type="submit" value="Go to" /> </form> </div> </body> </html>