Hello Friends,
We are currently working on a newer version of the javascript menus. We are updating them to be more robust and enjoyable. We will be adding more and more functionalities very soon… So hang on a while.
Thanks
Black iD Labs Team
Archive for the ‘XHTML & CSS’ Category
Content Rewriter Pro, a service started by Black iD Solutions to help you rewrite content on the fly. Please go to http://www.rewritecontentonline.com to know more about the Content Rewriter Pro! We have launched this service to provide rewritten content on the fly! Get the most of our content rewriting services.
Hi friends,
Here I am to ponder over a small topic, that most of us, in present scenario are tending to forget. Why have we gathered here? What brings you to this post? Why is there internet at all?
The answers to these questions are simple. But, nevertheless, we keep on forgetting them. The internet was created, solely with a purpose of sharing information. Now, with more and more content coming up, and the value of “Information” shooting beyond any bounds, we realize the importance of creation of fresh content. Content has been something that most of the websites are looking for, but alas, not all web developers are well versed with content creation skills.
Well for such web developers, I would advice you to check out different sites that are rich in content. Maybe stir up some article directories like http://www.resourcecity.info, http://www.articlemarketer.com and so on. This is an easy way to collect fresh content. But, remember, rewriting this content is absolutely essential. Duplicate content takes your site into the secondary source list, and this is not good for your rankings. Remember, be innovative and good at rewriting. Look for solutions to rewrite your content.
All the best.
Here is the brief list of CSS Hacks. I will be writing more on CSS hacks soon. But this is one of the most regularly used features by me. So i would rather have it stored than search for it everytime 
- E 6 and below
* html {}- IE 7 and below
*:first-child+html {} * html {}- IE 7 only
*:first-child+html {}- IE 7 and modern browsers only
html>body {}- Modern browsers only (not IE 7)
html>/**/body {}- Recent Opera versions 9 and below
html:first-child {}
For now, you can use these as a simple CSS hacks. I will be adding many more hacks later on. These are actually for my colleages to refer when I am not there, but I thought it might as well help you all also. Do remember to bookmark this topic and visit it regularly for updates on new CSS hack techniques. Also coming soon is a way to apply hack without w3c konwing it
Hi friend, use this code to get all your transparent PNGs fixed in a matter of a few seconds…
<span style=“width:306px;height:60px;display:inline-block; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’transparent.png‘);”>
<img style=“filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);” src=“transparent.png” width=“306″ height=“60″ border=“0″ alt=“”>
</span>
Here comes one more of the irritating IE issues. The dotted line shown as dashed. This was one more bug that came up when I was making a beautiful site. It kept on ruining my design. Moreover, when you scroll in IE, the dotted(Dashed) line suddenly appears solid in some portions. Its really poor for a big giant like Microsoft to have developed such a rubbish software. But it has, and we have to live with it. Especially we developers. Since still a large audience on the web is unaware of the serious issues with Internet Explorer, we are left with no choices but to hack our way through to achieve perfect sites.
Here is my way of attaining pure CSS driven dotted borders.
First of all, I created an 2px x 1px image dot.jpg
(Magnified) 
(original - right-click to save)
<html>
<head>
<title>Dotted Border</title>
<style>
#one_with_dotted_bottom_border
{
border_bottom: dotted 1px #545454;
}
*html #one_with_dotted_bottom_border { border: none; background:url(dot.jpg) repeat-x bottom; padding-bottom: 1px;}
</style>
<body>
<div id="one_with_dotted_bottom_border">This has dotted Bottom Border</div>
</body>
</html>
But this had another problem with it… The W3C standards. According to it, usage of star-html hack for IE is invalid CSS code. So I developed another route to it…
<html>
<head>
<title>Dotted Border</title>
<style>
#one_with_dotted_bottom_border
{
border_bottom: dotted 1px #545454;
}
</style>
<script language='javascript'>
window.onload = function() {
document.write('<style>*html #one_with_dotted_bottom_border { border: none; background:url(dot.jpg) repeat-x bottom; padding-bottom: 1px;}</style>');
}
</script>
<body>
<div id="one_with_dotted_bottom_border">This has dotted Bottom Border</div>
</body>
</html>
This gave me a perfectly validated CSS code which I could use. Hope this helps you too.
Thanks And All the best
Hello friends,
To make this site, I had been struggling a lot to make the site CSS and XHTML valid. Due to the transparency issues with the CSS, it never allowed me to pass the CSS validation. I struggled a lot. Everything done but the damn document never validate. As the title suggests, I found my way in an alternate way of getting my document validated. I am currently working on a few examples. Will show you some examples of the same as soon as I get it on…
Hell friends,
Here is finally the solution for the transparent images in the background issue. The issue can be solved using IE’s AlplaImageLoader filter. The very basic code for the thing is shown below
<style type="text/css">
<!--
#transparent_div {
width:600px;
height:400px;
background-image: url(images/transparent_png.png);
background-repeat: repeat-y;
}
*html #transparent_div { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src=images/transparent_png.png,sizingMethod='scale'); }
</style>
<div id="transprent_div">TRANSPARENT BACKGROUND LAYER</div>
When in my initial stages of development, this was a question that usually used to bug me. You know, seperately declare styles for each type of text you wanted. Then i was really new to the web world. Just that you could repeat a formatting, wasnt too convincing a thought for me to start using CSS. But finally one day, I had a project that required me to write entirely CSS driven sites. That was the time when I actually realised the power of CSS. CSS at the least is able to do the following things for you.
- Keeps presentation totally away from the content, making it easier and thus more lucrative for the search engines to read your pages’ content. Thus increasing your search engine visibility.
- By following the above point, it rejuventes the actual meaning of the web i.e. a place to share information.
- Gives more flexibility and control in the specification of presentational characteristics
- Reduces complexity and repetition in the structural content thus facilitating querying and document transformation options as well as being more readable in code form.
- Allows the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices, thereby enhancing accessibility, since content pages can specify the type of each attached stylesheet.
- Allows reuse of stylesheets (by the author or by others) and reuse by others of document content (e.g., for others who wish to use the content at their own website but with their own styles, etc.)
- It increases download speed, especially when multiple pages reference the same stylesheet, since browsers will often cache stylesheets after the first visit.
This gave me quite a reason to use CSS. With time going by, I came across the actual powers of the CSS, and now, I can proudly say, I use CSS, and make the most of it.
Hi,
The other day I took up the challenge of getting transparent PNGs for my shadow effect usage. I seriously required them, and as usual, IE was there to corrupt my plans. IE6 was having issues showing the PNG. Somehow the background wasnt transparent at all. So then came the issue of getting a transparent background. I had to do a bit of research on the same topic. I found a few good articles on alistapart.com. But then nothing was actually able to get my doubts cleared. I was again stuck up with the same problem. Atleast for that site, I had to use perfectly cut images to get the shadow effect without the transparent PNGs but now I am obsessed with getting this thing done. There are Javascript fixes for the same i.e using the Microsoft’s AlphaImageLoader filter, which obviously works with only the MS browsers. But sadly this works only for acutal images, not background images. So this is ruled out. There are others too such as http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html but yet this remains one unsolved question. I will be on it for a while…