• 0

How to fix this?


Question

http://romabio.com/products/

 

Would like to know what's wrong with the tab system I made. The new coder that updated the code for the site didn't made the type align correct to each other. Here is an illustration of what it use to be. I cicle the tab in green.

 

post-34211-0-39893400-1427827735.png

 

 

If you look at the link above is how it is now. I don't know what the coder did but now I can't get it back how it is now. What I'm I doing wrong? The html is at the bottom and (http://romabio.com/wp-content/themes/devdmbootstrap3-child/css/style-products.css) is the css of it.

<ul id="products-filter" class="top-tabs container">
	<li class="tab paints"><a href="#tabs-paints" title="Paints">Paints<div class="num2" id="num_paints">(17)</div></a></li>
	<li class="tab primers"><a href="#tabs-primers" title="Primers">Primers<div class="num2" id="num_primers">(8)</div></a></li>
	<li class="tab plasters"><a href="#tabs-plasters" title="Plasters">Plasters <div class="num2" id="num_plasters">(9)</div></a></li>
	<li class="tab stains"><a href="#tabs-stains" title="Stains &amp; Varnishes">Stains, Varnishes &amp; Enamels<div class="num2" id="num_stains">(8)</div></a></li>
	<li class="tab specialty"><a href="#tabs-specialty" title="Specialty">Specialty<div class="num2" id="num_specialty">(5)</div></a></li>
</ul>
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

I see the issue in Firefox (I think). The colored stripe is supposed to be inline with the horizontal double stripe (which isn't shown in your screenshot above for some reason), isn't it?

 

Another issue is that when I click on a tab, it remains highlighted (marching ants box around selection). Wonder if there's a way to hide this?

 

I'd expect the issue to be in a CSS somewhere.

Link to comment
Share on other sites

  • 0

Another issue is that when I click on a tab, it remains highlighted (marching ants box around selection). Wonder if there's a way to hide this?

outline-style: none
...should do it. Not that it's your site :p
  • Like 1
Link to comment
Share on other sites

  • 0

Changing CSS values as per those below in Firefox's Inspector fixed the issue for me:

/* style-products.css:350 */

.top-tabs li a.active {    
    padding-bottom: 7px;
    border-bottom: 3px solid #5F1910;
    outline-style: none
    /* Tab is still 'highlighted' while mouse button is pressed. */
}

Or perhaps I'm on the wrong track...

 

EDIT: values changed above. Double line needs shifting up.

  • Like 1
Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.