Monday, December 21, 2009

Fixing Div overlay over flash object issue

To solve Div overlay over flash object, you have to set property mode for flash object transparent. So please check the following example:

<object width="170" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,32,18">
<param value="high" name="quality"/>
<param value="transparent" name="wmode"/>
<param value="/images/Flash/Angkor.swf" name="src"/>

<embed width="170" height="250" src="/images/Flash/Angkor.swf" wmode="transparent" quality="high" type="application/x-shockwave-flash"/>
</object>



Note: 
 object tag:
<param name="wmode" value="transparent" />

embed tag:
wmode="transparent"

I would recommend you guys use Object tag because it is exactly HTML Tag. However, embedg tag  is created by Netscape if I remember well. You can search more for this.

Hopefully, this can help you guys!

Monday, November 16, 2009

Adjacent Sibling Selectors

Adjacent sibling selectors allow you to target an element that immediately follows—and that has the same parent as—another element.
      The concept of adjacent sibling selectors may sound a bit convoluted at first, but consider
this example:

<body>
   <h1>This is a header</h1>
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
</body>


      Paragraphs, by default, have a margin of 1 em above and below them. A common style effect is to remove the top margin of a paragraph when it is immediately after a header. The adjacent sibling selector, which is indicated by a plus sign (+), solves this problem for you:

h1 + p {
   margin-top: 0;
}


Although this is incredibly useful in theory, it’s not so useful in the real world. Internet Explorer version 6 and older doesn’t support this selector (Internet Explorer 7 does offer support for it, though). Including it in your styles doesn’t hurt anything—IE will simply ignore it. But those visitors using IE won’t see your adjacent sibling style rules, either.
      This selector doesn’t do a lot for you in the real world at the time of this writing, but it’s still smart to be aware of it, as someday it will come in handy.

Thursday, October 22, 2009

text-overflow for Firefox

Since I really want to truncate my string that is longer than its block's width and add ... to the end, I looked around many sites and blogs. I have found a very interesting thing to deal with this issue. But, it works for all browsers except the most popular browser for most developers which they have been believing for its features. However, we still have a trick to make it happen :-)

Now have a look at this:

<html>
<head>
    <title>Ellipsis</title>
    <style type="text/css">
        .ellipsis { 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            -o-text-overflow: ellipsis; 
            -moz-binding: url('ellipsis.xml#ellipsis'); 
        }
       .test{
        width:250px;
   
       }
     </style>
</head>
<body>
    <div>
        <h4 class="test">
            <a  class="ellipsis" href="#">

              Superior Rooms are richly appointed, decorated in soft tones and offer superior views. The rooms are warm and inviting with hardwood floors and a marble entry.     * Superior Rooms feature air-conditioning, satellite television, a refrigerator and a private bar, and are equipped with telephones, a fax/modem line and high-speed Internet access.    * The bathroom includes a deep soaking tub
            </a>
        </h4>
    </div>

</body>
</html>



  • Explanation 
Please focus on css codes in head section above. you can see one property containing value ellipsis (text-overflow: ellipsis;)-it means it clips the string and add ... to the end, but it supports only for IE. Additionally, -o-text-overflow: ellipsis;  supports for Opera. The last one  -moz-binding: url('ellipsis.xml#ellipsis'); is a hack for firefox. So, you should have an xml file like below then:
<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>


As a result, you will get your string formatted with ... :-)


P.S: It caused me a very headache to get it done, yet I am still not satified with it yet because you see css codes in HTML. I have tried to extract those css codes to external file; unfortunately I could  not get it worked. If you have any experience with it, please drop your comment. You are always welcome!

Additional Resources:

http://www.rikkertkoppes.com/thoughts/2008/6/  
http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html
http://www.quirksmode.org/css/textoverflow.html

 

Tuesday, October 20, 2009

Child Selectors (Basic CSS Cont.)

Child selectors are similar to descendant selectors, but they select only children rather than all ancestors. Child selectors are indicated by a greater-than sign (>).
Example:
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four has a nested list
     <ol>
       <li>Sub-item one</li>
       <li>Sub-item two</li>
     </ol>
  </li>
</ul 
Whereas our descendant selector, ul li { color: blue; }, targeted all li elements in this
example, a similar child selector would only select the first four li elements, as they are direct children of a ul element:
ul > li {
  color: blue
}  
It would not target those li elements in item four’s nested ol list.
Note: Microsoft Internet Explorer 6 and below does not support child selectors.

Thursday, October 8, 2009

Centering Div block within its Div container parent

