Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Кроссбраузерный дизайн

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Помогите добится Кроссбраузернего дизайна
Поиск в теме | Версия для печати
Hameleon31
Отправлено: 10 Августа, 2011 - 20:40:33
Post Id


Новичок


Покинул форум
Сообщений всего: 10
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
Сверстал сайт http://sweb[dot]com[dot]ua , вроде во всех браузерах работает корректно, кроме любимого IE Улыбка, а именно версий ниже 8. Хотя в 7-ой версии все не так то плохо и выглядит:
Насколько я понял, не работает overflow: hidden и левый блок с контактами (Звоните, пишите, спрашивайте уезжает вниз)
Подскажите, пожалуйста, как добиться корректного вывода страницы от IE 6,7 ? Где можно найти список CSS свойств которые не понимает IE 6,7 ?
 
 Top
DeepVarvar Супермодератор
Отправлено: 10 Августа, 2011 - 21:47:37
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Hameleon31 пишет:
которые не понимает IE

Вы не правы.
Даже шестой все понимает, но... по своему..
Это то и надо учитывать..
На самом деле перелопачивать всю верстку мало кому захочется.
Поставьте вопрос более конкретно, вот мол тут и тут не могу справиться.
Приведите 10-20 строчек проблемного хтмл-куска.
Прикрепите css-кусок относящийся к этому хтмл.
 
 Top
Hameleon31
Отправлено: 10 Августа, 2011 - 22:14:57
Post Id


Новичок


Покинул форум
Сообщений всего: 10
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
DeepVarvar пишет:
Hameleon31 пишет:
которые не понимает IE

Вы не правы.
Даже шестой все понимает, но... по своему..
Это то и надо учитывать..
На самом деле перелопачивать всю верстку мало кому захочется.
Поставьте вопрос более конкретно, вот мол тут и тут не могу справиться.
Приведите 10-20 строчек проблемного хтмл-куска.
Прикрепите css-кусок относящийся к этому хтмл.


Да, я с вами согласен. Некорректно поставил вопрос. Спасибо, что сообщили о моей ошибке! Насчет IE6: там я не знаю на что конкретно «тыкать пальцем» сайт весь разбросан по окну, нету фона и т.д.
Насчет IE7:
Вот HTML код:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <div id="left">
  3. <div id="sub"></div>
  4. <div id="phone">
  5. <a href="http://smartweb.com.ua/contacts">Звоните:</a><br>
  6.                         <span class="skype_pnh_print_container">number phone</span><span class="skype_pnh_container" dir="ltr" tabindex="-1"><span class="skype_pnh_mark"></span></span>
  7. </div>
  8. <div id="email">
  9.         <a href="http://smartweb.com.ua/contacts">Пишите:</a><br>info@sweb.com.ua</div>
  10. <div id="ask">Спрашивайте</div>
  11. </div>
  12.  

В нем после <div id="sub"></div> блоки <div id="phone"></div><div id="email"></div> смещаются вниз на страницы поверх футера, как сделать так чтобы они были сразу после <div id="sub"></div>?
Вот СSS код:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. div#left {
  3. float: left;
  4. width: 170px;
  5. }
  6.  
  7. div#sub {
  8. background: url(../../img/default/sub.png) left top no-repeat;
  9. height: 235px;
  10. width: 170px;
  11. float: left;
  12. padding-left: 10px;
  13. margin-bottom: 30px;
  14. }
  15.  
  16. div#sub p#title {
  17. color: #ff331c;
  18. font: 15px Arial, serif;
  19. }
  20.  
  21. div#sub a {
  22. font: 14px Arial, serif;
  23. color: #020202;
  24. text-decoration: none;
  25. }
  26.  
  27. div#sub a:hover {
  28. text-decoration: underline;
  29. }
  30.  
  31. div#phone, div#email{
  32. height: 35px;
  33. width: 135px;
  34. color: #ff331c;
  35. font: 14px "Myriad Pro", Arial;
  36. }
  37.  
  38. div#phone a, div#email a, div#ask   {
  39. display: block;
  40. padding-left: 40px;
  41. width: 150px;
  42. color: #c5c5c5;
  43. font: 14px "Myriad Pro", Arial;
  44. text-decoration: none;
  45. }
  46.  
  47. div#phone {
  48. margin: 250px 0 0 10px;
  49. background: url(../../img/default/phone.png) center left no-repeat;
  50. }
  51.  
  52. div#email {
  53. margin: 50px 0 0 10px;
  54. background: url(../../img/default/email.png) center left no-repeat;
  55. }
  56.  
  57. div#ask {
  58. margin: 30px 0 0 10px;
  59. }
  60.  

