Не могу спозиционировать круг одинаково в разных браузерах

Ratibor · July 20, 2016

Доброе время суток! Народ такая проблема: не могу позиционировать круг "or" между кнопок.
В хроме все норм. А вот в остальных криво.

Пожалуйста, в чем ошибка. Ссылка на сайт http://tomatto.esy.es/

by chris · July 20, 2016

3 минуты назад, Ratibor сказал:

У меня в хроме все ок вот ссылка на скрин

Я бы не сказал, что круг отцентрирован на скрине, он на 2 пикселя выше. В моей хроме наоборот (Версия 51.0.2704.106 m) круг ниже центра. Аналогично в firefox. В ie, да, сильно заметно. В общем, разметку подкорректируем -

<div class="slider-content">
  <h2>Quam eleifend metus commodo</h2>
  <p>luctus at sit amet urna. Quisque non augue tincidunt, egest
    as massa non, elementum sem. Suspendisse mollis nulla 
    eu lorem ultricies dapibus.</p>
  <a href="#" class="Purchas">Purchase now</a>
  <div class="or"><p>or</p></div>
  <a href="#" class="Learn">Learn more</a>
</div>

И в стилях убираем абсолютное позиционирование и добавляем новые правила поведения в потоке.

a.Learn,
a.Purchas {
  display: inline-block;

  vertical-align: middle;
}

.or {
  z-index: 1;

  position: relative;
  top: 0;
  left: 0;

  margin-left: -10px;
  margin-right: -10px;
}

shamil_ozdemirov · July 20, 2016

1 час назад, Ratibor сказал:

Доброе время суток! Народ такая проблема: не могу позиционировать круг "or" между кнопок.
В хроме все норм. А вот в остальных криво.

Пожалуйста, в чем ошибка. Ссылка на сайт http://tomatto.esy.es/

Вот html код чуть чуть изменил

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="UTF-8">
   <title>claymore</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
       <header>
           <nav>
               <div class="brand"></div>
               <ul class="list">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Service</a></li>
       <li><a href="#">Features</a></li>
       <li><a href="#">Price</a></li>
       <li><a href="#">Contact</a></li>
       <li><a id="login" href="#">Login</a></li>
       </ul>

           </nav>
           <div id="mock"></div>
           <div class="slider-content">
               <h2>Quam eleifend metus commodo</h2>
               <p>luctus at sit amet urna. Quisque non augue tincidunt, egest
                   as massa non, elementum sem. Suspendisse mollis nulla
                   eu lorem ultricies dapibus.</p>
               <div class='or1'>
                   <a href="#" class="Purchas">Purchase now</a>
                   <a href="#" class="Learn">Learn more</a>
                   <div class="or">or</div>
               </div>
           </div>
       </header>
       <div id="fon"></div>
</body>
</html>

и вот css

a, a:hover {
text-decoration: none;
color: #ffffff;
}

body {
padding: 0;
margin: 0;
}

#fon{
   height: 894px;
   background: url(img/bg.jpg) no-repeat center bottom;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   -ms-background-size: cover;
   background-size: cover;
}

header {
   width: 940px;
   padding: 0;
   margin: 0 auto;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

nav {
position:absolute;
z-index: 1;
}

.brand {
   width: 154px;
   height: 56px;
   background: url(img/Claymore.png) no-repeat;
   position: relative;
   top: 69px;
   padding: 0;
   margin: 0;
}

.list {
   width: 558px;
   position: relative;
   list-style: none;
   padding: 0;
   margin: 0;
   left: 428px;
   top: 35px;
}

.list li {
display: inline;
margin-right: 16px;
font: 14pt sans-serif;
transition: linear;
position: relative;
}

.list li a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
top: 30px;
background: #1abc9c;
transition: linear;
}
.list li a:hover:after{
width: 100%;
}

#login {
   font: bold 14pt sans-serif;
   margin-left: 20px;
   transition: linear;
position: relative;
}

#login:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
top: 30px;
background: #1abc9c;
transition: linear;
}
#login:hover:after{
width: 100%;
}

#mock {
   width: 415px;
   height: 538px;
   background: url(img/BodyWhite.png) no-repeat;
   position: absolute;
   top: 321px;
}

.slider-content {
   position: absolute;
   overflow:hidden;
   width: 487px;
   font: 14pt sans-serif;
   color: #ffffff;
   top: 350px;
   left: 450px;
}

a.Purchas {
   color: #fff;
   text-decoration: none;
   user-select: none;
   background: #1abc9c;
   padding: .7em 1.5em;
   outline: none;
   border-radius: 3px;
   display:inline-block;
}

a.Purchas:hover { background: #69e0c8; }

a.Purchas:active { background: rgb(152,15,0); }

.Learn {
   color: #fff;
   text-decoration: none;
   user-select: none;
   background: #3498db;
   padding: .7em 2.1em;
   outline: none;
   border-radius: 3px;
   display:inline-block;
}

a.Learn:hover { background: #67bcf4; }

a.Learn:active { background: rgb(152,15,0); }

.or1{
   position:relative;
   float:left;
}
.or{
   position:absolute;
   top:20%;
   left:50%;
   margin-left:-13px;
   width: 29px;
   height: 29px;
   line-height:29px;
   background: url(img/or.png) no-repeat;
   color: #4a5b6d;
   text-align:center;
}

Edited July 20, 2016 by shamil_ozdemirov

by chris · July 20, 2016

@Ratibor а как должно быть норм? У меня, например, в хроме круг не отцентрирован.

Ratibor · July 20, 2016

У меня в хроме все ок вот ссылка на скрин http://c2n.me/3AoVDVj

В IE вот как отображает ссылка на скрин http://c2n.me/3AoWdWv

Ratibor · July 20, 2016

а у кнопок позиции абсолютными остаются?

выстроились в таком порядке http://c2n.me/3Ap0ioU теперь top и left применить чтобы выровнять?

аболюты убрал у кнопок

by chris · July 20, 2016

9 минут назад, Ratibor сказал:

теперь top и left применить чтобы выровнять?

вообще убрать

Ratibor · July 20, 2016

все разобрался только к правилу для a.Learn, a.Purchas добавил еще класc or получилось так

a.Learn, a.Purchas, .or { display: inline-block; vertical-align: middle; }

и все здорово вышло, спасибо большое!

Ratibor · July 20, 2016

Спасибо за помощь! Но первый вариант by chris был более гибким если честно.

Sign In

Не могу спозиционировать круг одинаково в разных браузерах

Question

Ratibor

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

by chris

Link to comment

Share on other sites

shamil_ozdemirov

Link to comment

Share on other sites

by chris

Link to comment

Share on other sites

Ratibor

Link to comment

Share on other sites

Ratibor

Link to comment

Share on other sites

by chris

Link to comment

Share on other sites

Ratibor

Link to comment

Share on other sites

Ratibor

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information