I have HTML Markup in the following:
<div id="adContainer">
                <div id="textAdFrame">
                    <ul id="adFrame">
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Best HOTEL in town?</h2>
                                <p class="detail">Which hotel has the softest pillow? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Emergency numbers?</h2>
                                <p class="detail">Click here for POLICE, FIRE, AMBULANCE  and other useful numbers!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">The best restaurant in Phnom Penh!</h2>
                                <p class="detail">Where to get the best fried rice? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                    </ul>
                </div>

</div>

Now please have a look at the css codes below:
#adContainer #textAdFrame{
    margin:0 auto;
}

As a result, you will see <div id="textAdFrame"> and its content is at the center of its parent container. You might wonder why it is so useful, because it is different from text-it is a div block. So, you cannot use text-align:center to make div block sit right in the center of its container.

Monday, October 5, 2009

Basic CSS (Cont.)

Descendant Selectors
Descendant selectors, sometimes called contextual selectors, allow you to create style rules that are effective only when an element is the descendant of another one. Descendant selectors are indicated by a space between two elements. As an example, you may want to style only li elements that are descendants of ul lists (as opposed, say, to those who are part of ol lists). You’d do so like this:
ul li {
          color: blue;

}
This rule will make li text blue—but only when the li is contained within a ul element. So, in the following code, all li elements would be blue:
 <ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
   <li>Item four has a nested list
     <ol>
       <li>Sub-item one</li>
       <li>Sub-item two</li>
     </ol>
  </li>

</ul>
Even though the nested list in item four is an ol element, the blue color will still be
applied to its list items because they are the descendants of a ul. Descendant selectors can be useful in targeting items deep in your (X)HTML structure, even when they don’t have an ID or class assigned to them. By stringing together many elements, you can target strong elements inside cite elements inside blockquote elements inside div elements:
div blockquote cite strong {
  color: orange;
}

You can combine these with your class and ID selectors to get even more specific. Perhaps we want only li elements in ul elements with a class of ingredients inside our div with the id value recipes:
div#recipes ul.ingredients li {
  font-size 10px;
}

As you can imagine, descendant selectors are powerful, and it’s no coincidence that descendant selectors are among the most-used types of CSS selectors.

Thursday, September 24, 2009

Basic CSS (Cont.)

Class Selectors
 Let's see HTML here:

<h1 class="warning">Be careful!</h1>
<p class="warning">Every 108 minutes, the button must be pushed. Do not attempt to use the computer for anything other than pushing the button.</p>


Here, we’ve specified a class of warning to both the h1 element and the p (paragraph) element. This gives us a hook on which we can hang styles that is independent of the element type. In CSS, class selectors are indicated by a class name preceded by a period (.); for example:

.warning {
  color: red;
  font-weight: bold;
}

This CSS will apply the styles noted in the declaration (a red, bold font) to all elements that have the class name warning. In our markup, both the h1 and the p elements would become red and bold. We can join an element selector with a class selector like this:

   p.warning {
     color: red;
     font-weight: bold;
   }


This rule will assign the red color and bold weight only to paragraph elements that have been assigned the class warning. It will not apply to other type elements, even if they have the warning class assigned. So, the h1 in our previous markup would be ignored by this style rule, and it would not become red and bold. You can use these rules in combination to save yourself some typing. Take a look at this block of CSS code. We’ve got two style rules, and each has several of the same declarations:

   p.warning {
     color: red;
     font-weight: bold
     font-size: 11px;
     font-family: Arial;
   }
   h1.warning {
     color: red;
     font-weight: bold
     font-size: 24px;
     font-family: Arial;
   }
   A more efficient way to write this is
   .warning {
     color: red;
     font-weight: bold
     font-size: 11px;
     font-family: Arial;
   }
   h1.warning {
     font-size: 24px;
   }


A more efficient way to write this is

.warning {
  color: red;
  font-weight: bold
  font-size: 11px;
  font-family: Arial;
}
h1.warning {
  font-size: 24px;
}


Class selectors can also be chained together to target elements that have multiple class names. For example:

<h1 class="warning">Be careful!</h1>
<p class="warning help">Every 108 minutes, the button must be pushed. Do not attempt to use the computer for anything other than pushing the button.</p>
<p class="help">The code is 4-8-15-16-23-42.</p>


    A .warning selector will target both the h1 and first p elements, since both have the class value warning. A .help selector will target both p elements (both have a class value of help). A chained selector such as .warning.help will select only the first paragraph, since it is the only element that has both classes (warning and help) assigned to it.

Thursday, September 10, 2009

Embedding Youtube Videos as Valid XHTML