И еще вопросик:
На главной странице я сделал, что-то типа анимации на JQUERY
Блоки которые двигаются (WEB программирование, Ваша идея, продвижение сайта и т.д.) размещены в div#image и для которого прописано свойство overflow: hidden; Но при «выезжании» этих блоков (WEB программирование, Ваша идея, продвижение сайта и т.д за границы div#image они не скрываются в IE7,6
 
 Top
DeepVarvar Супермодератор
Отправлено: 10 Августа, 2011 - 22:23:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
по порядку что увидел сразу:

1. ИЕ6 - не умеет повторять фон, позиционировать умеет.
2. ИЕ6,ИЕ7 - если у родителя указан text-align: center - margin: 0 auto; у ребенка работает совсем не так, как ожидается.
3. Вне зависимости от браузера, когда вы отплясываете с float: left/right обязательно всегда после места с плясками пишите пустой див clear: both; даже если пляски происходили внутри некоего блока, вот перед самым закрытием этого блока ставьте "очищающий".
 
 Top
join
Отправлено: 10 Августа, 2011 - 22:43:01
Post Id



Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Февр. 2011  


Помог: 1 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. div#image {
  2.         margin: 10px auto;
  3.         width: 400px;
  4.         height: 240px;
  5.         font: bold 16px Verdana, serif;
  6.         overflow: hidden;
  7.         position:relative
  8. }


поставьте position:relative


-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 Top
Hameleon31
Отправлено: 10 Августа, 2011 - 22:57:38
Post Id


Новичок


Покинул форум
Сообщений всего: 10
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
join пишет:
CODE (html):
скопировать код в буфер обмена
  1. div#image {
  2.         margin: 10px auto;
  3.         width: 400px;
  4.         height: 240px;
  5.         font: bold 16px Verdana, serif;
  6.         overflow: hidden;
  7.         position:relative
  8. }


поставьте position:relative


Благодарю!! Помогло! Улыбка
(Добавление)
DeepVarvar пишет:
по порядку что увидел сразу:

1. ИЕ6 - не умеет повторять фон, позиционировать умеет.
2. ИЕ6,ИЕ7 - если у родителя указан text-align: center - margin: 0 auto; у ребенка работает совсем не так, как ожидается.
3. Вне зависимости от браузера, когда вы отплясываете с float: left/right обязательно всегда после места с плясками пишите пустой див clear: both; даже если пляски происходили внутри некоего блока, вот перед самым закрытием этого блока ставьте "очищающий".


Окей учту с float. Но у меня есть div.clear (clear:both;)
Если я работаю с этим дивом то блоки которые стоят полсе него опускаются вниз родителя Недовольство, огорчение Как боротся с этим? Например сейчас в IE 7 все отображается почти корректно, но
<div id="phone"></div>
<div id="email"></div>
Отображаются в внизу <div id="left"></div>, потому, что перед ними стоит clear:both; Недовольство, огорчение
 
 Top
join
Отправлено: 10 Августа, 2011 - 23:02:31
Post Id



Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Февр. 2011  


Помог: 1 раз(а)
CSS:
CODE (html):
скопировать код в буфер обмена
  1. #ie7 #phone{ margin-top:-30px; }
  2.  



Также поставьте после тега body этот коммент
html:
CODE (html):
скопировать код в буфер обмена
  1. </head><body>
  2. <!--[if IE 7]><div id="ie7"><![endif]-->
  3. <div id="upbg"></div>


________________________________ _________________

1
padding: 0 auto; - фтопку! ( это ничего не даёт вроде )

пардон ))

ps: под ИЕ6 , уже не верстают. Майкрософт в прошлом году перестал поддерживать ИЕ6 и ИЕ7....

(Отредактировано автором: 10 Августа, 2011 - 23:12:43)



-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 Top
Hameleon31
Отправлено: 10 Августа, 2011 - 23:11:10
Post Id


Новичок


Покинул форум
Сообщений всего: 10
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
join пишет:
CSS:
CODE (html):
скопировать код в буфер обмена
  1. #ie7 #phone{ margin-top:-30px; }
  2.  



Также поставьте перед тегом body этот коммент
html:
CODE (html):
скопировать код в буфер обмена
  1. <!--[if IE 7]><div id="ie7"><![endif]-->


________________________________ _________________

1
padding: 0 auto; - фтопку! ( это ничего не даёт вроде )

пардон ))

