Что то поменял в CSS и сайт перекосило

@alex_cn · Регистрация: 22.08.2017

Author24 — интернет-сервис помощи студентам

Вот сайт http://toyota-chernigiv.com.ua/

При просмотре кода элемента в браузере если вычеркнуть padding то сайт отображает нормально. В разных браузерах это значение разное....

Так же тут менял что то не понял что за * и _ перед селектором. Хотя бы ткните носом куда копать.

CSS

.clearfix {
    clear: both;
    *display: inline-block;
    _height: 1%;
}

CSS

/**
 * Styles for all pages
 *
 * @author Gregory Furletov <littlefuntik@gmail.com>
 * @copyright Copyright © 2012 weareprO.Org
 * @license [url]http://www.wearepro.org/license/[/url]
 */
 
@import url(fonts/stylesheet.css);
@import url(_tags.css);
@import url(_head.css);
@import url(_content.css);
@import url(_footer.css);
@import url(_page-navigation.css);
@import url(_breadcrumbs.css);
@import url(_models.css);
@import url(_milage-cars.css);
@import url(_text-page.css);
@import url(_test-form.css);
@import url(_slider.css);
 
.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}
 
.clearfix {
    clear: both;
    *display: inline-block;
    _height: 1%;
}
 
#wrapper, .wraper2 {
    /*width: 978px;*/
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    display: block;
    float: none;
    padding:0 50px;
}
 
/* Middle
-----------------------------------------------------------------------------*/
 
.inside-title {
    padding: 25px 0px 0px 0;
}
 
.inside-title h1 {
    position: relative;
    z-index: 80;
    margin: 0px;
    padding: 0px;
    line-height: 1;
    font-size: 24px;
    font-weight: bold;
    color: #666;
}
 
