Rozsypany styl komentarzy i gdzie jest błąd?

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; // ?>

Rozsypany styl komentarzy i gdzie jest błąd?

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

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami