border-bottom и padding

korjik · November 21, 2012

Всем привет! Сегодня столкнулся с проблемой небольшой, а именно отображение border-bottom. На прикрепленной картинке видно, что линия идет ЗА пунктами меню, а не под ними. В чем может быть дело? (если убрать padding 3px 10px у ссылок), то всё хорошо.. но мне нужно с padding.

Интересно, что в IE8 бордюр отображается ровно под меню, а в хроме все время позади..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<title>Доска бесплатных объявлений</title>
</head>
<body>
<div id="container"> <!-- container !-->
  <div id="header"> <!-- header !-->
    <div id="search">Поиск <input type="text" id="field" /></div>
    Доска бесплатных объявлений
    <ul id="menu"> <!-- menu !-->
      <li><span>Главная</span></li>
      <li><a href="#">Добавить объявление</a></li>
      <li><a href="#">Продажа</a></li>
      <li><a href="#">Покупка</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">Форум</a></li>
      <li><a href="#">О проекте</a></li>
    </ul> <!-- / menu !-->
    <div class="clear"></div>
  </div> <!--/ header !-->

  <div id="left">Вход</div>
  <div id="ad">Реклама</div>
  <div id="top">Приветствуем вас на сайте бесплатных объявлений!</div>
  <div id="last">Последние объявления</div>
  <div id="right">Контент</div>

  <div class="clear"></div> <!-- clear !-->

  <div id="footer"> <!-- footer !-->
    <a href="">Написать нам</a>
  </div> <!-- / footer !-->

</div> <!-- / container !-->
</body>
</html>

@charset "utf-8";

body, div, span, a, ul, li, p, b, i, u {
  padding: 0;
  margin: 0;
  border: 0;
  border-collapse: collapse;
}

body {
  font-size: 75%;
  font: normal 12px/1.4 Verdana, Tahoma, sans-serif;
  vertical-align: baseline;
}

#container {
  width: 80%;
  margin: 40px auto;
  overflow: hidden;
}

#header {
  padding-left: 10px;
  margin-bottom: 15px;
  /* border: 1px dashed #000; /* Структурная рамка */
  border-bottom: 1px solid #ccc;
}

#search {
  background: #f6f6f6;
  color: #acacac;
  padding: 2px;
  float: right;
}

#menu {
  list-style: none;
  margin-top: 30px; }
  #menu li {
    display: inline; }
  #menu li span {
    background: #ebebeb;
    color: #555;
    padding: 3px 10px; }
  #menu li a {
    text-decoration: none;
    background: #569ae4;
    color: #fff;
    padding: 3px 10px; }
    #menu li a:hover, #menu li a:focus {
			  background: #0C0; }

#ad {
  float: left;
  width: 200px;
  padding: 5px;
  margin-bottom: 15px;
  clear: both;
  border: 1px dashed #000; /* Структурная рамка */
}

#left {
  float: left;
  width: 200px;
  padding: 5px;
  margin-bottom: 15px;
  border: 1px dashed #000; /* Структурная рамка */
}

#top {
  background: #ffffc9;
  color: #393939;
  margin-left: 230px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px dashed #000; /* Структурная рамка */
}

#last {
  min-height: 100px;
  height: auto;
  margin-left: 230px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px dashed #000; /* Структурная рамка */
}

#right {
  margin-left: 230px;
  padding: 5px;
  margin-bottom: 15px;
  border: 1px dashed #000; /* Структурная рамка */
}

#footer {
  background: #f2f2f2;
  color: #959595;
  text-align: right;
  padding: 2px 4px;
  border: 1px dashed #000; /* Структурная рамка */ }
  #footer a {
    color: #ff6666; }

.clear {
  clear: both;
}

Alex Shnayder · November 21, 2012

Сделайте inline-block для ссылок и спанов.

Yazon_Nile · November 22, 2012

+1

У вас нижние и верхние паддинги идут на линейные элементы (надеюсь, не заплюют за "линейные" :yahoo: )

Edited November 22, 2012 by Yazon_Nile

korjik · November 23, 2012

Спасибо огромное, теперь все хорошо отображается

Sign In

border-bottom и padding

Question

korjik

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Alex Shnayder

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

korjik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information