Проблема с Float в IE8 и с Margin: 0 auto; в общем.

[hk416]

Добрый день уважаемые дамы и господа. В общем учусь и набираюсь опыта в этом нелегком деле, и потихоньку делаю сайт. В общем на сайте на странице регистрации все нормально работает, но только не в IE, там почему то все Дивы берут и превращаются в лестницу, посмотрите пожалуйсто http://redsealtd.ru/?page=register Подскажите плизз что нужно написать в условных комментариях в таблице стилей для IE, что бы все показывалось как и Хроме и Мозилле.

В общем если вы не возражаете, с вашего позволения задам 2 вопрос. В общем меню сверху хотел задать margin: 10px auto; что бы слева и справа был одинаковый отступ, что бы в общем меню было по центру. Вроде как дизайнеры так делаю. и по логике это должно работать, но у меня что то не хочет. Подскажите пожалуйсто, что не так в дизайне что это дело не работает.

[Vadimka]

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

<ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  <li><a href="#">Ссылка 4</a></li>
</ul>

а не списком дивов

<div>
  <div><a href="#">Ссылка 1</a></div>
  <div><a href="#">Ссылка 2</a></div>
  <div><a href="#">Ссылка 3</a></div>
  <div><a href="#">Ссылка 4</a></div>
</div>

родительскому ul {overflov: hidden; margin: 0 auto;} дабы он видел плавающие элементы с float и не выкидывал их за границы

li в свою очередь float: left; display: block и будет горизонтальный список. если я не правильно понял, объясните подробнее

и ещё, если вы про выравнивание div в котором меню с margin: 0 20%; то он у вас по центру не ровняется потому что вы ему ширину не задали, margin: 0 auto; width: 990px; и всё ок. пробуйте

[hk416]

  On 12/13/2012 at 11:50 AM, Vadimka said:

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

<ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  <li><a href="#">Ссылка 4</a></li>
</ul>

а не списком дивов

<div>
  <div><a href="#">Ссылка 1</a></div>
  <div><a href="#">Ссылка 2</a></div>
  <div><a href="#">Ссылка 3</a></div>
  <div><a href="#">Ссылка 4</a></div>
</div>

родительскому ul {overflov: hidden; margin: 0 auto;} дабы он видел плавающие элементы с float и не выкидывал их за границы

li в свою очередь float: left; display: block и будет горизонтальный список. если я не правильно понял, объясните подробнее

и ещё, если вы про выравнивание div в котором меню с margin: 0 20%; то он у вас по центру не ровняется потому что вы ему ширину не задали, margin: 0 auto; width: 990px; и всё ок. пробуйте

margin: 0 auto; width: 990px; Попробовал, понял свою ошибку, все получилось, за это спасибо, один вопрос уже решил. По поводу Списка, я знаю что спецы менюшки делают списками, просто я пытался сделать списком, но не смог с помощmю стилей сделать нормальное меню, но конечно можно ещё раз попробовать поковырять. Но перейду снова к 1 важному вопросу, в общем на сайте есть регистрация,я как раз кинул страницу этой регистрации. Просто вы можете посмотреть как эта страница выгляди в Хроме и Мозилле, и как она выглядит В IE. Говоря техническим языком там стоит рядом, 2 дива, даже не 2 а 3, они должны стоять параллельно но одной высоте. Но из-за IE они тупа превращаются в лестницу (( Конкретизирую это дивы #left-side1 #content1 , 3 див который с ними образует лестницу это #left-side, в общем черт возьми не знаю что делать, подскажите плиз что писать. Дивы #left-side1 #content1 лежат вместе в оберточном диве #content.

[Vadimka]

есть такая замечательная клавиша F12 )) в хроме, в IE, в мозиле если firebug установить)) показывает код, и при клике по тегу его Css свойства, вот в IE у вас у div стоят Float, внутри легово <form> у которого width: 100% и он растягивается не по ширине блока родителя а по ширине всего окна, плюс к тому же у вас всё в процентах, попробуйте задайте блоку родителю position: relative и тоже самое form внутри этого блока. я бы конкретно сказал в чём проблема, но увы я не на работе уже, там место рабочее удобнее, мог бы всё протестировать.

[hk416]

  On 12/13/2012 at 3:15 PM, Vadimka said:

есть такая замечательная клавиша F12 )) в хроме, в IE, в мозиле если firebug установить)) показывает код, и при клике по тегу его Css свойства, вот в IE у вас у div стоят Float, внутри легово <form> у которого width: 100% и он растягивается не по ширине блока родителя а по ширине всего окна, плюс к тому же у вас всё в процентах, попробуйте задайте блоку родителю position: relative и тоже самое form внутри этого блока. я бы конкретно сказал в чём проблема, но увы я не на работе уже, там место рабочее удобнее, мог бы всё протестировать.