.inside-title span {
    position: relative;
    top: -12px;
    left: 5px;
    line-height: 1;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    display: none;
}
 
 
.inside-menu {
    float: left;
    width: 225px;
    list-style: none;
    margin: 0;
    padding: 35px 0px 16px 0px;
    font-size: 14px;
}
.inside-menu li { padding: 8px 0px 8px 12px; }
.inside-menu li:first-child { padding-top: 0px; }
.inside-menu a { color: #666; }
.inside-menu a:hover, .inside-menu .selected a { text-decoration: underline; }
.inside-menu .selected a {
    color: #e50000;
    font-weight: normal;
    text-decoration: underline;
}
 
 
.inside-main { padding: 35px 0px 0px 230px; }
.inside-main .player { padding: 6px 0; }
.inside-main p {
    font-size: 13px;
}
.inside-main h2, .inside-main h3 {
    margin: 0;
    padding: 0 0 8px 0;
    line-height: 1;
    font-size: 19px;
    font-weight: bold;
    color: #666;
}
.inside-main h3 {
    color: #d40000;
}
.inside-main h4 {
    margin: 0px;
    padding: 12px 0px;
    font-size: 15px;
}
.inside-main h5 {
    margin: 0px;
    padding: 12px 0px 8px 20px;
    font-family: 'toyota_displayregular';
    font-size: 13px;
    color: #666;
}
 
 
.inside-main .colors div {
    float: left;
    width: 24px;
    height: 24px;
    margin: 3px;
    cursor: pointer;
}
.inside-main .colors div:first-child { margin-left: 0px; }
.inside-main .colors div:last-child { margin-right: 0px; }
#color-name { margin: 0px; }
 
 
.sm-sub{display:block;background:#e5e5e5;padding-left:5px;line-height:26px;font-size:11px;color:#666;text-decoration:none;}
.sm-collapsed{height:0;overflow:hidden}
 
.configs li{line-height:18px;padding:3px 0px 3px 6px;color:#666; font-size: 13px;}
.configs li:nth-child(even){background:#f3f3f3}
.configs table{border:0;border-collapse:collapse;table-layout:fixed;margin-bottom:12px;width:100%}
.configs tr:nth-child(even){background:#f3f3f3}
.configs td{width:186px;padding-left:6px;border-left:solid 1px #fff;height:18px;vertical-align:middle;font-size: 13px;}
.configs td{width:auto}
 
.configs td.first,.configs .reduced td.first{width:181px;border:0}
.configs.specs td.first{width:181px}
optgroup{font-style:normal}
.exception i{padding:0 6px}
#sm-tech{width:188px}
.configs ul{margin-bottom:6px}
 
.configs > div { padding: 6px 0px; }
 
 
.am-wrapper {
float: left;
position: relative;
overflow: hidden;
}
.am-wrapper img {
position: absolute;
outline: none;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
.new_button_pdf{
    padding: 4px 10px;
    margin: 4px auto;
    border-radius: 3px;
    background: #666666;
    color: #fff;
    display: inline-block;
    font-size: 11px;
}
.new_button_pdf:hover{
    background: #2d2d2d;
}
 
.models li {
    height: initial;
    width: 31%;
    margin: 0 10px 30px 0;
    text-align: center;
}
.models div {
    background-size: contain;
    width: 100%;
    height: 180px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.models li span {
    padding: 4px 0 4px;
    font-weight: bold;
    font-size: 16px;
}
 
.text-page p.bodytext{
    display: block;
    margin: 0;
    padding: 0;
    clear: both;
    color: #636363;
    font-size: 14px;
    text-align: center;
    padding: 4px 0 4px;
    font-weight: bold;
    font-size: 16px;
}
 
 
#mainfocus .hero-unit.fullwidth {
    min-height: 420px;
    height: 420px!important;
    background-size: cover!important;
    background-position: center center!important;
}
#mainfocus .hero-unit.hero-medium header {
    padding-top: 150px!important;
    top: 0;
}
#mainfocus .hero-unit.hero-medium header {
    padding-top: 0;
    height: auto;
    padding-right: 10px;
}
 
#mainfocus .image0 {
    background-image: url(//t1-cms-1.images.toyota-europe.com/toyotaone/uaua/Header_tcm-3046-939609.jpg);
}
 
#mainfocus .container {
    width: 1170px;
    margin: 0 auto;
}
 
#mainfocus h1{
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    direction: ltr;
    display: block;
    font-size: 52px;
    font-weight: normal;
    height: 64px;
    letter-spacing: -1.56px;
    line-height: 58px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    max-width: none;
    padding-bottom: 6px;
    padding-left: 20px;
    padding-top: 0px;
    text-align: left;
}
 
#mainfocus h2{
    box-sizing:border-box;
    color:rgb(255, 255, 255);
    direction:ltr;
    display:block;
    font-size:34px;
    font-weight:normal;
    height:37px;
    letter-spacing:-1.02px;
    line-height:37.4px;
    margin-bottom:0px;
    margin-left:0px;
    margin-right:0px;
    margin-top:0px;
    padding-left:20px;
    text-align:left;
    text-shadow:rgba(2, 3, 3, 0.2) 0px 1px 0px;
}

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
html {
    height: 100%;
}
header, nav, section, article, aside, footer {
    display: block;
}
body {
    font: 12px/16px 'toyota_textregular', Arial, Tahoma, Verdana, sans-serif;
    width: 100%;
    height: 100%;
    background: #e7e7e9;
}
a {
    color: #d70000;
    outline: none;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
p {
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
 
h1, h2, h3 {
    font-family: 'toyota_textbold';
}
 
.csvtable{
    
}
.csvtable thead tr:first-child {
   background: #e5e5e5;
   font-weight: bold;
}
.csvtable tr td {
    padding: 5px 15px 5px 5px;
}
.csvtable tr:first-child td {
    vertical-align: top;
}
 
.csvtable tr:nth-child(even){background:#f3f3f3}
 
.csv_btns{
    margin: 0 0 10px 0;
    display: inline-block;
    width: 100%;
}
.csv_btns li{
    display: initial;
    background: #ccc;
    padding: 6px 11px;
    font-size: 14px;
    margin: 0 2px 0 0;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.csv_btns li:hover{
    background: #bfbebe;
}
.csv_btns li a{
    color: #000;
}
.search_form{
    /*position: absolute;*/
    right: 156px;
    top: 60px;    
}
.search_form input{
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 7px 10px;
}
 
 
#zak1_form .search_form_d{
    position: absolute;
    top: 20px;
    right: 156px;
}
 
.form-group.search_form{
    position: absolute;
}
 
 
 
#main-col-right {
    position: fixed;
    right: 0;
    top: 30%;
    z-index: 102;
}
.r-menu-visible{
    border-bottom: 1px solid #404040;
    position:relative;
    background-color: #1e2a32; 
    /*background-color:#27323a*/
    width: 55px;
    height:55px;
    right:0px;
    z-index: 100;
    opacity: 0.7;
    cursor:pointer;
}
.r-menu-visible img{
    width:25px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: 12px;
 
}
#ieScn ul {
    margin: 0 6px;
    list-style: none outside none;
}
 
#ieScn a {
    background: none repeat scroll 0 0 #d2001e;
    border-radius: 3px 0px 0px 3px;
    box-shadow: 0 0 1px rgba(30, 42, 50, 0.3) inset;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 1px;
    padding: 18px 9px 10px;
    text-decoration: none;
    height: 27px;
}
#ieScn .r-menu-visible:last-child a {
    padding: 10px 9px 10px;
    height: 36px;
}
.r-menu-visible:first-child{
    border-top-left-radius: 10px;    
}
.r-menu-visible:last-child{
    border-bottom:none;
    border-bottom-left-radius: 10px;   
}
 
#ieScn_Top ul {
    display: inline-block;
    list-style: none outside none;
    margin: 15px 560px 0 7%;
}
#ieScn_Top div{
    border-left: 1px solid #eff0f1;
    display: block;
    font-size: 15px;
    /*    font-weight: bold;*/
    margin-bottom: 4px;
    padding: 12px 19px 10px;
    text-decoration: none;
    color: #1e2a32;
}
 