One error caused by <embed> tag for youtube video offers me a headache when I tried to validate my html page. Then I found that this tag is not identified as HTML standard tag at all since it is created by Netscape. So, I looked all around the sites and came across an article mentioning about how to make embed youtube video as a valid XHTML. Here is an example:

Format with embed tag
<object width="425" height="350">
    <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U"></param>
   <embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="425" height="350">
  </embed>
</object> 

Another format as a valid XHTML
<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/7_6B6vwE83U">
   <param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" />
</object> 
Hope this is useful for those who care about XHTML validation.

Wednesday, September 9, 2009

Fixing Validation Error with Script inside document

When I validated my html page, I came across with an error with script inside my document (some events such as onclick or onmouseover etc.). According to the standards, it is not allowed to write any JavaScript event in your document unless you declare meta tag in the head section of the page. Please look at example below and focus on bold meta tag.
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>A document with SCRIPT</TITLE>
<META http-equiv="Content-Script-Type" content="text/tcl">
<SCRIPT type="text/vbscript" src="http://someplace.com/progs/vbcalc">
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
...some JavaScript...
</SCRIPT>
</BODY>
</HTML>

Tuesday, September 8, 2009

Basic CSS

 Declarations
  • Declarations are property/value pairs that define visual styles.
  • Properties are things like background color, width, and font family. Values are their counterparts, such as white, 400 pixels, and Arial—or, in the proper syntax:
  • Example:
              background-color: white;
              width: 400px;
              font-family: Arial;


Selectors
Selectors define which part(s) of your (X)HTML document will be affected by the declarations you’ve specified. Several types of selectors are available in CSS, but some of them are not suppoted by all browsers.

Element Selectors
The most basic of all selectors is the element selector (you may have heard them called tag selectors). It is simply the name of an (X)HTML element, and—not surprisingly—it selects all of those elements in the document. Let’s look again at the previous example:

h1 {
   color: blue;
}
h2 {
   color: green;
}


We’ve used h1 and h2 as selectors. These are element selectors that select h1 and h2 elements within the (X)HTML document, respectively. Each rule indicates that the declarations in the declaration block should be applied to the selected element. So, in the previous example, all h1 elements in the page would be blue and all h2 elements would be green. Simple enough, right?

Note: To be continued....

Monday, August 31, 2009

Adding Style to Your (X)HTML Document

The <link> Tag

There are a few ways to add CSS style information to an (X)HTML document, but it’s almostalways a best practice to use the <link> tag. The tag’s purpose is simple: to associate one document with another. For our purposes, let’s use it to associate a CSS document with an XHTML
document, like so:

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />

This simply tells the XHTML document to use the file styles.css as a source of CSS information. We call CSS documents referenced in this way external style sheets. Link tags that reference external style sheets must be placed inside the head element of your (X)HTML document (but not inside any other element).
     The attributes of the <link> tag are fairly straightforward. The rel, or relation, attribute, describes the sort of relationship the linked file has to the (X)HTML file calling it. For CSS stylesheets, its value will always be stylesheet. The type attribute defines the file type of the linked file, and its value should always be text/css for CSS style sheets. As you might expect, the href attribute declares the URL of the style sheet file you’d like to attach to your document. This
   URL may be absolute or relative. The final attribute, media, states for which presentation media the styles contained in the external style sheet should be applied.

Using Multiple Style Sheets

