html

How do I vertically align text in a div?

by

The correct way to do this in modern browsers is to use Flexbox. See this answer for details. See below for some older ways that work in older browsers. Vertical Centering in CSS http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Article summary: For a CSS 2 browser, one can use display:table/display:table-cell to center content. A sample is also available at JSFiddle: div … Read more

How do I style a dropdown with only CSS?

by

Here are three solutions: Solution #1 – appearance: none – with Internet Explorer 10 – 11 workaround (Demo) — To hide the default arrow set appearance: none on the select element, then add your own custom arrow with background-image select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Remove default arrow */ background-image: url(…); /* Add custom … Read more

How can I vertically center a div element for all browsers using CSS?

by

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari. .outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; … Read more

vs

by

In HTML5, they are equivalent. Use the shorter one, as it is easier to remember and type. Browser support is fine since it was designed for backwards compatibility.

What does do?

by

November 2021 Update As this answer is now 10+ years old my recommendation would be to leave this tag out altogether, unless you must support old legacy browsers. October 2015 Update This answer was posted several years ago and now the question really should be should you even consider using the X-UA-Compatible tag on your … Read more

Hide scroll bar, but while still being able to scroll

by

Just a test which is working fine. #parent{ width: 100%; height: 100%; overflow: hidden; } #child{ width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; /* So the width will be 100% + 17px */ } Working Fiddle JavaScript: Since the scrollbar width differs in different … Read more

What does enctype=’multipart/form-data’ mean?

by

When you make a POST request, you have to encode the data that forms the body of the request in some way. HTML forms provide three methods of encoding. application/x-www-form-urlencoded (the default) multipart/form-data text/plain Work was being done on adding application/json, but that has been abandoned. (Other encodings are possible with HTTP requests generated using … Read more

Redirect from an HTML page

by

Try using: <meta http-equiv=”refresh” content=”0; url=http://example.com/” /> Note: Place it in the <head> section. Additionally for older browsers if you add a quick link in case it doesn’t refresh correctly: <p><a href=”http://example.com/”>Redirect</a></p> Will appear as Redirect This will still allow you to get to where you’re going with an additional click.

vs. . Which to use?

by

Here’s a page describing the differences (basically you can put html into a <button></button>) And another page describing why people avoid <button></button> (Hint: IE6) Another IE problem when using <button />: And while we’re talking about IE, it’s got a couple of bugs related to the width of buttons. It’ll mysteriously add extra padding when … Read more