Raw HTML styling versus jQuery generated HTML with the same structure
I've been researching this for a couple of hours now and I just don't understand what the problem is. I was able to highlight what is wrong in this fiddle: http://jsfiddle.net/6r781vz3/ . Click Tab 2!
, then click to add a new tab three times. You will notice that the spacing is different and the original tabs seem to move when selected.
I built a clean CSS tabbed panel with the famous radio button hack. It works great. However, I noticed that a strange addition was needed for it to work (see code below). It's simply <input>
followed by <label>
a followed by a <div>
, as it might appear in the example.
When I tried to add a dynamic new tab there, I noticed that this addition was not necessary, but what I found strange is that the HTML structure is the same, but it behaves differently.
/* I only need this for raw html, and I have no idea why!
Not even idea why I would need this for anything!
I don't need them for dynamic tabs... */
.tabs .tab [type="radio"]:checked + .tab-label {
margin-right: -6px;
}
.tabs .tab [type="radio"]:not(:checked) + .tab-label {
margin-right: -10px;
}
I'm probably looking at something very simple. I don't think this is a bug as it works this way in Chrome and Firefox here.
Can anyone see the problem? :(
source to share
Because when used, the display: inline-block
space between the elements becomes the visual space in the browser. You can handle this with some solutions. One is to use font-size: 0
for the parent element and specific for the child type:
.tabs .tab {
display: inline;
font-size: 0;/*set font size to 0*/
}
.tabs .tab-label {
background-color: rgba(255, 0, 0, 0.3);
font-size: 16px;/*set desire font size*/
display: inline-block;
padding: 7px;
margin: 1px;
position: relative;
vertical-align: bottom;
border-right: 1px solid #ddd;
}
Also the script
source to share