You can also attach multiple style sheets to a single (X)HTML document with the <link> tag. The browser will use all linked style sheets and render the page accordingly.
                                                    
     Also, there exists the concept of an alternate style sheet. In some browsers (notably those powered by the Gecko rendering engine, such as Mozilla, Firefox, and recent versions of (Netscape), these alternate visual presentations of your document will appear in a menu for the visitor to select between. For example:

<link rel="stylesheet" type="text/css" href="styles.css" media="all" title="Default" />
<link rel="alternate stylesheet" type="text/css"
href="low_vision_styles.css" media="all" title="Low vision" />

Here, we’ve defined references to two different style sheets. Because the second one has the value alternate stylesheet for the rel attribute, it will not be used when the page is first presented but will be offered to the user as a choice (only in those browsers that support it, though). Note the use of the title attribute to give each style sheet a name (which will appear in the visitor’s menu of choices). Alternate style sheets are not widely used, probably because of their
limited browser support.
     It’s important to note that any <link> tag with both a title attribute and a rel value of stylesheet will be considered a preferred style sheet. Only one preferred style sheet will be used when the page is initially loaded. Therefore, it’s important that you don’t assign multiple <link> tags both a title attribute and a rel attribute value of stylesheet. <link> tags without a title attribute are designated as persistent style sheets— which means they’ll always be used in the display of the document. More often than not, this is the behavior you’ll want. Because of this, you should only apply a title attribute to your <link> tags if you are referring
to an alternate style sheet.

Thursday, August 27, 2009

IE 7 problem with Table

Since I had a problem with table in IE, I spent much time to deal with it. Now I have found something very helpful for those who work with css and apply with table HTML tag. Here is what IE 7 act:

Internet Explorer 7 does not support table,
table-cell, table-row, table-header-group, table-footer-group,
table-row-troup, table-column-group, table-column, and table-caption.

DOCTYPE: The Most Underappreciated Tag of All

DOCTYPE is an (X)HTML string created primarily as a validation mechanism.
List of Doctype
  •  HTML 4.01 Strict
  •  HTML 4.01 Transitional
  •  XHTML 1.0 Strict
  •  XHTML 1.0 Transitional
HTML 4.01 Strict
  • Allows for a trimmed-down version of HTML 4.01
  • Emphasizes structure over presentation
  • It does not contain deprecated and presentational elements (such as font, center, or u), nor does it allow for frames or link targets.
  • You intend to write only 100 percent clean markup, free of presentational clutter
  • Declare:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
  • Includes all elements and attributes of HTML 4.01 Strict but also supports older presentational attributes, deprecated elements, and link targets.
  • Dealing with legacy files that may still contain some presentational markup (you can always change the DOCTYPE to Strict once you completely clean up your legacy code)
  • Declare:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
  • Emphasizes structure by removing all presentational tags and attributes, and being XHTML
  • Enforces the strict rules of XML on your markup
  • Intend to write only 100 percent clean markup, free of presentational clutter
  • Declare:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
  • Allows for some presentational markup, although again, the XML rules are enforced
  • Dealing with legacy files that may still contain some presentational markup(you can always change the DOCTYPE to Strict once you completely clean up your legacy code)
  • Declare:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wednesday, August 26, 2009

How Does Writing Semantic Markup Help You in the Real World?

  • Good semantic (X)HTML markup helps to promote the accessibility of your site to visitors.
  • Your markup provide the semantic context necessary
    for comprehension of your content.
  • Semantic markup gives the device the information
    it needs to make contextual decisions, and saves you from having to think about all the possible contexts where your content will be consumed (now or in the future)
  • Search engine crawlers also rely on your markup to determine context and weight of vari-
    ous keywords.
  • Facilitates the proper use of CSS and JavaScript by providing many “hooks” on which to apply styles and behaviors.

Tuesday, August 25, 2009

What Is Semantic Markup?

CSS relies completely on the (X)HTML that references it. If you want to use CSS to its fullest potential, it’s imperative that you provide it with clean, structured content marked up with (X)HTML. Before you can do that, you need to understand (X)HTML’s purpose in life. According to the World Wide Web Consortium (W3C), an organization that develops specifications for many of the interoperable technologies used on the Web, “HTML is the lingua franca for publishing hypertext on the World Wide Web . . . HTML uses tags such as h1 to structure text into headings, paragraphs, lists, hypertext links etc.” (www.w3.org/MarkUp/). 
   In simpler terms, (X)HTML is a way of adding structure and meaning (or “semantics”) to textual content. It’s a way of saying, “This line is a header, and these lines make up a paragraph. This text is a list of items, and this text is a link to another document on the Web.” Note that it is not the job of HTML to say, “This text is blue, and this text is red. This section is a column that is to the right of everything else, and this line is in italics.” That presentational information is CSS’s job. When developing for the modern Web—especially if you come from the old school—always remember this: (X)HTML tells us what a piece of content is (or what it means), and not what it looks like.  
   When we refer to “semantic markup,” we are talking about (X)HTML that is free of presentational information and chock-full of meaningful tags that define the structure of the document.

Monday, August 24, 2009

Advantages of Using CSS for Style

  • Easy to add, remove, or update content without to worry about breaking your layout.
  • Easy to change font used for the entire site without having to dig through your content in search of every single tag.
  • Separating the two layers allows a web team to work efficiently; your
    visual designers can focus on design while your content producers focus on content—and neither has to worry about the other getting in their way.
  • Separating the two layers makes it possible to do an entire site redesign
    without touching the content at all—you only need to create a new CSS style sheet.
  • By using external style sheets, separate from your HTML structure, you can make all modifications to the visual presentation of the site by editing just one file rather than the numerous files (possibly numbering in the hundreds!) that make up your content.