#ieScn_Top a{
    display: block;
    font-size: 15px;
    /*    font-weight: bold;*/
    margin-bottom: 4px;
    padding: 12px 19px 10px;
    text-decoration: none;
    color: #1e2a32;
}
#ieScn_Top div:hover {
    background-color:#1e2a32 ;
    color: white;
}
#ieScn_Top a:hover {
    background-color:#1e2a32 ;
    color: white;
}
 
.fcSHL {
    position:fixed;
    right:-225px;
    display:block;
    margin-top: -37px;
    opacity: 0.8;
}
.right-menu-item {
    width: 215px;
    height: 55px;
 
}
 
 
.r-menu-visible{
    border-bottom: 1px solid #404040;
    position:relative;
    background-color: #1e2a32; 
    /*background-color:#27323a*/
    width: 55px;
    height:55px;
    right:0px;
    z-index: 100;
    opacity: 0.7;
    cursor:pointer;
}
.r-menu-visible img{
    width:25px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: 12px;
 
}
#ieScn ul {
    margin: 0 6px;
    list-style: none outside none;
}
 
#ieScn a {
    background: none repeat scroll 0 0 #d2001e;
    border-radius: 3px 0px 0px 3px;
    box-shadow: 0 0 1px rgba(30, 42, 50, 0.3) inset;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 1px;
    padding: 18px 9px 10px;
    text-decoration: none;
    height: 27px;
}
#ieScn .r-menu-visible:last-child a {
    padding: 10px 9px 10px;
    height: 36px;
}
.r-menu-visible:first-child{
    border-top-left-radius: 10px;    
}
.r-menu-visible:last-child{
    border-bottom:none;
    border-bottom-left-radius: 10px;   
}
 
#ieScn_Top ul {
    display: inline-block;
    list-style: none outside none;
    margin: 15px 560px 0 7%;
}
#ieScn_Top div{
    border-left: 1px solid #eff0f1;
    display: block;
    font-size: 15px;
    /*    font-weight: bold;*/
    margin-bottom: 4px;
    padding: 12px 19px 10px;
    text-decoration: none;
    color: #1e2a32;
}
 
#ieScn_Top a{
    display: block;
    font-size: 15px;
    /*    font-weight: bold;*/
    margin-bottom: 4px;
    padding: 12px 19px 10px;
    text-decoration: none;
    color: #1e2a32;
}
#ieScn_Top div:hover {
    background-color:#1e2a32 ;
    color: white;
}
#ieScn_Top a:hover {
    background-color:#1e2a32 ;
    color: white;
}
 
.fcSHL {
    position:fixed;
    right:-225px;
    display:block;
    margin-top: -37px;
    opacity: 0.8;
}
.right-menu-item {
    width: 215px;
    height: 55px;
 
}
 
 
.r-menu-visible{
    border-bottom: 1px solid #404040;
    position:relative;
    background-color: #1e2a32; 
    /*background-color:#27323a*/
    width: 55px;
    height:55px;
    right:0px;
    z-index: 100;
    opacity: 0.7;
    cursor:pointer;
}
.r-menu-visible img{
    width:25px;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-top: 12px;
 
}
#ieScn ul {
    margin: 0 6px;
    list-style: none outside none;
}
 
