Jump to content
  • 0

И снова css + IE

Lana_M

Asked by Lana_M,

 Share

Question

Lana_M Explorer

Lana_M

Posted
Posted 

<style type="text/css">

#container {
margin-top: 20px;
margin-right:15px;
margin-left:10px;
width: 800px; /* Ширина слоя */
background: url(http://mediapro.com.ua/economist/magazine/fon_snow.gif ) no-repeat left top;
 }

#otstup1 {
position: relative;
width: 470px; /* Ширина слоя */
margin-right: 450px;
 }

#otstup2 {
position: relative;
width: 400px; /* Ширина слоя */
margin-right: 325px;
 }

#otstup3 {
position: relative;
width: 770px; /* Ширина слоя */
margin-right: -15px;
 }

</style>
</head>
<body>

<div id="container">
 <div id="otstup1">
<div style="text-align: center;"><span class="webpagetitlegreen">Дорогие друзья!</span>


<div style="text-align: justify;"><img vspace="5" hspace="5" align="left" src="/economist/images/oksana.jpg" style="width: 101px; height: 129px;" /><span class="newstext"><font size="2">Вот мы и подошли к очередному временному рубежу. Это самый удачный момент для того, чтобы подвести итоги, оценить свершения, внести маленькие коррективы в планы на будущий год — и вздохнуть с облегчением. Впереди — праздники! </font> Удивительное время: мы, взрослые, какими бы серьезными и практичными не были, становимся детьми и не стесняемся загадывать желания. И, самое главное, надеемся на их осуществление. </span>


 <span class="newstext"> </span>


</div>

<div id="otstup2">
<span class="newstext"> <div style="text-align: justify;">Наш коллектив поздравляет всех читателей «Справочника экономиста», уважаемых авторов и горячо любимых партнеров с Новым Годом и Рождеством Христовым! Наступающий год Крысы сулит успехи в финансовых делах. Дерзайте! И не забывайте, оставаясь с нами, делиться бесценным опытом, приобретенным на этом поприще. </span></div>
</div>


 <div id="otstup3">
<span class="newstext"> <div style="text-align: justify;">А мы, в свою очередь, расскажем о нем нашим читателям. Пусть воплощение ваших креативных идей способствует процветанию компании. Мы желаем, чтобы самые искренние, заветные желания сбывались, всему запланированному сопутствовал успех! Счастья, здоровья вам, любви, достатка и незабываемых впечатлений от волшебной новогодней ночи! </span></div> 


</div>

а выглядит сие великолепие следующим образом - http://mediapro.com.ua/economist/magazine/about_ny.php

И если в Мозилле/Опере все более ли менее нормально, то Эксплорер откуда-то берет огромнейший отступ справа. Помогите, пожалуйста, как убрать искомое белое поле.

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Lana_M Explorer

Lana_M

Posted
  • Author
Posted

Ммм... Простите, наверное, я не совсем корректно выразилась. В Мозилле/Опере я не вижу повода для беспокойства. Т.е., во всяком случае на моем разрешении (1280*1024) и на ряде меньших - все нормально. А вот в ИЕ - какие-то неполадки с #container. Во всяком случае, расстояние от края кажется мне минимум странным.

Link to comment
Share on other sites
  • 0
Lana_M Explorer

Lana_M

Posted
  • Author
Posted

Да верю-верю. Не впервой(((

Дело в том, что сам сайт стоит на CMS Битрикс, и, собственно, весь дизайн натягивался туда непонятно кем и не совсем удачно. По сути, даже заливка фона, если изображение больше 400 px, начинает растягивать header. Дабы обойти сие безобразие (т.к., ессно, картнка для мониторов с небольшим разрешением выглядит нормально, то на моем смотрится крайне... бедно), решила попробовать с подключением новых параметров в css. В первом варианте, до 

background: url(http://mediapro.com.ua/economist/magazine/fon_snow.gif ) no-repeat left top;

изображение в ИЕ (пресловутый контейнер) "уехало" от текста вправо. Задание фона в % тоже не помогло. Теперь вот думаю, каким макаром прописать расположение фонового рисунка...

Если честно, то просто не понимаю, почему такие эффекты.

Link to comment
Share on other sites
  • 0
Lana_M Explorer

Lana_M

Posted
  • Author
Posted

Угу. Направление пути я угадала с первых же дней работы нашего департамента с оным продуктом. Там не только так верстать, там еще и программировать так же надо. Кхм... Обходными путями.

Что же... набираюсь опыта. Товарищи, дамы и господа, по несчастью и просто сочувствующие.. подскажите чего путного. :)

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted

Да вс? там нормально. Просто надо задать блоку #container ширину, равную ширине фоновой картинки. То есть 800px. А в блоке #otstup1 установить margin-right:330px;.

P.S. Ещ? надо у #otstup2 и #otstup3 убрать или отредактировать ширину и margin. Они ведь находятся внутри #otstup1. :)

Link to comment
Share on other sites
  • 0
Lana_M Explorer

Lana_M

Posted
  • Author
Posted

Кхм... решила я в Опере просмотреть несчастное поделие, т.е. доставшийся нам сайт. Біла крайне удивлена. Отступы справа в этом браузере на величину где-то так 300 пх - дело рук компании, которая этот дизайн натянула. Мрачно.

  Quote
То есть 800px. А в блоке #otstup1 установить margin-right:330px;.

yopopt, спасибо за совет. Применила. К сожалению (увы, я ожидала, похожие параметры уже стояли), это не решило проблемы в ИЕ. Там как стояло "белое поле" справа, так и стоит. Интересно, какие считываются параметры страницы. Т.е., по поведению контейнера мне что-то подсказывает, что фиксированная ширина страницы там просто выставляется/берется откуда-то много больше привычной.

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

Link to comment
Share on other sites
  • 0
maddogrts Explorer

maddogrts

Posted
Posted

:))

Lana_M

Я не понимаю проблемы. У вас же есть шаблоны страниц. комментируйте, выявите проблемный участок. Я думаю, вы сами найдете. То, что вы предлагаете сделать нам :))), у меня лично даже желания нет.

