Rozsypany styl komentarzy i gdzie jest błąd?

0

Witam wszystkich,

od wczoraj dłubię nad zmianą wyglądu formularza komentarzy i coś tam nawet udało mi się.

Niestety, wszystko fajnie do momentu próby odpowiedzi na czyjś komentarz, wtedy wszystko się sypie. Mimo wielogodzinnych modyfikacji, nie jestem w stanie ustalić co jest nie tak.

Testowy komentarz, żeby zobaczyć o co chodzi znajduje się tu:
http://zkuchniwziete.pl/przepisy/salatki/salatka-arabska.html

Może ktoś z bardziej obeznanych w css znajdzie błąd?

Kod css odpowiedzialny za komentarze:

/*-----------------------------------------------------------------------------------*/
/*  7.  Comments
/*-----------------------------------------------------------------------------------*/

.respond-title {
  float: left;
  width:100%;
  font-weight:bold;
  color:#c81444;
  text-transform:uppercase;
  font-size:18px;
}

#respond-wrap {
  width: 480px;
  float: left;
  background: #EDEDED;
  margin: 10px auto;
  margin-left: 0;
  position: relative;
  border: 1px solid #C9C9C9;
  border-radius:10px;
  box-shadow: 5px 5px 5px #D8D8D8;
  padding: 20px;
}

#respond-wrap .comments-sidebar {
  padding-top: 30px;
}

#respond label{
  font-size: 12px;
}

#comment-wrap{float:left;
  border-top:dashed 1px #e8e8e8;
}

#comments {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 30px;
  margin-top: 50px;
  color:#7c7c7c;
  text-transform:uppercase;
}

.commentlist {
  margin: 10px 0 40px 0;
  padding: 0 0 0 0;
  list-style-type: none;
  width: 609px;
  float: left;
}

.comment{border-bottom: 1px solid #efefef;
  border-left: 1px solid #efefef;
  border-right: 1px solid #efefef;
  box-sizing:border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;}

.page-template-template-full-width-php .commentlist { width: 100%; }

.commentlist .line { display: none;
  background:transparent;
 }

.commentlist li { float:left;

}
.commentlist li div { float:left;
  background:#efefef;
  width:561px;
  padding:24px 24px 24px 24px;
  position:relative;
}

.commentlist li li { border-bottom: none; }
.commentlist li li div { float:left;
  background:transparent;
  width:530px!important;
}

.commentlist li li .line{float:left;
  display:block;
    position: absolute;
  top:58px!important;
  left:0px!important;
    width: 30px!important;
    height: 1px!important;
    border-bottom: 1px dashed #d5d3ce;
    margin: 0 0 0 0px;
  padding:0!important;
  background:transparent;
}

.comment-body { float:left;
  width:100%;
  padding:0!important;
  margin-top:10px;
  color:#7c7c7c!important;

 }

li li .comment-body { padding-left: 137px; }

.commentlist ul {
    border-left: 1px dashed #d5d3ce;
    margin: 0px 0 0 30px;
}
.commentlist ul li{
    border:none;
}

.comment-body p:last-child { margin: 0;}

.commentlist ul ul{
    margin: 45px 0 0 88px;
    padding: 10px 0 0 0;
}

.commentlist li li { }
.commentlist li li:last-child { margin-bottom:0; }
.commentlist li li li { margin-top: 0; }

.commentlist li #respond { padding: 40px 0 0 0px; }
.commentlist li li #respond { padding: 40px 0 0 55px; }

.pinglist {
    margin: 20px 0 40px 30px;
    list-style-type: decimal;
}

.respond-nonpublished-email span{color:#f00;}
.allowed-tags code {background:transparent;}
.comment {margin-bottom: 25px; }

.comment-body ul,
.comment-body ol,
.comment-body dl { margin-left: 30px; }

li .cancel-comment-reply { padding-bottom: 20px; }

/* Comment form */
#commentform {float:left; width: 100%; }

#commentform label {float:left;
    width: 65px;
  font-size: 18px;
  line-height: 19px;
  color: #7c7c7c;
}
#commentform label span {
  color: #F00;
}

#commentform input[type="text"] {
    margin-left: 10px;
    width: 200px;
  font-family: Roboto,sans-serif;
  line-height: 19px;
  padding:4px 7px 4px 7px;
  color: #7c7c7c;
  border: 1px solid #C9C9C9;
  border-radius:5px;
  background:#FFFFFF;
}

#commentform input[type="text"]:hover {
  border: 1px solid #C81444;
  transition: all 0.4s ease 0s;
}

#commentform textarea {
    width: 440px;
    height: 200px;
  resize: none;
  border: 1px solid #C9C9C9;
  border-radius:5px;
  background:#FFFFFF;
}

#commentform textarea:hover {
  border: 1px solid #C81444;
  transition: all 0.4s ease 0s;
}

