HTML input element wider than Containing Div

Following code is not working

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

You can use box-sizing:border-box to take care of this. Just put the following in your css file:

input{box-sizing:border-box} 

It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.

Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw

The points he makes about padding also apply for the border.

There’s even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)

How to increase font size based on window width by using jQuery and CSS

HI

Add below CSS

<style type=”text/css”>

body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */

body.extraWide {font-size:85%;}
body.wide {font-size:75%;}

body.narrow {font-size:50%;}
body.extraNarrow {font-size:40%;}

</style>

and add jQuery with the support of  a set timeout so it would scale in real time. It doesn’t reverse scale though.

$(document).ready(function() {scaleFont();});

function scaleFont() {

var viewPortWidth = $(window).width();

if (viewPortWidth >= 1900) {$(‘body’).addClass(‘extraWide’).removeClass(‘wide, standard, narrow, extraNarrow’)}
else if (viewPortWidth >= 1400) {$(‘body’).addClass(‘wide’).removeClass(‘extraWide, standard, narrow, extraNarrow’)}
else if (viewPortWidth >= 1000) {$(‘body’).addClass(‘standard’).removeClass(‘extraWide, wide, narrow, extraNarrow’)}
else if (viewPortWidth >= 700) {$(‘body’).addClass(‘narrow’).removeClass(‘extraWide, standard, wide, extraNarrow’)}
else {$(‘body’).addClass(‘extraNarrow’).removeClass(‘extraWide, standard, wide, narrow’)}

setTimeout(scaleFont, 100);

}

or you can use it re sizes only if window is resized (avoiding setTimout), and you give body only the exact class it needs

$(document).ready(function() {

scaleFont();

});
$(window).resize(function() {

scaleFont();

});


function scaleFont() {

var viewPortWidth = $(window).width();

if (viewPortWidth >= 1900) {$(‘body’).attr(‘class’,’extraWide’);}
else if (viewPortWidth >= 1400) {$(‘body’).attr(‘class’,’wide’);}
else if (viewPortWidth >= 1000) {$(‘body’).attr(‘class’,”);}
else if (viewPortWidth >= 700) {$(‘body’).attr(‘class’,’narrow’);}
else {$(‘body’).attr(‘class’,’extraNarrow’);}

}

 

Sources: http://stackoverflow.com/questions/3146395/how-to-increase-font-size-based-on-window-width

How To Change Default Text Selection Colour

Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further.

Currently FireFox, Safari, Chrome and Opera support the text section attribute, and the browsers that don’t support it simply ignore the code so nothing will break, so it doesn’t really matter. Continue reading How To Change Default Text Selection Colour

CSS Tip: Targeting IE 5.x, 6 and 7 Separately

In rare situations it may be necessary to provide different rules, not only to the Internet Explorer family in general, but also to each individual version. We can combine 3 CSS Hacks to achieve this.

Differentiating between IE 6 and below and IE 7

Firstly we can target IE 6 and IE 7 separately using the underscore hack and far less well documented star property hack (commonly mistaken for the star HTML hack).

.box { background: #00f; /* all browsers including Mac IE */ *background: #f00; /* IE 7 and below */ _background: #f60; /* IE 6 and below */ padding: 7px; color: #fff; }

In this example all non IE browsers (which also includes Mac IE) see the first background rule. This sets the box colour to blue. Both IE 6 & 7 then see the next rule (prefixed with a star) which overrides the first rule and sets the background colour to red. Finally IE 6 and below also see the final rule (prefixed with an underscore) and set the background colour to orange.

Differentiating between IE 6 and IE 5.x

We can expand on this ruleset by making use of the backslash part of the Simplified Box Model Hack described here. Escaping any letter within the property name which isn’t in the range a-f, A-F, 0-9 will hide that rule from IE 5.x. We can therefore define a rule for IE 5.x, which will also be seen by IE 6, and then override that with a backslash commented rule for IE 6.

.box { background: #00f;/* all browsers including Mac IE */ 
*background: #f00; /* IE 7 and below */ _background: #0f0; /* IE 6 and below */ _bac\kground: #f60; /* IE 6 only */ padding: 7px; color: #fff; } 

The background colour in IE 5.x will now be green rather than the orange specified for IE 6.

Conditional Comments

Of course IE already provides the ability to target different versions via conditional comments. You should generally favour these over the method described above. There are, however, situations where you may want to consider it, such as when the scope of changes are so small that you don’t want to incur the overhead of an additional HTTP request if included in an external file or if don’t want to include the IE specific rules inline.

Disclaimer

You should always be careful when implementing CSS hacks and first make sure that the problem you’re trying to solve is in fact something that needs hacking around and not something you’ve implemented incorrectly. Tantek Çelik article on the Web Standards Project Website provides interesting reading on the history of hacks and when and when not to use them.

a step further for IE 5.0, and IE 5.5 by using comments in your rules. So your example would be:

.box { background: #00f; /* all browsers including Mac IE */ *background: #f00; /* IE 7 and below */ _background/**/: #0f0; /* IE 5.0 */ _background:/**/ #f62; /* IE 5.5 only */ _background/**/:/**/ #f61; /* IE 6 only */ padding: 7px; color: #fff; } 

Sources: http://www.ejeliot.com/blog/63

How To Use Custom Fonts On Your Website With CSS

With CSS (Cascading Style Sheets) you can use custom fonts on your website. Normally your visitors can only see the fonts that are already installed on their computers. So if you use a font that is not installed on your website visitor’s computer then his or her browser will show some other font that is there on the computer. That’s why when you are defining a font for an element (such as <p>) you often specify multiple fonts so that if your preferred font is not available your CSS file should use the available alternatives. Continue reading How To Use Custom Fonts On Your Website With CSS