Posts Tagged ‘HTML’

Problem: Sometimes the Joomla developer face a problem on their server.The problem is like that:

Solution: Try adding the following line to your .htaccess file, should help.

DirectoryIndex index.php index.htm

The key is to have index.php early and allows the server to accept the index.php file as the start page.

If this does not work, ie: Your host will not allow it, create a blank index.htm page, and put the following code it.

<html>

<head>
<title>Redirecting.....</title>
<meta Http-Equiv="Refresh" content="0;url=http://www.yoursite.co.nz/index.php">
</head>

<body>&nbsp;</body>
</html>

If necessary, you could do a similar one in the admin folder too, but add administrator/ before the index.php

Thanks.

Input backgrounds scrolling Problem in IE

Posted: May 13, 2011 in CSS, HTML
Tags: ,

It is assumed that when we apply a background image to an input field that it is fixed. This is the case when short amounts of text is inputed, but once you type more than the length of the field in Internet Explorer, the background starts to move along with the text. Unfortunately, a simple background-attachment: fixed does not fix this problem.

Here is an example of what happens:

A work around which I stumbled upon is to wrap the input field in a DIV and apply the background to this, whilst making the input field’s background transparent. Your code should look like this:

#input_wrapper {
width: 180px;
height: 26px;
background: url('input_bg.png') no-repeat top left;
}
input.search {
width: 156px;
height: 16px;
background: transparent;
border: 0;
padding: 5px 12px;
margin: 0;
}

This is tested in Internet Explorer 6+ and Firefox. So Apply this solution. 🙂

When I was new comer of Web World 4 years ago, it’s too much difficult to me to fixing various browsers. I was a problem too for that  because I was self learner. My friend was online and collect some hack code for IE at various time from various blogs at that time.That is very helpful to me and today I am sharing from my collection via this post.
IE-6 ONLY

* html #div  {     margin-top: 30px; }


IE-7 ONLY

*+html #div { margin-top: 30px; }

NON IE-7 ONLY:

#div {    _margin-top: 30px; }


Hide from IE 6 and LOWER:

#div {    margin-top/**/: 30px; } 
html > body #div {       margin-top: 30px; }
 

Sometime we searching the conditional stylesheet for Internet Explorer (IE) for various version and me too :D. Today I write in my blog about that I hope it will be so helpful to all web developers and of course me :D.Because this blog is my note book.

This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that’s just regular ol’ HTML comments. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt means “greater than”, gte means “greater than or equal”, lt means “less than”, lte means “less than or equal.”

Target ALL VERSIONS of IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->         
<link rel="stylesheet" type="text/css" href="not-ie.css" />  
<!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>         
<link rel="stylesheet" type="text/css" href="ie7.css"> 
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>         
<link rel="stylesheet" type="text/css" href="ie6.css" /> 
<![endif]--> 

Target IE 5 ONLY

<!--[if IE 5]>         
<link rel="stylesheet" type="text/css" href="ie5.css" /> 
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]> 
<link rel="stylesheet" type="text/css" href="ie55.css" /> 
<![endif]--> 

Target IE 6 and LOWER

<!--[if lt IE 7]>         
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]-->
<!--[if lte IE 6]>
 <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

Target IE 7 and LOWER

<!--[if lt IE 8]>       
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]-->
<!--[if lte IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

Target IE 8 and LOWER

<!--[if lt IE 9]>         
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />  
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>         
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]-->

<!--[if gte IE 6]> <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> <![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>         
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->
<!--[if gte IE 7]> 
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>        
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]-->
<!--[if gte IE 8]> 
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]-->

Fun with transparent colors by CSS

Posted: March 16, 2011 in CSS, HTML
Tags: ,

As a web designer you might get into situations where you need to make elemens transparent so that they can be seen through each other. An example is a vertical menu that roll down over the rest of the page. It looks really nice if it is transparent so that you can still see the background for instance. A way to do this is simply to set a color for that element (div) and make it transperent to some degree.

Here is an example on how to put several layers on an image with different colors on top of each other where each layer is transperent to different degrees.

Use css-classes that looks something like this. The first one contains the background color and is on the back. The other are nested inside it.

.divImage {
background: url(images/someImage.jpg) no-repeat;
height:300px;
width:300px;
}

.div1 {
background: #FF0000;
height:200px;
width:200px;
-moz-opacity:0.4;
opacity: 0.4;
filter:alpha(opacity=40);
}

.div2 {
background: #00FF00;
height:100px;
width:100px;
-moz-opacity:0.6;   /*For Mozila Firefox*/
opacity: 0.6;
filter:alpha(opacity=60);  /*hack code for IE */
}

.div3 {
background: #0000FF;
height:50px;
width:50px;
-moz-opacity:0.6; /*For Mozila Firefox*/
opacity: 0.6;
filter:alpha(opacity=60);  /*hack code for IE*/
}

So the HTML-code would simply look something like this to get a similar behaviour as in the example above:

<div class=”divImage”>
<div class=”div1″>
<div class=”div2″>
<div class=”div3″></div>
</div>
</div>
</div>

Enjoy 😉