Благодарю вас за помощь ))) про замечательные плагины ФаерБаг, а ещё и Веб девелопер я уже пол года знаю и плотно пользуюсь, без них наверное было бы, страшно себе представить что. Но прикол такой что я написал в теории все верно, но в IE не работает, и я даже не знаю с чем это связано. В общем, если вам не трудно, найдите плиз в чем там дело. Самое смешное что я не проф верстальщик, а только программист, но в РФ я понял нужны программисты которые должны уметь и верстать, причем хорошо.

Edited December 13, 2012 by hk416

[hk416]

  On 12/13/2012 at 3:15 PM, Vadimka said:

есть такая замечательная клавиша F12 )) в хроме, в IE, в мозиле если firebug установить)) показывает код, и при клике по тегу его Css свойства, вот в IE у вас у div стоят Float, внутри легово <form> у которого width: 100% и он растягивается не по ширине блока родителя а по ширине всего окна, плюс к тому же у вас всё в процентах, попробуйте задайте блоку родителю position: relative и тоже самое form внутри этого блока. я бы конкретно сказал в чём проблема, но увы я не на работе уже, там место рабочее удобнее, мог бы всё протестировать.

Огромнейшее вам спасибо, в общем покопался и действительно нашел ошибку с тегом Form,и все исправил все заработало. Огромное вам спасибо. но хотелось бы у вас узнать есть ли ещё какие нибудь вещи на сайте которые профи бы исправил бы???

[Vadimka]

не любитель разбираться в чужих кодах, по мне проще с нуля сделать. ну мне вот например непонятна немного структура сайта div left-side и right, что в них будет? ато пустые висят. не любитель я процентных значений размеров. по мне так лучше в px всё делать, тут правда дело вкуса кто в чем лучше делает. и поработать советую над кроссбраузерностью. вот процентные размеры дают о себе знать при масштабирование, блок в котором форма и текст Введите поле, при масштабирование между ними появляется белая полоса, это только при масштабирование, при нормальном просмотре на любых экранах её не будет но как небольшой мозолящий глаз минус мешает. а так ...прикинул бы на бумаге структуру тегов, если трудно представить как что должно быть.

[hk416]

  On 12/14/2012 at 9:58 AM, Vadimka said:

не любитель разбираться в чужих кодах, по мне проще с нуля сделать. ну мне вот например непонятна немного структура сайта div left-side и right, что в них будет? ато пустые висят. не любитель я процентных значений размеров. по мне так лучше в px всё делать, тут правда дело вкуса кто в чем лучше делает. и поработать советую над кроссбраузерностью. вот процентные размеры дают о себе знать при масштабирование, блок в котором форма и текст Введите поле, при масштабирование между ними появляется белая полоса, это только при масштабирование, при нормальном просмотре на любых экранах её не будет но как небольшой мозолящий глаз минус мешает. а так ...прикинул бы на бумаге структуру тегов, если трудно представить как что должно быть.

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

[Vadimka]

css2, можешь сделать картинку по центру и чтоюы она не повторялась, плюс можно сделать ещё позиционирование фиксированым, крути не крути скрол-она на месте. css3 - можно масштабировать фон

[hk416]

  On 12/14/2012 at 3:11 PM, Vadimka said:

css2, можешь сделать картинку по центру и чтоюы она не повторялась, плюс можно сделать ещё позиционирование фиксированым, крути не крути скрол-она на месте. css3 - можно масштабировать фон

Благодарю. Снова хочу воспользоваться правилом margin:0 auto; для картинке в рамке, а что то не работает http://redsealtd.ru/?page=galeri, в чем снова дело? просветите пожалуйсто)))

#post_galeri {background: rgba(0,0,0,0.5); width: 20%; height:auto; margin: 20px; border-width: 2 px; border-style: solid; border-color: black; color: white; float: left;}
#img_galeri {margin:0 auto; height:100px; width:100px;}

Edited December 14, 2012 by hk416

[Vadimka]

margin: 0 auto; работает для блочных элементов, в вашем случае картинка это строчный элемент, либо обернуть её в контейнер (у вас она в теге а, он может быть контейнером), и контейнер должен быть блочным, если тег а то display: block; и его через марджин выровнить, или проще, блоку родителю text-align: center, и она будет по центру, но текст под картинкой тоже, выбирайте удобный способ, либо картинка в блочном контейнере, либо text-align:center, но текст в контейнер с выравниванием по левому краю

[hk416]

  On 12/15/2012 at 12:23 PM, Vadimka said:

margin: 0 auto; работает для блочных элементов, в вашем случае картинка это строчный элемент, либо обернуть её в контейнер (у вас она в теге а, он может быть контейнером), и контейнер должен быть блочным, если тег а то display: block; и его через марджин выровнить, или проще, блоку родителю text-align: center, и она будет по центру, но текст под картинкой тоже, выбирайте удобный способ, либо картинка в блочном контейнере, либо text-align:center, но текст в контейнер с выравниванием по левому краю

Огромнейшее спасибо)))) Сделал, выровнял ))))