Jump to content
  • 0

IE6 и background

Виноградов Александр

Asked by Виноградов Александр,

 Share

Question

Виноградов Александр Explorer

Виноградов Александр

Posted
Posted (edited)

Во всех браузерах, кроме IE 6 не работает позиционирование background по центру. Позиционирование слева или справа работает нормально, но по центру никак.

Код выгляди следующим образом:

<head>
<style>
div.style {

	background: url("img.jpg") left center repeat-x;
	height: 100%;
	width: 100%;

}
</style>
</head>
<body>
<div class = "style"></div>
</body>

Для проверки кода использую ietester. Может это его глюк?

Edited by Виноградов Александр
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
  Виноградов Александр said:
Во всех браузерах, кроме IE 6 не работает позиционирование background по центру. Позиционирование слева или справа работает нормально, но по центру никак.

Код выгляди следующим образом:

<head>
<style>
div.style {

	background: url("img.jpg") left center repeat-x;
	height: 100%;
	width: 100%;

}
</style>
</head>
<body>
<div class = "style"></div>
</body>

Для проверки кода использую ietester. Может это его глюк?

background: url("img.jpg") left center no-repeat;

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)
  Quote
background: url("img.jpg") left center no-repeat;

Да и с репитом тоже должно бы работать...

Виноградов Александр, а если в процентах задать?

background: url("img.jpg") repeat-x 50% 0;

И кстати - где доктайп?

Edited by mishka2
Link to comment
Share on other sites
  • 0
Виноградов Александр Explorer

Виноградов Александр

Posted
  • Author
Posted (edited)

Извини, сразу за опечатку. Там не репит - х должно быть. А no-repeat. Спасибо psywalker, не внимательно задал вопрос.

Но при no - repeat не хочет работать.

<!Doctype HTML Public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> доктайп тоже есть.

Просто может думаю ietester глючит. Мож у кого на виртуальной машине стоит IE 6 проверьте пожалуйста позиционирование бэкграудна по центру.

Edited by Виноградов Александр
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
  Виноградов Александр said:
Извини, сразу за опечатку. Там не репит - х должно быть. А no-repeat. Спасибо psywalker, не внимательно задал вопрос.

Но при no - repeat не хочет работать.

<!Doctype HTML Public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> доктайп тоже есть.

Просто может думаю ietester глючит. Мож у кого на виртуальной машине стоит IE 6 проверьте пожалуйста позиционирование бэкграудна по центру.

страницу давай свою

кстати заметил, у тя чё то пробелов до жопы не понятных везде, вот тут например смотри <div class = "style"></div>, между атрибутом и его значением, далее no - repeat такая же хрень, проверь, мож из за этого не пашет!

Edited by psywalker
Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
  Quote
left center
  Quote
И когда иногда, вдохновеньем бурля,

Он кричал: 'Заворачивай носом!

Носом влево, а корпусом -- право руля!' --

Что прикажете делать матросам?

(Л.Кэррол, "Охота на Снарка", пер. Григория Кружкова)

Link to comment
Share on other sites
  • 0
Виноградов Александр Explorer

Виноградов Александр

Posted
  • Author
Posted 

<!Doctype HTML Public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>

#menu 
{
	background: url("img/menu.jpg") left center no-repeat;
	margin-top: 50px;
}


</style>
</head>

<body>

<div id = "menu">
	<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>
		<li><a href = "#5">Филиальная сеть</a></li>
		<li><a href = "#6">Пресс-центр</a></li>
	</ul>
</div>

</body>
</html>

Вот код.

Спасибо, с проблемой разобрался. Расскажу что было.

Суть данного кода расположить бэкграунд слева по центру меню. Данный код работал во всех браузерах, кроме IE6.

Проблема решается, если диву menu задать высоту. Например:

height = 200px;

После этого бэкграудн отображается поцентру блока во всех браузерах.

Но данное использование не очень удобно так, как не известна заранее высота блока, поэтому для IE6 буду использовать exrpession.

  psywalker said:
кстати заметил, у тя чё то пробелов до жопы не понятных везде, вот тут например смотри <div class = "style"></div>, между атрибутом и его значением, далее no - repeat такая же хрень, проверь, мож из за этого не пашет!

Да знаю. Пробелы люблю юзать, иногда чрезмерно. Зато стремлюсь код сделать более красивым. На работоспособность это не влияет. По крайней мере раньше не разу не мешало.

Link to comment
Share on other sites
  • 0
rus Explorer

rus

Posted
Posted

SelenIT

  Quote
left center

Цитата

И когда иногда, вдохновеньем бурля,

Он кричал: 'Заворачивай носом!

Носом влево, а корпусом -- право руля!' --

Что прикажете делать матросам?

(Л.Кэррол, "Охота на Снарка", пер. Григория Кружкова)

Круто!

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted
  Виноградов Александр said:
Проблема решается, если диву menu задать высоту. Например:

height = 200px;

После этого бэкграудн отображается поцентру блока во всех браузерах.

Но данное использование не очень удобно так, как не известна заранее высота блока, поэтому для IE6 буду использовать exrpession.

Скорее всего, проблема решается, если включить hasLayout. Его можно включить указанием ширины, флоатом, display: inline-block;, zoom.

Выберите наиболее подходящий способ, чтобы избавиться от экспрешена.

Link to comment
Share on other sites
  • 0
Виноградов Александр Explorer

Виноградов Александр

Posted
  • Author
Posted (edited)

Спасибо большое Rash. Гениально простое решение, просто 

zoom: 1;

и все работает. Кстати пытался скинуть значение hasLayout с помощью: 

float: none;

так не получается.

Кстати, только сейчас заметил, как раз при установке определенной высоты hasLayout становиться true.

Жаль, что zoom: 1; невалидное свойство.

Edited by Виноградов Александр
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  Виноградов Александр said:
Спасибо большое Rash. Гениально простое решение, просто 

zoom: 1;

и все работает. Кстати пытался скинуть значение hasLayout с помощью 

float: none;

Кстати, только сейчас заметил, как раз при установке определенной высоты hasLayout становиться true.

Жаль, что zoom: 1; невалидное свойство.

в кондишнл комментс его и все дела :)

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted
  Quote
Жаль, что zoom: 1; невалидное свойство.

Есть валидное средство - height:1%; Только надо чтобы у родителя небыла указанна высота. Так как тогда высота элемента станет 1% от родителя. А если у родителя нет конкретно заданной высоты то и данному элементу ее будет не от чего отсчитывать, но hasLayout будет включен.

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