#ieScn a {
    background: none repeat scroll 0 0 #d2001e;
    border-radius: 3px 0px 0px 3px;
    box-shadow: 0 0 1px rgba(30, 42, 50, 0.3) inset;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 1px;
    padding: 18px 9px 10px;
    text-decoration: none;
    height: 27px;
}
#ieScn .r-menu-visible:last-child a {
    padding: 10px 9px 10px;
    height: 36px;
}
.r-menu-visible:first-child{
    border-top-left-radius: 10px;    
}
.r-menu-visible:last-child{
    border-bottom:none;
    border-bottom-left-radius: 10px;   
}
 
.csc-textpic img{
    width:100%;
}
.columnItem{
    display:inline-block;
    float: left;
    margin-right: 30px;
}
.csc-textpic-imagewrap {
    width: 100%!important;
    display: inline-block;
}

@mrtoxas · 22.08.2017, 10:35

Сообщение от alex_cn

что то не понял что за * и _ перед селектором

Некоторые товарищи так делают стили нерабочими, вместо того, чтобы закомментировать их.
В остальном задача не ясна. Что-то поменяли и все перекосило, значит верните это что-то на место, если не знаете за что оно отвечает.

Сообщение от alex_cn

При просмотре кода элемента

Какого элемента? Что именно перекосило?

Сформулируйте нормально проблему, чтобы ее можно было понять и увидеть.

@andyyy · 22.08.2017, 13:27

Сообщение от mrtoxas

Какого элемента? Что именно перекосило?

рекламка

@alex_cn · 22.08.2017, 16:00 **[ТС]**

HTML5

<div class="text-page">
 
<div class="textpage-container-element">
    
    <a href="news/akczii/">Акції
        
    </a>
    <div class="clearfix"></div>
</div>
<div class="textpage-container-element">
    
    <img style="display: block; padding: 10px 0;" src="/assets/textpages/rezcrop/r300х_Zvernuty_uvagu_small_555x249_tcm-3046-713261.jpg">
    <a href="news/uvaga!-toyota-povіdomlyaє.html">Увага! Toyota повідомляє
        
    </a>
    <div class="clearfix"></div>
</div>
<div class="textpage-container-element">
    
    <img style="display: block; padding: 10px 0;" src="/assets/textpages/spring_2014/rezcrop/r300х_toyota_news_2017_peaks_of_europe_header_01_tcm_3046_1050816_01.jpg">
    <a href="news/vixіdnі-za-kermom-novogo-yaris.html">Фотографуючи європейські гірські вершини.
        <span>У травні новий посол позашляковиків 4x4 — фотограф і мандрівник Йоган Лолос, або @lebackpacker — вирушив у п'ятимісячну автомобільну подорож, щоб сфотографувати європейські гірські вершини.</span>
    </a>
    <div class="clearfix"></div>
</div>
<div class="textpage-container-element">
    
    <img style="display: block; padding: 10px 0;" src="/assets/textpages/rezcrop/r300х_toyota-hybrid-zaryadzhae-emociyami-na-festivali-vulichnoi-izhi-003-1600х900_tcm-3046-1043740.jpg">
    <a href="news/toyota-hybrid-zaryadzhaє-emoczіyami-–-na-festivalі-vulichnoї-їzhі.html">Toyota Hybrid заряджає емоціями – на Фестивалі вуличної їжі.
        <span>Уже вчетверте за рік на київському арт-заводі «Платформа» яскраво, весело та смачно пройшов Фестиваль вуличної їжі. Гурмани, фани гастрономічного мистецтва, любителі проводити час на відкритому повітрі з друзями та сім’ями знову завітали на своє улюблене свято.</span>
    </a>
    <div class="clearfix"></div>
</div>
</div>

Вот этот блок <div class="textpage-container-element"></div> Должна идти картинка и слева ее обтекать текст, дальше разделитель блоков и аналогичный вывод.

А получается каким то каскадом и сьехавшее...

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	22.08.2017, 10:35	2
	Сообщение от alex_cn что то не понял что за * и _ перед селектором Некоторые товарищи так делают стили нерабочими, вместо того, чтобы закомментировать их. В остальном задача не ясна. Что-то поменяли и все перекосило, значит верните это что-то на место, если не знаете за что оно отвечает. Сообщение от alex_cn При просмотре кода элемента Какого элемента? Что именно перекосило? Сформулируйте нормально проблему, чтобы ее можно было понять и увидеть. 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	22.08.2017, 13:27	3
	Сообщение от mrtoxas Какого элемента? Что именно перекосило? рекламка 1

	22.08.2017, 16:00