Nice HTML Tag, Fieldset and Legend
There are a few times that I am asked to make something like this.
I used to think I have to do this by CSS, until recently, I ran into two html tags.
Fieldset and Legend which do just the same thing.
Here is it, of course you have to give style to them with CSS
<field> <legend></legend> </field>
Very userful tag.
Finally understand CSS Clear Fix
Clear Fix is for FF, not IE. I will explain this.
IE wrongly interpret CSS box model and will enlarge outer block div by it’s inside elements. Event you set those inside elements float style.
On the contrary, FF outer block will not be enlarge if insdie blocks are set to float.
Why do I/we want to know this? for me, it is because my footer element. Content blocks set to float left, left, right is a common practice for three columns web page. This will cause your footer element float to the top of your web page. To fix this, add clear:both to the last block elemnet inside.
Abort Operation in IE under ASP.NET+JavaScript
My colleague develop a page using ASP.NET and some javascript. Specifically say, that is a google map API page.
It runs okay under his local development environment but throw a Abort Operation error from IE when I test his page in a real situation remote environment.
The cause is he add some controls dynamically in code-behind and then use GetElementByID() in his javascript. and he invokes his javascript too early.
If you encounter this problem, you can try to postpone your GetElementByID().
IE z-index problem
I always test my website in both IE and FF for a fair compatibility. Then I ran into IE problem again.
Every z-index works fine in FF and I can’t click my buttons in IE.
I then figure out that the z-index is not working correctly in IE.
The cause is because IE needs the parent div of the nested div to have z-index too, then the nested div z-index will ‘active’.
Thanks again, IE.
Importance of reset CSS
When I work on my first CSS layout, I ran into some problem, there are some strange space in-consistence between IE and FF. Then I found out that tags have default style from different browsers! Like margin of body tag, html tag.
I then do some CSS reset by myself like body {margin: 0;}. I recently found out that Yahoo UI can do this for me. Check this out.
Put this CSS link inside your web page and you are done.
<link rel=“stylesheet” type=“text/css” href=“http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css”>
This is really important if you want to have consistence look-n-feel of your web page from different browsers.
Scroll bar using CSS
If you have content that is too long or too wide and
you want to add scroll bar to it, here is what to do.
for example:
<div id=”wrapper”>
<div id=”content”>some content</div>
</div>
If your content width/height is larger than its wrapper,
add overflow:auto to “wrapper” CSS style.
Useful HTML special character
| Character | Representation |
|---|---|
| Non-Breaking Space | |
| “ | " |
| < | < |
| > | > |
| & | & |
| © | © |
| ® | ® |
| ¢ | ¢ |
| ° | ° |
| ² | ² |
| » | » |
| « | « |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| ± | ± |
| ü | ü |
| Ø | Ø |
| ¡ | ¡ |
| ñ | ñ |
1pixel border <table> using CSS
If you trying to do this by setting border of <table>, <tr>, <td>,
you won’t get what you want.
Let’s cut the crap, just use this style.
table, td{
border-color: #000000;
border-style: solid;
}
table{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
}
td{
margin: 0;
border-width: 1px 1px 0 0;
}
CSS positioning and layout in FX and IE
If you have a background image for your website, you made found some strange spacing on the top and left of your background. Usually only occurs in IE, sometimes FX too.
It is because <html> and <body> have some strange default spacing.
Anyway, add this to your CSS and fix it.
html, body, form, fieldset {
margin: 0;
padding: 0;
}
And I found out that empty <div> in IE have a strange 1px height problem.
Here are three fix that people said it works.
1) Put a comment inside the
2) Put inside the
line-height:0.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
1+3 should work well enough.
BTW, here is the position value that I always forget their meaning.
| Value | Description |
|---|---|
| static | Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations) |
| relative | An element with position: relative moves an element relative to its normal position, so “left:20″ adds 20 pixels to the element’s LEFT position |
| absolute | An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties |
| fixed | An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element’s position is specified with the “left”, “top”, “right”, and “bottom” properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode) |
Cheers 
Transparent PNG, IE and FX compatible
The best practice of transparent image is always use .png instead of .gif .
.gif should used for animation, because .png have more color and do more elegant transparency. Static image should always use .png .
But when you view your transparent .png in IE, It will have a background color.
This is another problem caused by mighty IE…
Here is how you fix it by CSS, there are many other fix though.
I like this CSS fix because it follows the separation of content and style rule.
IE
#ID {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="resources/images/UL_corner.png", sizingMethod="scale");
}
Others Browser
html>body #ID {
background-image: url(../images/UL_corner.png);
}
Possible value for sizingMethod:
| crop | Clips the image to fit the dimensions of the object. |
| image | Default. Enlarges or reduces the border of the object to fit the dimensions of the image. |
| scale | Stretches or shrinks the image to fill the borders of the object. |
Keep two things in mind:
1. The ordering needs to be follow, IE then other browsers.
2. The reference link syntax is different for filter and normal CSS. It follows the Javascript Style
-
The Host
-
Recent Comments
maxi326
Scott Gu- Rick Strahl
- MS MVP DBA
- DotBlogs
- 暗黑執行緒
- TheWillWillWeb
- 猴子靈藥
- Weithenn
- MS MVP 馬小靈
- Eddie
- {|ihower.idv.tw| blog }
- 網絡暴民 Jacky’s Blog
- Peace Palace – 技術、評論、生活
- 百分百無聊人生
- An error has occurred; the feed is probably down. Try again later.
