Posts Tagged ‘css’
Small heights in your site
Posted on: November 23, 2009
- In: CSS
- Leave a Comment
If you are creating a layout, with some very small heights as custom borders for elements. Usually, what you will do is you’ll just have to add height: XXpx to the style’s declarations and think that it should be fine.but check your page once in IE and you’ll probably know what is the answer.
Check out with this example
HTML Code:
<div> id=”smallHeight”</div>
CSS Code:
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
}
Surprised to see a block with around 22px height in IE.
Well you might be thinking now how to fix this issue. Thats very simple one, we have two fixes for such IE bugs.
1 Solution:
Simply add a font-size:0 for the div, this is because IE refuses to set the font-size less than the default one. So the height of the div is set to approx 22px.
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
font-size:0;
}
This will solve your problem.
2 Solution:
Well second solution is to set overflow:hidden for the particular div block.
#smallHeight{
background: #ccc;
border: solid 1px #333;
width: 400px;
height: 2px;
margin: 30px 0;
overflow:hidden;
}
Thats quite a very handy and a simple solution. 🙂
Min-Height Hack in IE
Posted on: November 13, 2009
- In: CSS
- Leave a Comment
As we all know that min-height doesn’t work in IE 6. Say for example if your site doesn’t have much content then you web page will end up till the content is there. So if you want to set some minimum height so that the page looks good. If you set some exact height for the webpage it will lead to a problem when the content is more. So to avoid this issue, there is a solution for this min-height works with mozilla, opera, chrome, safari,IE 7, IE 8 but doesn’t work with IE 6.
So to make it work with IE 6 we need to hack it. Below is the solution for such an issue
Ex:
<div id=”container”>
Some content goes here…..
</div>
<style type=”text/css” >
#container{
min-height:300px;
}
</style>
The above code works only with mozilla, safari, chrome, opera, IE7 & 8.
Solution for IE 6:
#container{
min-height:300px;
height:auto !important; //IE hack
height:300px;
}
Thats it, so simple solution no CSS 3 required, no external javascript required. Check it out.
How to optimise your website
Posted on: August 19, 2009
We have seen most of us are very keen in designing our website very nicely. To do so we end up with using more good images, css styles and javaScript . So its not only important to develop a good website also to optimise your website. As we why we all others who view your website tend to see that the website should load fast, the moment he types the url on the browser if the user finds that the site is taking time to load. The user gets pissed of and he closes the browser. So its better that you optimise your website. Now you might be thinking of how to optimise website. There are some tips for doing this.
1. Use CSS Sprites : Rather than using multiple CSS background images for your page, instead use CSS sprites that is combine all these into one graphic image. Which will reduce your image size and also the HTTP requests. Say if there are say 5 images so there will be 5 HTTP request generated and sent your server. So rather then 5 images combine them into one, so there will be only one HTTP request.
Ex:
#menu ul li{
background:url(images/menuicons.gif) no-repeat;
}
#menu ul li.design{
background-position:0px -50px;
}
by this the size and HTTP requests will be considerably reduced.
2. Use an external CDN : A CDN is nothing but Content Delivery Network, which basically means use of scripts that are hosted on other sites.
Now you might be thinking why should I use the scripts of others. The reason is users might not download the scripts when they visit your website as it will be already cached.
Google has an AJAX Libraries API that you can use.
<script src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js” type=”text/javascript”></script>
3. Put JavaScript at the bottom: Put all those JS that are not required at the very begining of your webpage. By doing this it will make your content load first and then the rest of the JS.
4. Optimise graphics for web: Save your images using photoshop, with save for web as option. By which you can check the quality of your image and which will help you reducing your image size also.
By these I think you can optimise most of the website. I had tried this one for my website. I think even you should have a try for this and do comment on whether your site got optimised or not.
These are some of the tips for making your CSS coding a pain free.
1. Keep it simple : Write your CSS code as simple as possible, do not write any complicated code which will confuse yourself. Plan your layout logically and work on it with top down approach, which make yourself comfortable to work on your design.
2. Use less Div’s : Use less div tags as much as possible. Too many div’s will lead to increase your number of lines of code and later if you end up with missing some closing div’s then again a mere problem to solve it.
For example:
<div id=”header”>
<div class=”bold”>Heading</div>
</div>
<div id=”subheader”>
*lt;div class=”bold”>Sub Heading</div>
</div>
<div>This is the content</div>
This code can be reduced to
<h1>Heading</h1>
&l;h3>Sub Heading</h3>
<p>This is the content</p>
3. Validate your code : Validate your HTML and CSS code. Validate it regularly do not wait until you have finished the coding your design. It may happen that you might have used some inappropriate feature that might lead you to fix it with a lot of waste of your time. Validating regulary will not lead you to such problems.
4. Hacks : Do not use hacks unless it is a known and documented bug. If you find that you are looking for a hack to fix a certain issue in your design then first do some research (Google is your friend here) and try to identify the issue you are having problems with.
5. Flexibility : Always remember that a web page isn’t the same as a printed page and that ultimately the user has more control over how your page will appear than you do. With this in mind try to allow for some flexibility in your design so that things like text resizing issues don’t break your layout. Don’t make everything a fixed height/width or at least use ems to allow the layout to expand when text is resized.
6. Browsers Support : Avery important tip as far as I am concerned. Its very difficult to make it compatible with all the browsers. So I think either talk to your client or customer to which all browsers he is aiming for.
So once decided which to support then we can aim for only those browsers, make sure that you have access to all those browsers in some way.
Do not try to make these changes at the end or wait till you finish coding the design that may lead to a tedious job for you to change.
CSS sprites group multiple images into one composite image and display them using CSS background positioning. By this you can save significant amount of HTTP requests by combining it into one or more sprites and using them by CSS.
Before knowing more about Sprites you need to know why to use CSS Sprites. Now you know that what Sprites are all about(grouping of multiple images), you might be thinking why to combine all those images? isin’t it quicker to use smaller images. I say no, by using smaller images you might be thinking that I am loading the site by a loading faster by loading bits. All that technique did was fool the eye to make it look like the page was loading faster by loading bits and pieces all over at once. Each one of these images use a seperate HTTP request, and more number of these require more time and less efficient is your page.
So lets see now how this is achieved.To achieve this you need to do the following,
1. First and the foremost thing is to group all your images(usually icons and decorative images) into a sprite.
2. Then align these images into one or more lines.
3. Then use this image as a background image of some element and position it to X and Y pixels accordingly.
By doing this you get an increased speed and reduced HTTP requests.
This is the simple technique and easy method to improve your web performance.
- In: CSS | HTML
- Leave a Comment
Hanging Indents makes the first line start from its margin and the rest will get flushed towards right. To do this look for the below code, you will get a clear idea.
HTML code
<p class=”hangingindent”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis id enim eu mauris condimentum pharetra. Praesent hendrerit, odio non condimentum cursus, Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
CSS for the above goes here
<style>
.hangingindent {
padding-left: 22px ;
text-indent: -22px ;
}
</style>
- In: CSS | HTML
- Leave a Comment
Well I have found this serious problem when I need to make this inline styles override. I always thought that this could be impossible to override inline styles using style sheet. But later found one solution to do this, its very easy to do here is the sample code to override inline styles
<div class=”container”>
<span style=”font-weight: bold; color: red;”>Some text goes here…</span>
</div>
<style type=”text/css”>
.container span{
font-weight: normal !important;
color: #000000 !important;
}
</style>
Mywebdunia's Blog 