Develop Reference

Raw HTML styling differently from jQuery generated HTML with same structure

I've been looking into this for a couple of hours now and I simply can't understand what is the problem. I've been able to isolate what's wrong into this fiddle: http://jsfiddle.net/6r781vz3/. Click on the Tab 2! then click to add a new tab three times. You'll notice the spacing is different, also the raw tabs seem to move when selected.
I've built a pure CSS tabbed pane with the famous radio button hack. It works great. I've noticed, though, that it needed a strange padding to make it work (see code below). They are simply a <input> followed by a <label> and then a <div>, as it can be seem in the example.
When I tried to add a dynamic new tab to it I noticed this padding wasn't necessary, but what I found strange is that the HTML structure is the same, but it's behaving 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 overseeing something really simple. I don't think this is a bug, since it works this way on Chrome and on Firefox here.
Can anyone see the problem? :(

Because when using display: inline-block space between elements become visual space on the browser. You can handle this with some solutions. One is to use font-size: 0 to parent element and specific one on child like:
.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 a fiddle

Styling file input with foundation

I'm using foundation and I've not seen anything in the documentation regarding the file input, only general input elements. But styling the file input is not so easy. And more if you want to keep it coherent with the design of the whole form in all the browsers.
I've seen some solutions like Styling an input type="file" button or https://github.com/filamentgroup/jQuery-Custom-File-Input, but I wanted to know if there's something specific in foundation, as the usual wrapping div styles don't work at all (div.large-3.columns etc.).
How do you do it?

Do you need only button? Or field with file's address too? If only button the simpliest solution is demo
<a class="wrapper">
button name
<input type="file"/>
</a>
.wrapper {
width: 100px;
height: 30px;
overflow: hidden;
position: relative;
}
input {
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-size: 50px; /* some huge for cursor pointer hack */
}
also you can use pseudo-classes for some browsers see article

I just applied the .button class to the input tag.
It looks good enough for me.

For any styling more sophisticated than Foundation's default (e.g. changing the look of the browse button) you will need to edit their implementation of the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}

Thumbnails not maintaining their size in Internet Explorer 6

I'm working with Galleria Classic.
How can I get my thumbnails to all be the same height and width in Internet Explorer? I have adjusted the attributes in the CSS using the (.galleria-thumbnails .galleria-image) style. It works great in Safari and Firefox, but Internet Explorer seems to either stretch the width of some of my thumbs, or it's resizing and cropping them. The height never seems to be effected which is good, but I want them all to be the same. Any ideas?
Here is the script I have just before the closing body tag:
<script>
Galleria.loadTheme('tools/galleria/themes/classic/galleria.classic.js');
</script>
<script>
$('#galleria').galleria({
extend: function() {
this.play(3000);
this.bind(Galleria.LOADFINISH, function(e) {
$(e.imageTarget).click(this.proxy(function(e) {
e.preventDefault(); // removes the garbage
var obj = this.getData();
$.fancybox({
'href': obj.image
});
}))
});
}
});
</script>
The CSS look like this:
.galleria-thumbnails-container {
bottom: 0;
left: 5px;
position: absolute;
z-index: 2;
margin-top: 10px;
width: 400px;
height: 60px;
}
.galleria-carousel .galleria-thumbnails-list {
margin-left: 30px;
margin-right: 30px;
}
.galleria-thumbnails .galleria-image {
height: 40px;
width: 60px;
background: #000;
border: 1px solid #000;
float: left;
cursor: pointer;
margin-right: 5px;
margin-bottom: 0;
margin-left: 0;
text-align: left;
}

Fixing IE Box Model Bug
This is perhaps the most common and frustrating bug in IE 6 and below. It is caused due to IEs different approach in calculating the total size of a box. Let us say you write
.box {
width:100px;
padding:10px;
border:2px solid #CCC;
}
According to W3C specifications, the total width of the box should be 124px, which all the modern browsers follow, while as IE calculates it as 100px only.
This deviation from the specs can cause lot of layout problems. IE 6 can actually get it right if you are in standards-compliant mode. There are various workarounds for this problem. Some of them are:
BOX-IN-A-BOX
According to this technique, we simply use extra markup to fix the issue. Instead of using the padding on the main element, we insert another element inside it and use padding on it. Like
<div class=”box”>
<div class=”box-inner”>
Testing for box model hack
</div>
</div>
In this case our markup will be
.box { width:100px;}
.box-inner {padding:10px;}
SIMPLIFIED BOX MODEL HACK (SBMH)
It uses the CSS parsing bug of Internet Explorer to address the issue. This was first detailed by Andrew Clover
The structure for this hack is
.box {
padding:20px;
width: 100px;
\width: 140px;
w\idth: 100px;
}
The first line width: 100px; is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property \width: 140px; is for IE 5 and 6/quirks mode. The final line w\idth: 100px; will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px.
BOX-SIZING
The newly introduced CSS3 box-sizing property allows you to choose which box-model your browser should use. The W3C box model is called content-box and the Internet Explorer box model is called border-box.
This can make it easier to control the size of elements and to make sizes behave the same across different browsers.
.box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
If the website is rendered in quirks mode, IE6 will render using the non-standard box model, so it will already be rendering as if it had the border-box property on. Modern browsers will adopt the IE’s buggy box-model by setting this property.
Hope this may help...

A good example of implementing 'fashionable' large input text boxes?

A good example of implementing 'fashionable' large input text boxes like those found on google and tumblr?
On tumblr how do they use manage to get the input to flow backwards from where the cursor is in the box - on the final input box for URL.

You can use CSS:
input.FancyText {
background: url(something) no-repeat;
border: none;
text-align: right;
}
You can see Tumblr's CSS using Firebug.

Yes, just do like this:
input { padding: 10px; font-size: 26px; }
and it will make the input elements "fatter".

input.fat
{
text-align: right;
font-size: 28px;
}

As SLaks suggested, you can use CSS to control the appearance of the input text boxes. For example, you could use firebug to discover that the CSS tumblr uses looks like this:
background-color:#F9F8E4; /* when in focus */
background:url("/images/input_bg.png") repeat-x scroll left top #F7FCFF;
border:1px solid #97B5D2;
color:#25313C;
font-family:Georgia,Times,"Times New Roman",serif;
font-size:28px; /* This probably makes it "fat" as you want */
width:480px;
font:13px 'Lucida Grande',Helvetica,Arial,sans-serif;
margin:0;
outline:0 none;
padding:7px;
These are the active styles (which are spread across several different rules). Additionally, the comments are mine.
Try setting the font-size property to make the input area "fat"
Try setting the text-align:right property to make the input "flow to the right" as in the URL field.

Jagged Button edges in Internet Explorer

How do you remove the jagged edges from a wide button in internet explorer? For example:

You can also eliminate Windows XP's styling of buttons (and every other version of Windows) by setting the background-color and/or border-color on your buttons.
Try the following styles:
background-color: black;
color: white;
border-color: red green blue yellow;
You can of course make this much more pleasing to the eyes. But you get my point :)
Stack Overflow uses this approach.

