harry_ord Posted August 5, 2017 Share Posted August 5, 2017 Hello This is my website:http://cvkj.agencialosnavegantes.cl/ In the second section ("Nuestros Servicios") i have 3 big buttons that change their backgrounds to purple on hover. The problem i have is why do these buttons appear repeated below, like below every button i have an empty button repeated. Why is this happening? HTML for the buttons <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a></div> Here is the CSS related: .et_pb_button_0.et_pb_button.et_pb_module { width: 290px; border-radius: 50px 50px 50px 50px; padding: 50px ! important; margin: 1%; } .et_pb_button_0 { color: #08a121!important; background-color: #fff; border-width: 1px !important; border-color: #fff; letter-spacing: 0px; font-size: 21px; font-weight: bold !important; } .et_pb_bg_layout_light.et_pb_button_0:hover { color: #fff; background: #574586; } .et_pb_bg_layout_light.et_pb_button_0:hover p { color: #fff; } Link to comment Share on other sites More sharing options...
dsonesuk Posted August 5, 2017 Share Posted August 5, 2017 Viewing the the source, you have a misplaced closing paragraph after the image, that does not have an opening relative paragraph tag before it, so the browser does its best to interpret what is required. Link to comment Share on other sites More sharing options...
harry_ord Posted August 5, 2017 Author Share Posted August 5, 2017 What are you talking about? i have the a paragrapah with its 2 tags just after the image: <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"><img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"><p>Asesoría y Servicios Contable</p> </a> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 5, 2017 Share Posted August 5, 2017 When I look at source I see <div class=" et_pb_row et_pb_row_2"> <div class="et_pb_column et_pb_column_1_3 et_pb_column_3"> <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_text_6"> <div class="et_pb_text_inner"> <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"> </p>xxxx <p>Asesoría y Servicios Contable</p> <p>xxxx</a> </div> </div> </div> <!-- .et_pb_text --> </div> <!-- .et_pb_column --> <div class="et_pb_column et_pb_column_1_3 et_pb_column_4"> <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_text_7"> <div class="et_pb_text_inner"> <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-6.png" class="imagen-servicios"> </p>xxxxx <p>Remuneraciones</p> <p>xxxxxx </a> </div> </div> </div> <!-- .et_pb_text --> </div> <!-- .et_pb_column --> <div class="et_pb_column et_pb_column_1_3 et_pb_column_5"> <div class="et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left et_pb_text_8"> <div class="et_pb_text_inner"> <div class="et_pb_button_module_wrapper et_pb_module et_pb_button_alignment_center"> <a class="et_pb_button boton-contacto et_pb_button_0 et_pb_module et_pb_bg_layout_light" href="#"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-7.png" class="imagen-servicios"> </p>xxxxxx <p>Tributable</p> <p>xxxxxx </a></div> </div> </div> <!-- .et_pb_text --> </div> <!-- .et_pb_column --> </div> <!-- .et_pb_row --> Notice where i have marked with 'xxxxx', you have closing paragraphs tags without opening paragraph before it, and opening paragraph tags without a closing tag within the same parent anchor element. Link to comment Share on other sites More sharing options...
harry_ord Posted August 5, 2017 Author Share Posted August 5, 2017 Ok, i think that happens when you just copy code from someone else. I gave up fixing that and i made it all over myself: <a href="#"> <img src="http://cvkj.agencialosnavegantes.cl/wp-content/uploads/2017/08/Recurso-5.png" style="width:30%;"> <p style="font-size: 21px; font-weight: bold !important;">Asesoría y Servicios Contable</p> </a> And the CSS: .cuadrado-icono { background-color: #fff; } .cuadrado-icono p { color: #08a121; } .cuadrado-icono:hover{ background-color: #453669; color: #fff; } .cuadrado-icono:hover p{ color: #fff; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now