ps: под ИЕ6 , уже не верстают. Майкрософт в прошлом году перестал поддерживать ИЕ6 и ИЕ7....


Это не еденичный случай Недовольство, огорчение
Если после <div class="title"></div> тоже поставить clear, то тогда контент главной опускается вниз. Это я, что-то нахимичел в коде или так визде надо юзать отрицатильные margin ?
 
 Top
join
Отправлено: 10 Августа, 2011 - 23:16:31
Post Id



Гость


Покинул форум
Сообщений всего: 91
Дата рег-ции: Февр. 2011  


Помог: 1 раз(а)
Hameleon31 пишет:
Это не еденичный случай
Если после <div class="title"></div> тоже поставить clear, то тогда контент главной опускается вниз. Это я, что-то нахимичел в коде или так визде надо юзать отрицатильные margin ?


как вариант - использовать отрицательный маргин,
кто как умеет так и делает.


-----
- "Holy shit!" -девиз Холливуда
- "Hello world " -девиз PhP
 
 Top
Hameleon31
Отправлено: 10 Августа, 2011 - 23:20:09
Post Id


Новичок


Покинул форум
Сообщений всего: 10
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
join пишет:
Hameleon31 пишет:
Это не еденичный случай
Если после <div class="title"></div> тоже поставить clear, то тогда контент главной опускается вниз. Это я, что-то нахимичел в коде или так визде надо юзать отрицатильные margin ?


как вариант - использовать отрицательный маргин,
кто как умеет так и делает.


Ясно! Благодарен вам за помощь!!
 
 Top
DeepVarvar Супермодератор
Отправлено: 10 Августа, 2011 - 23:25:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)
Чистить не после каждого флоата, а после группы флоатов и зависимых от них, один раз, в конце.
Чтобы дальше ехать как будто флоатов и не было.
CODE (html):
скопировать код в буфер обмена
  1. <div id="a">
  2.   <div style="width: 20px; height: 30px; float: left;"></div>
  3.   <div style="width: 20px; height: 30px; float: left;"></div>
  4.   <div style="width: 20px; height: 30px; float: left;"></div>
  5.   <div style="width: 20px; height: 30px; float: left;"></div>
  6.   <div style="width: 20px; height: 30px; float: left;"></div>
  7.   <div style="width: 20px; height: 30px; float: left;"></div>
  8.   <div style="width: 20px; height: 30px; float: left;"></div>
  9.   <div style="clear: both;"></div>
  10. </div>
  11.  
  12. <div id="b">
  13.   <div style="width: 20px; height: 30px; float: left;">левый</div>
  14.   <div style="width: 20px; height: 30px; float: right;">правый</div>
  15.   <div style="margin-left: 20px; margin-right: 20px">меж ними</div>
  16.   <div style="clear: both;"></div>
  17. </div>

(Добавление)
тогда отрицательных маргинов не будет
 
 Top
Hameleon31
Отправлено: 10 Августа, 2011 - 23:38:38
Post Id


Новичок


Покинул форум
Сообщений всего: 10
Дата рег-ции: Авг. 2011  


Помог: 0 раз(а)
DeepVarvar пишет:
Чистить не после каждого флоата, а после группы флоатов и зависимых от них, один раз, в конце.
Чтобы дальше ехать как будто флоатов и не было.
CODE (html):
скопировать код в буфер обмена
  1. <div id="a">
  2.   <div style="width: 20px; height: 30px; float: left;"></div>
  3.   <div style="width: 20px; height: 30px; float: left;"></div>
  4.   <div style="width: 20px; height: 30px; float: left;"></div>
  5.   <div style="width: 20px; height: 30px; float: left;"></div>
  6.   <div style="width: 20px; height: 30px; float: left;"></div>
  7.   <div style="width: 20px; height: 30px; float: left;"></div>
  8.   <div style="width: 20px; height: 30px; float: left;"></div>
  9.   <div style="clear: both;"></div>
  10. </div>
  11. Понятно, очень благодарен всем за помощь!
  12. <!--[if lt IE 7]>
  13. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
  14. <![endif]-->
  15. <!--[if IE 7]> Подключил еще такой вот код, вроде более-менее нормально выводит  ::rolleyes24.gif::
  16. <div id="b">
  17.  <div style="width: 20px; height: 30px; float: left;">левый</div>
  18.  <div style="width: 20px; height: 30px; float: right;">правый</div>
  19.  <div style="margin-left: 20px; margin-right: 20px">меж ними</div>
  20.  <div style="clear: both;"></div>
  21. </div>

(Добавление)
тогда отрицательных маргинов не будет
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB