Link_to方法不适用于CSS

Question

I had to add a link_to method to my Rails view since it was opening the image url in a new tab, as oppose to the profile link.

The original code screenshot

- if user.avatar.present?
  .common_box.box1 data-user-id="#{user.username}"
    .img_box
      = image_tag user.avatar.try(:image_url)
      -if @user.present?  
        ul.btn_link.hide
          li
            a.message_btn  href="#" data-user="#{user.id}"  data-mfp-src='#message_me'   Message
          li
            = link_to "Save", follow_popup_user_path(user), class: 'save_btn', :'data-mfp-src'=>'#follow_div', remote: true
          li
            a.report_btn href="#" data-mfp-src='#report_me'  Report
    .img_detail
      small years
      .circle
        span.age_box class="#{user.gender == 'Male' ? '': 'pink'}" = user.age
      h3 class="#{user.gender == 'Male' ? '' : 'pink'}" = user.username
      h4 
        = user.address
      div class= "#{user.gender == 'Male' ? 'green_corner': 'pink_corner'}"
        =image_tag "#{user.gender == 'Male' ? 'side_curv.png': 'curv_2.png'}"

The layout is perfect, however it opens the full image url for new tab. If I click on the picture box I will be directed to the user profile.

I tried to fix this by adding = link_to user do and it allows me to open a new tab with the profile url, but it throws the CSS off. Take a look at the screenshot

As you see the blue bar is moved from the bottom to the top.

- if user.avatar.present?
  .common_box.box1 data-user-id="#{user.username}"
    .img_box
    = link_to user do
      = image_tag user.avatar.try(:image_url)
      -if @user.present?  
        ul.btn_link.hide
          li
            a.message_btn  href="#" data-user="#{user.id}"  data-mfp-src='#message_me'   Message
          li
            = link_to "Save", follow_popup_user_path(user), class: 'save_btn', :'data-mfp-src'=>'#follow_div', remote: true
          li
            a.report_btn href="#" data-mfp-src='#report_me'  Report

Am I placing the link_to method in the wrong area or using it wrong? I am using the carrier wave gem for the pictures if that plays a factor in any of this.

style.css:

#btm_container{ float:left; width:100%; background:#fff; border-top:1px solid #c6c6c5; padding:112px 0 0 0;}
.box_detail{ float:left; width:986px; margin:0 0 0 -6px;}
.box_detail .col{float:left; width:217px; margin:0 38px 0 0;}
.common_box{float:left; width:196px; padding:5px 5px 5px 6px; margin:0 0 53px 0; cursor: pointer;}
/*.common_box.box1{background:url(/assets/img_box_bg.png) no-repeat 0 0; min-height:364px;}*/
.common_box.box1{border: 1px solid #918a8a; border-radius: 5px}
.common_box .img_box{float:left; width:194px; border-bottom:3px solid #389aeb; position:relative; z-index:999;}
.common_box .img_box img{ float:left;}
.btn_link{float:left; width:185px; position:absolute; list-style:none; top:11px; left:10px;}
.btn_link li{float:left; padding:0 8px 0 0;}
.btn_link li a{float:left; text-align:center; padding:5px 0; font-size:12px; line-height:14px; color:#525252; text-decoration:none;}
.btn_link li .message_btn{ background:url(/assets/message_btn_bg.png) no-repeat 0 0; width:65px; height:27px; float:left;}
.btn_link li .save_btn{ background:url(/assets/save_btn_bg.png) no-repeat 0 0; width:42px; height:27px; float:left;}
.btn_link li .report_btn{ background:url(/assets/report_btn_bg.png) no-repeat 0 0; width:52px; height:27px; float:left;}
.age_box{width:45px;  background:url(/assets/green_bg.png) no-repeat 0 0; text-align:center; padding:8px 0; font-size:26px; line-height:30px;color:#fff; position:absolute; float:left;}
.img_detail{float:left; background:#f5f5f5; width:180px; padding:0 0 5px 14px; position:relative; z-index:99;}
.img_detail small{font-size:13px; line-height:16px; color:#5b5b5b; padding:5px 37px 0 0; width:106px; text-align:right; float:right; font-style:italic;}
.img_detail h3{float:left; width:100%; font-size:19px; line-height:19px; color:#39a0f6; padding:9px 0 0 0;}
.img_detail h4{ float:left; width:100%; font-size:13px; line-height:15px; color:#5b5b5b; padding:4px 0 0 0; font-style:italic;}
.img_detail .green_corner{float:right; position:absolute; right:0px; bottom:0px;}
.img_detail .pink_corner{float:right; position:absolute; right:0px; bottom:0px;}
.age_box.pink{ background:url(/assets/pink_bg1.png) no-repeat 0 0;}
.img_detail h3.pink{ color:#e36b83;}

Answer 1

Your link with the image should be inside the .img_box , which is the element that has the bottom border. Right now it's on the same indentation level, which make them be rendered one after the other and thus makes the border be on top.

Also, if what you want is just the image to be clickable, then you are adding too much inside of the link. You can fix by removing some of the indentation after the image so that the ul and all the rest is outside of the link, having the same indentation of the = link_to ... line

- if user.avatar.present?
  .common_box.box1 data-user-id="#{user.username}"
    .img_box
      = link_to user do
        = image_tag user.avatar.try(:image_url)
      -if @user.present?  
        ul.btn_link.hide
          li 

This is a common error, sometimes indentation can be confusing.