#commentform span,
.contactform small span { color: #F00; }

#commentform small span.grey,
.contactform small span.grey{
    color: #999;
    font-family: "Droid Serif", Georgia, Times, serif;
    font-style: italic;
}

.children { float:left;list-style-type: none;
  position:relative;
 }
.commentlist li li div.avatar-wrap {float:left;
  padding:0!important;
  width:66px!important;
}
.avatar-wrap {float:left;
  padding:0!important;
  width:66px!important;
}
.avatar {
    position: relative;
    z-index: 5;
}

li li .avatar {  }

.comment-author .comment-meta a{
    color: #acacac;
    font-size: 18px;
}

.comment-meta a:hover { color: #5597b2; }

.comment-reply-link{position:absolute;
  right:24px;
  bottom:5px;
  float:left;
  text-decoration:underline;
  color: #7c7c7c;
  z-index:88;
}

.fn {
    float: left;
  font-size:18px;
    font-weight: bold;
    width:100%;
    color: #7c7c7c;
  clear:right;
}

.comment-author {
    padding:0 0 24px 24px!important;
  background:transparent!important;
  width:470px!important;
}

.commentlist li li div.comment-author {width: 440px!important; }

.comment-author a{ color: #acacac; }
.comment-author-admin { }

.comment-author cite {
    font-style: normal;
}

.says { display: none; }

.nocomments {
    text-align: center;
    padding: 20px;
}

.comment-body ul {
    list-style-type: disc;
    border: none;
    margin-bottom: 20px;
}

.comment-body ul li {
    padding: 0;
    margin: 0;
}

.comment-body ol { list-style-type: decimal; }

.moderation {
    padding-left: 45px;
    color: red;
    font-size: 11px;
}

.author-tag {}
/* Submit comment style */
button {
    height: 49px;
    cursor: pointer;
    margin: 0;
    float: right;
}

button span {}

button.com_button {
  width: 148px;
  height: 44px;
  background:url('images/komentarz.png') no-repeat left bottom;
  text-decoration:none;
  text-indent:-99999;
  color:transparent;
  position: relative;
border-radius:5px;
}

button.com_button:hover {
  width: 148px;
  height: 44px;
  background:url('images/komentarzh.png') no-repeat left bottom;
  text-decoration:none;
  text-indent:-99999;
  color:transparent;
  position: relative;
  transition: all 0.4s ease 0s;
border-radius:5px;
}

button.com_button span.right {}

button:hover.com_button span.left {}

button:hover.com_button span.right {}

Na wszelki wypadek fragment kodu php formularza:

/*-----------------------------------------------------------------------------------*/
/*  Comment Form
/*-----------------------------------------------------------------------------------*/

    if ( comments_open() ) : ?>

    <div id="respond-wrap">

         <div id="respond">

             <h3 class="respond-title"><?php comment_form_title( __('Zostaw komentarz', 'simple'), __('Zostaw komentarz do %s', 'simple') ); ?></h3>
           <?php if ( !is_user_logged_in() ) : ?>
           <?php endif; ?>
                  <div class="cancel-comment-reply">
                       <?php cancel_comment_reply_link(); ?>
                  </div>

        <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>

    <p><?php printf(__('Musisz być %1$s zalogowany %2$s aby dodać komentarz.', 'simple'), '<a href="'.get_option('siteurl').'/wp-login.php?redirect_to='.urlencode(get_permalink()).'">', '</a>') ?></p>

    <?php else : //comment form  ?>

    <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

            <?php if ( is_user_logged_in() ) : ?>

            <p><?php printf(__('Zalogowany jako %1$s. %2$s Wyloguj się &raquo;%3$s', 'simple'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>', '<a href="'.(function_exists('wp_logout_url') ? wp_logout_url(get_permalink()) : get_option('siteurl').'/wp-login.php?action=logout" title="').'" title="'.__('Wyloguj się z tego konta', 'simple').'">', '</a>') ?></p>

            <?php else : ?>

            <p>
      <input type="text" name="author" id="author" placeholder="Imię (wymagane)" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" />
            </p>

            <p>
      <input type="text" name="email" id="email" placeholder="E-mail (wymagane)" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" />
            </p>

            <p>
      <input type="text" name="url" id="url" placeholder="Link do strony/ bloga" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
            </p>

            <?php endif; ?>

            <p>
      <textarea name="comment" id="comment" cols="58" rows="10" tabindex="4"placeholder="Treść komentarza"></textarea>
      </p>

            <p>
      <input type="checkbox" value="checked" checked="checked" disabled="disabled" name="polityk" /><small>Akceptuję <a href="http://www.zkuchniwziete.pl/Regulamin">regulamin</a> oraz <a href="http://www.zkuchniwziete.pl/Polityka-prywatnosci">politykę prywatności</a>.</small>
            </p>

            <p>
                <button class="com_button" type="submit" name="submit">
                    <?php _e('Dodaj komentarz', 'simple'); ?>
                </button>
                <?php comment_id_fields(); ?>
            </p>
            <?php do_action('comment_form', $post->ID); ?>

        </form>

    <?php endif; // If registration required and not logged in ?>
    </div>
    </div>
    <?php endif; // ?>
0

Dzięki wszystkim za zainteresowanie.

Już znalazłem błąd, temat do zamknięcia :)

Po kilku godzinach przerwy podszedłem do tematu jeszcze raz i od nowa ostylowałem formularz komentarza krok po kroku.

Za pierwszym razem nadałem styl tła dla #respond-wrap i to był błąd.

Należy ostylować: #commentform.

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0