Tech-Today
Web UI design for beginners may be complicated than it seems specially if your developing cross browser application. For example building a web app compatible with firefox, ie6 and ie7.
One ways is to simply load the appropriate css file using:
//And there are the known hacks:
1.) Style for IE only, just prefix the child element with * html:
e.g:
2.) !important tag is ignored by IE6 and below browser so:
eg. background-color: green !important; /* most browser read this, but ignored by ie6 */
3.) IE6 only acceptable prefix _property and -property. Failed on non ie6.
eg. _color: red; /* IE6 and below only */
4.) IE7 only acceptable prefix *property. Failed on non ie7.
eg. *color: red; /* IE7 only */
5.) html *, selects all the child of the html element in ie7 and below only.
6.) >body, selects the body element in ie7 only
eg. >body { background-color: red; } /* ie7 only */
body { background-color: green; } /* non-ie 7 */
Can be extend: >body classname or >body div classname
I know I've tried html>body in firefox and it's working too.
7.) And what I learned last night. I have two dropdown menus, the second is completely below the first. The problem is the first dropdown should have a z-index greater than the second menu so it will overlap the second. Example
Note: I have it working in non-ie.
Actual tags:
Note:
I got most of the ideas from the web just google them for more information.
Even though the z-index of .vertical1 is greater than .horizontal2, items from horizontal2 still shows in the top of the stack, and my conclusion is that IE considers the parent tag and ignores that of the child example:
*z-index of .two will still be 0 inherited from .one.
That's all :-D, Hope I find it useful in the future :-)
- How To Remove Search.conduit Malware In Firefox
This write-up will try to help those who are victims of conduit malware. I myself was a victim when I tried to install a downloader, if I remember correctly :-). I should stay with torrent but anyway here's what I've done that failed and that...
- C# Insert Dynamic Html - Html Injection
While creating a plugin for IE, I've encountered several problems like how to create a popup form when a certain condition has been met. And how to add dynamic css and javascript to the document page. What I did. In IE's DocumentComplete method...
- Table Of Contents
ol li a, ol li a:active, ol li a:link, ol li a:visited { color: #000; } ...
- This Article Shows How A 1px Div Height On Ei6 Can Be Achieved.
I just want a div which has a height of 1 pixel, with background color that will act as a separator. But IE6 seems not to understand this simple tag: .className { height: 1px; padding; border-bottom: 1px solid #e8e8e8; } I tried several other tags like:...
- How To Fix The Css Hover In Ie7 And How Implement Gzip In Your Page
Tool: php, zencart Recently I've encountered a problem with regards to a css dropdown menu. You can see it here: http://topamanila.com. It's the usual dropdown however the css tags aside from all the browsers like safari, firefox, ie7, opera,...
Tech-Today
This article explains some of the browser specific stylesheet hacks (like ie only, firefox, etc) that can be used in developing a web application on different browsers
Web UI design for beginners may be complicated than it seems specially if your developing cross browser application. For example building a web app compatible with firefox, ie6 and ie7.
One ways is to simply load the appropriate css file using:
<!--[if IE]>
<style type="text/css">
@import url(ie-styles.css);
</style>
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie.css" media="all"/>
<![endif]-->
//And there are the known hacks:
1.) Style for IE only, just prefix the child element with * html:
e.g:
* html div {...}
* html div classname {}
2.) !important tag is ignored by IE6 and below browser so:
eg. background-color: green !important; /* most browser read this, but ignored by ie6 */
background-color: white; /* IE6 and below will use this value */
3.) IE6 only acceptable prefix _property and -property. Failed on non ie6.
eg. _color: red; /* IE6 and below only */
color: green; /* firefox, etc */
4.) IE7 only acceptable prefix *property. Failed on non ie7.
eg. *color: red; /* IE7 only */
color: green; /* firefox, ie6 and below, etc */
5.) html *, selects all the child of the html element in ie7 and below only.
.html * { color: red; }
6.) >body, selects the body element in ie7 only
eg. >body { background-color: red; } /* ie7 only */
body { background-color: green; } /* non-ie 7 */
Can be extend: >body classname or >body div classname
I know I've tried html>body in firefox and it's working too.
7.) And what I learned last night. I have two dropdown menus, the second is completely below the first. The problem is the first dropdown should have a z-index greater than the second menu so it will overlap the second. Example
menu1 list /* if i click here dropdown will pop out and cover menu2 list */
menu2 list
Note: I have it working in non-ie.
Actual tags:
<ul class="horizontal1">
<li>
item
<ul class="vertical1">
<li>sub-item</li>
</ul>
<li>
</ul>
<ul class="horizontal2">
<li>
item
<ul class="vertical2">
<li>sub-item</li>
</ul>
<li>
</ul>
//css:
.vertical1 { z-index: 3; }
.horizontal2 { z-index 1; }
Note:
I got most of the ideas from the web just google them for more information.
Even though the z-index of .vertical1 is greater than .horizontal2, items from horizontal2 still shows in the top of the stack, and my conclusion is that IE considers the parent tag and ignores that of the child example:
<div class="one">
<div class="two"></div>
</div>
//css
.one { z-index: 0; }
.two {z-index: 1; }
*z-index of .two will still be 0 inherited from .one.
That's all :-D, Hope I find it useful in the future :-)
- How To Remove Search.conduit Malware In Firefox
This write-up will try to help those who are victims of conduit malware. I myself was a victim when I tried to install a downloader, if I remember correctly :-). I should stay with torrent but anyway here's what I've done that failed and that...
- C# Insert Dynamic Html - Html Injection
While creating a plugin for IE, I've encountered several problems like how to create a popup form when a certain condition has been met. And how to add dynamic css and javascript to the document page. What I did. In IE's DocumentComplete method...
- Table Of Contents
ol li a, ol li a:active, ol li a:link, ol li a:visited { color: #000; } ...
- This Article Shows How A 1px Div Height On Ei6 Can Be Achieved.
I just want a div which has a height of 1 pixel, with background color that will act as a separator. But IE6 seems not to understand this simple tag: .className { height: 1px; padding; border-bottom: 1px solid #e8e8e8; } I tried several other tags like:...
- How To Fix The Css Hover In Ie7 And How Implement Gzip In Your Page
Tool: php, zencart Recently I've encountered a problem with regards to a css dropdown menu. You can see it here: http://topamanila.com. It's the usual dropdown however the css tags aside from all the browsers like safari, firefox, ie7, opera,...