Jump to content
  • 0

в ie7 футер нормальный, в w3c-браузерах последний див в футере уезжает вниз

clavin

Asked by clavin,

 Share

Question

clavin Explorer

clavin

Posted
Posted

Помогите, пожалуйста. Верстаю страницу. В футере есть две строчки, одна над другой. Я их сделал дивами определённой высоты (их общая ширина такая, что не превышает высоту футера). Во всех браузерах что-то не так. Только в ie7 строчки не уезжают за границы футера. В остальных есть смещение вниз дива #copyright. Если ставлю line-height:0, то во всех браузерах исправляется, а в ie7 текст пропадает. Что здесь не так?

С помощью Firebug-а в fitefox попробовал поотключать свойства у дива #copyright, так если у него убрать ширину, то всё исправляется

<!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" xml:lang="ru" lang="ru">
<head> 
   <title>В футере последний див в IE7 отображается не так</title> 

	  <style type="text/css" media="all">

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
   padding: 0;
   color: #000;
   width:100%;
}

#footer {
   height:69px;
   width:1000px;
}

#footer ul {
   height:50px;
   list-style:none;
   width:380px;
   margin:0 auto;
}

#footer li {
   float:left;
   color:#cc99cc;
   margin:20px 3px;
   display:block;
   float:left;
   font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 10px !important;
}

#footer li.cutter {
   font-size:10px;
}

#footer li a{
   color:#cc99cc;
   text-decoration:none;
   text-align:center;
}

#copyright {
   clear: both;
   float:none;
   height:18px;
   font-size: 12px !important;
   color:#cc99cc;
   width:350px;
   margin:0 auto;
}
	  </style>
</head> 

<body> 

	  <div id="footer">
		 <ul>
			<li><a href="index.html">ITEM 1</a></li> 
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 2</a></li>
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 1</a></li> 
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 1</a></li> 
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 1</a></li> 
		 </ul>
		 <div id="copyright">Копирайт здесь!</div>
	  </div>

</body> 
</html>

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Куда мои близорукие глаза смотрели?

Уже поправил. Там в #footer li стоял нижний margin в 20px. Замечено мною, что IE глючно работает с нижними полями. Исправил задав #footer li {margin:20px 3px 0 3px;}

#footer li {

float:left;

color:#cc99cc;

margin:20px 3px 0 3px;

display:inline;

float:left;

font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 10px !important;

}

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Вывод: для ie нижние margin надо ставить в ноль :ph34r:

  psywalker said:
Да у тебя код вообще ужас. Видно опыта нет совсем, советую вот сюда внимание обратить http://stepbystep.htmlbook.ru/

Извините, что не в тему... но где конкретно в коде вы видите признак непрофессионализма? :)

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted
  psywalker said:
Везде, можешь дать мне любой твой отрезок на выбор.

Но вот в коде выше укажите, пожалуйста. Я потом и кровью все статьи на этом сайте перечитал и тут выясняется, что неправильно читал что ли?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  clavin said:
Но вот в коде выше укажите, пожалуйста. Я потом и кровью все статьи на этом сайте перечитал и тут выясняется, что неправильно читал что ли?

Да вот хоть вот этот взять

#footer li {
   float:left;
   color:#cc99cc;
   margin:20px 3px;
   display:block;
   float:left;
   font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 10px !important;
}

1) Стоит два раза float:left;

2) При этом стоит display:block;

3) Сначала пишется общее правило font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;

4) Потом переопределяется тут-же font-size: 10px !important;

Дальше показывать?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
  clavin said:
Да, действительно не очень аккуратно написал. Исправлюсь.

А ведь иногда делают свойство display: inline; для элементов, которые имеют свойство float:left;

Значит не всё так просто :ph34r:

Отлично, значит я не прав. Дальше разговаривать смысла не вижу.

Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted
  clavin said:
А ведь иногда делают свойство display: inline; для элементов, которые имеют свойство float:left;

Значит не всё так просто :ph34r:

Это делаю в одном единственном случае... Сомневаюсь, что тут ваш случай)

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