As a workaround, you can remove the blank spaces on each end of the button, which has the effect of decreasing the jagged edges. This is accomplished with the following css and a bit of jQuery:
input.button {
padding: 0 .25em;
width: 0; /* for IE only */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto;
}
$(function(){
$('input[type=button]').addClass('button');
});
The jQuery is for adding the button class. A more in depth write up can be found here.

Setting overflow: visible; on the button will cure the issue in IE 6 and 7.
(See http://jehiah.cz/archive/button-width-in-ie)
Exceptions
In IE 6, if display:block; is also applied to the button, the above fix won't work.
Setting the button to display:inline; in IE 6 will make the fix work.
If you have a button like this within a table cell, then the table cell won't contract to the new, smaller width of the button.
You can fix this in IE 6 by setting width: 0; on the button. However, in IE 7 this will make everything but the text of the button disappear.
(See http://latrine.dgx.cz/the-stretched-buttons-problem-in-ie)
More info on styling buttons:
http://natbat.net/2009/Jun/10/styling-buttons-as-links/

You can change the border style of the button with CSS, like this:
/**************************************************************************
Nav Button format settings
**************************************************************************/
.navButtons
{
font-size: 9px;
font-family: Verdana, sans-serif;
width: 80;
height: 20;
position: relative;
border-style: solid;
border-width: 1;
}

Not too much you can do about it, but the good news is that it is fixed in IE8
http://webbugtrack.blogspot.com/2007/08/bug-101-buttons-render-stretched-and.html