Version 4 browsers have limited and somewhat erratic support for CSS. Making a CSS layout in these browsers, whose market share has now slipped well below 1%, can be extremely challenging. It's become common practice nowadays to completely hide the CSS file from version 4 and earlier browsers. This can be achieved using the @import directive to call up the CSS document:
Version 4 (and earlier) browsers will display a non-styled version of the site as they can't understand this @import directive.
Browser detection for Internet Explorer on the Mac
Quite simply, IE on the Mac does strange things with CSS. The browser's become somewhat obsolete as Microsoft aren't going to be bringing out an updated version. As such, many web developers code their CSS-driven sites so that the site works in IE/Mac, although it may not offer the same level of advanced functionality or design. Provided IE/Mac users can access all areas of the site this is seen as a suitable way of doing things.
To hide a command using the IE/Mac CSS hack4 is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:
/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */
IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there's a certain area of the site not working properly in IE/Mac. If that section isn't fundamental to being able to use the site, you can simply hide it from IE/Mac like so:
#noiemac {display: none}
/* Hide from IE-Mac \*/
#noiemac {display: block;}
/* End hide */
The first CSS rule hides the entire section assigned the noiemac id (i.e. div id="noiemac">). The second CSS rule, which IE/Mac can't see, displays this section.
To hide a command using the IE/Mac CSS hack4 is simple, and involves wrapping a set of dashes and stars around as many CSS rules as you like:
/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */
IE/Mac will simply ignore all these commands. This CSS hack can actually be quite useful if there's a certain area of the site not working properly in IE/Mac. If that section isn't fundamental to being able to use the site, you can simply hide it from IE/Mac like so:
#noiemac {display: none}
/* Hide from IE-Mac \*/
#noiemac {display: block;}
/* End hide */
The first CSS rule hides the entire section assigned the noiemac id (i.e. div id="noiemac">). The second CSS rule, which IE/Mac can't see, displays this section.
Browser detection for Internet Explorer 5
It may seem strange at first to send different CSS rules to different versions of a browser, but in the case of IE5 it's very necessary. This is due to IE5's misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren't included in this value. IE5 however, incoporates these values into the width value causing element widths to become smaller in this browser.
The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):
#header {padding: 2em; border: 0.5em; width: 10em;}
The solution to this problem? Perform browser detection and send a different CSS rule to IE5:
#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}
IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.
The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can't understand CSS commands with empty comment tags either side of the colons. It doesn't look pretty but it does work!
The following CSS rule would result in a width of 10em for all browsers, except IE5 which would give it a width of just 5em (IE5 would incorporate two sets of padding and border, on both the left and right, when calculating the width):
#header {padding: 2em; border: 0.5em; width: 10em;}
The solution to this problem? Perform browser detection and send a different CSS rule to IE5:
#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}
IE5 will use the first width value of 15em, 5em of which will be taken up by the two sets of padding and border (one each for the left and for the right). This would ultimately give the element a width of 10em in IE5.
The 15em value will then be overridden by the second width value of 10em by all browsers except IE5, which for some reason can't understand CSS commands with empty comment tags either side of the colons. It doesn't look pretty but it does work!
Browser detection for Internet Explorer
To send different CSS rules to IE, we can use the child selector command which IE can't understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.
Using the example of the header margin, our CSS command would be:
#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}
IE can't understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.
Using the example of the header margin, our CSS command would be:
#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}
IE can't understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.
How browser detection using CSS hacks works
The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you're trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.
Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it's affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:
#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}
The first command is intended for IE, the second for all other browsers. How does this work? Well, it won't at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.
By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won't even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!
Say for example you wanted the space between your header area and the content to have a gap of 25px in Internet Explorer, or IE as it's affectionately known. This gap looks good in IE but in Firefox, Opera and Safari the gap is huge and a 10px gap looks far better. To achieve this perfect look in all these browsers you would need the following two CSS rules:
#header {margin-bottom: 25px;}
#header {margin-bottom: 10px;}
The first command is intended for IE, the second for all other browsers. How does this work? Well, it won't at the moment because all browsers can understand both CSS rules so will use the second CSS rule because it comes after the first one.
By inserting a CSS hack we can perform our browser detection by hiding the second CSS rule from IE. This means that IE won't even know it exists and will therefore use the first CSS rule. How do we do this? Read on and find out!
How-to: DropDown CSS Menu
This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+. By the end of this tutorial, you will be able to make this example CSS menu.
see more
see more
How to make a Flash movie with a transparent background
Editing HTML code manually
To edit an existing HTML page, add the WMODE parameters to the HTML code.
1. Add the following parameter to the OBJECT tag:
param value="transparent" name="wmode"
2. Add the following parameter to the EMBED tag:
wmode="transparent"
To edit an existing HTML page, add the WMODE parameters to the HTML code.
1. Add the following parameter to the OBJECT tag:
param value="transparent" name="wmode"
2. Add the following parameter to the EMBED tag:
wmode="transparent"
Flash content displays on top of all DHTML layers Issue
A Flash movie in a layer on a DHTML page containing several layers may display above all the layers, regardless of the stacking order ("z-index") of those layers.
Reason
By default, browsers place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer. In older browsers, attempts to place a DHTML layer on top of a Flash layer would fail. Newer browsers add the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash content (see below).
Solution
Use the WMODE parameter to allow layering of Flash content with DHTML layers. The WMODE parameter can be 'window' (default), 'opaque', or 'transparent'. Using a WMODE value of 'opaque' or 'transparent' will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.
Reason
By default, browsers place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer. In older browsers, attempts to place a DHTML layer on top of a Flash layer would fail. Newer browsers add the ability to layer Flash content with DHTML content and in some cases the ability to use transparent backgrounds in the Flash content (see below).
Solution
Use the WMODE parameter to allow layering of Flash content with DHTML layers. The WMODE parameter can be 'window' (default), 'opaque', or 'transparent'. Using a WMODE value of 'opaque' or 'transparent' will prevent a Flash movie from playing in the topmost layer and allow you to adjust the layering of the movie within other layers of the HTML document.
FavIcon Generator
Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand your site and increase it's prominence in your visitor's bookmark menu.
click here
click here
Css Scrollbar color
css code
body {
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color:#000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color:#000000;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color: #000000;
scrollbar-track-color: #000000;
}
CSS Tricks
#onecss{
/* this for mozilla */
margin-top:12px; !important
/* this for IE7 */
#margin-top:16px;
/* this for IE6 */
_margin-top:14px;
}
/* this for mozilla */
margin-top:12px; !important
/* this for IE7 */
#margin-top:16px;
/* this for IE6 */
_margin-top:14px;
}
How to fix IE 6 transparent png background
css
{
display:block;
background-image:url(images/product_sel.png);!important
float:left;
background-repeat:no-repeat;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='fixed', src='http://www.your.com/your/your/images/product_sel.png');
}
{
display:block;
background-image:url(images/product_sel.png);!important
float:left;
background-repeat:no-repeat;
_background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='fixed', src='http://www.your.com/your/your/images/product_sel.png');
}
How to fix IE 6 transparent png problem
In Internet Explorer 6 and below, transparetn pngs do not show correctly. The transparent part of the png is not transparent but a solid color. Anyways to fix that problem add this code to your head tag.
HTML Code:
http://www.dynamicdrive.com/forums/showthread.php?t=22176
HTML Code:
http://www.dynamicdrive.com/forums/showthread.php?t=22176
Subscribe to:
Posts (Atom)