Blog
Please correct any errors below and try again.
CSS Cheats
For any web developer style sheets are an important tool. However, learning and using CSS can be difficult at the beginning. These are few cheats and tricks that can be done by the use of Cascading Style Sheets.
Box Model Hack Alternative – This is usually used to solve problems of rendering in pre-Internet Explorer 6 browsers in PC. The border and padding are added along with the width of the element.
For example-
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;
All browsers can read the first command of width except for IE 5.x. Other browsers read the second one. By putting empty comment tags (/**/) before the colons, we ask IE 5.0 to ignore this command. Use of two rules hides this command for all IE5.x browsers.
Minimum Width – There is another CSS command with which you can use to specify the minimum width for any element. For IE this command means nothing. So we use this-
<body>
<div class="container">
A CSS command is then written to specify a minimum width of 600px.
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
The first command specifies the regular minimum width command while the second command is just for IE to understand (we used a short JavaScript command).
You can also combine both minimum and maximum width and come up with this set of commands.
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" :
document.body.clientWidth > 1200? "1200px" : "auto");
}
Width And Height in IE - IE understands width as min-width and height as min-height. This can be problematic as we require resizable boxes for text to fit in them. However if we use just width and height commands, other browsers don’t utilize them. While using the background images (which is 80px wide and 35px high) we need to be certain that the default size of the image is 80 * 35px. This is in case users input varying text length, so the size of the box expands easily.
The following code solves this-
.box
{
width: 80px;
height: 35px;
}
html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
Text Transformation – CSS can also assist tremendously in text –transform commands. The most common values are text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. For ensuring consistency and stability of style, these are common commands.
Comments
New Comment
About
Welcome to the SnobbySlice blog! Here we post design and developer-centric tutorials, articles, and giveaways. Read up and comment on some of our great content!