У меня была похожая проблема, что бы найти ошибку понадобилось всего 1час, а сайт был побольше вашего. И тоже достался в наследство.

Вначале комментируйте css файлы, чтобы узнать какие фрагменты вызывают данный глюк, потом шаблон HTML (tpl) .

когда найдете и не сможете исправить пишите. А то получается так вот вам сайт, найдите мне, как исправить глюк. Локализация нужна

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted
  Lana_M said:
Кхм... решила я в Опере просмотреть несчастное поделие, т.е. доставшийся нам сайт. Біла крайне удивлена. Отступы справа в этом браузере на величину где-то так 300 пх - дело рук компании, которая этот дизайн натянула. Мрачно.
  Quote
То есть 800px. А в блоке #otstup1 установить margin-right:330px;.

yopopt, спасибо за совет. Применила. К сожалению (увы, я ожидала, похожие параметры уже стояли), это не решило проблемы в ИЕ. Там как стояло "белое поле" справа, так и стоит. Интересно, какие считываются параметры страницы. Т.е., по поведению контейнера мне что-то подсказывает, что фиксированная ширина страницы там просто выставляется/берется откуда-то много больше привычной.

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

Почитайте P.S. к моему предыдущему посту. У Вас появляется отступ в основном из-за блока #otstup3. Так-как он шириной в 780px он раздвигает до этой ширины родительский элемент #otstup1. Считаем: ширина #otstup3(780px) + отступ #otstup1(330px) = большое белое пространство справа. :)

Link to comment
Share on other sites
  • 0
Lana_M Explorer

Lana_M

Posted
  • Author
Posted

maddogrts Боже упаси... чтобы я такое просила. Просто есть два пути - простой и сложный (сложный я знаю). А вот возможностями простого я как раз интересовалась.

Если бы мне было нужно чтобы за меня выискивали и комментировали css, а то и саму генерацию шаблонов разбирали (а в битриксе это осуществлено специфически), я бы так и попросила. Как минимум, у меня есть совесть. :|

  Quote
очитайте P.S. к моему предыдущему посту. У Вас появляется отступ в основном из-за блока #otstup3. Так-как он шириной в 780px он раздвигает до этой ширины родительский элемент #otstup1. Считаем: ширина #otstup3(780px) + отступ #otstup1(330px) = большое белое пространство справа. smile

Спасибо, Ваш совет я применила, но не так как надо было. Разобралась. Спасибо еще раз.

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted
  Lana_M said:
maddogrts Боже упаси... чтобы я такое просила. Просто есть два пути - простой и сложный (сложный я знаю). А вот возможностями простого я как раз интересовалась.

Если бы мне было нужно чтобы за меня выискивали и комментировали css, а то и саму генерацию шаблонов разбирали (а в битриксе это осуществлено специфически), я бы так и попросила. Как минимум, у меня есть совесть. :|

  Quote
очитайте P.S. к моему предыдущему посту. У Вас появляется отступ в основном из-за блока #otstup3. Так-как он шириной в 780px он раздвигает до этой ширины родительский элемент #otstup1. Считаем: ширина #otstup3(780px) + отступ #otstup1(330px) = большое белое пространство справа. smile

Спасибо, Ваш совет я применила, но не так как надо было. Разобралась. Спасибо еще раз.

Прочитайте внимательно и посчитайте, какой ширины у Вас получается ячейка. Эксперемента ради, удалите в #otstup1 margin. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept