ACTIONpack Posted March 31, 2015 Share Posted March 31, 2015 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. 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 & Varnishes">Stains, Varnishes & 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 More sharing options...
0 briley Posted April 1, 2015 Share Posted April 1, 2015 Alignment-wise the page you linked to looks like the screenshot you posted. Can you go into a little more detail about what alignment is incorrect? Link to comment Share on other sites More sharing options...
0 MikeChipshop Member Posted April 1, 2015 Member Share Posted April 1, 2015 Looks fine here. What OS and browser are you using? Link to comment Share on other sites More sharing options...
0 nyolc8 Posted April 1, 2015 Share Posted April 1, 2015 Looks fine here too (Win8.1, IE11) Link to comment Share on other sites More sharing options...
0 (Account no longer active) Posted April 1, 2015 Share Posted April 1, 2015 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 More sharing options...
0 MikeChipshop Member Posted April 1, 2015 Member Share Posted April 1, 2015 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 (Account no longer active) 1 Share Link to comment Share on other sites More sharing options...
0 (Account no longer active) Posted April 1, 2015 Share Posted April 1, 2015 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. MikeChipshop 1 Share Link to comment Share on other sites More sharing options...
Question
ACTIONpack
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.
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.
Link to comment
Share on other sites
6 answers to this question
Recommended Posts