Common mistakes and misconceptions with CSS November 10, 2008
Posted by fofo in CSS, XHTML.Tags: CSS, IE8, XHTML
add a comment
In this long post, I will try to highlight some mistakes that are made by many designers-developers using CSS. Many of those mistakes have a simple explanation but if you do not know the answer can cause anxiety and frustration. I will also try to clarify some misconceptions regarding the use of CSS.
The order of the style and link elements in the HEAD section of the HTML/XHTML matters
Recently I received an anxious phone call from a friend of mine, a web enthusiast. He had a simple document and he had defined an internal stylesheet and an external stylesheet to style the various elements in his document which is not a best practice to say the least…
He wanted to style the H1 elements in his document. So he typed in the HEAD section of the document the following
<style type=”text/css”>
h1{
color:maroon;
}
</style>
just below this statement there was a link to an external stylesheet
<link rel=”stylesheet” type=”text/css” href=”test1.css” />
inside this stylesheet there is the following declaration
h1{
color:aqua;
}
But my friend paid no attention to this…. After all declarations in a style element overwrite those in an external stylesheet. Much to his surprise when he viewed the page with IE,Firefox,Opera he saw that the color of the H1 tags was “aqua” instead of “maroon” which was specified in the internal stylesheet. What happened is this. It is true that internal stylesheet’s property values overwrite those values for the same element in an external stylsheet but only when the <style></style> tags are specified after the <link rel=….> element. In our case the <link element …> is specified after and that is why the values of the external link prevail.
Be careful of the shorthand notation
When we want to specify values for related properties of a particular element we can do so in a single declaration.
for example we can do this
margin: 1em 3em 4em 5em;
This is equivalent with this
margin-top: 1em;
margin-right: 3em;
margin-bottom: 4em;
margin-left: 5em;
a very common mistake is to presume that if we leave blank(not set a value) this will result to 0em=0.
well if you write this (and please remember that we go from top->right->bottom->left)
margin: 1em 3em 4em;
the missing side is assigned the same value as the one opposite it. So in this case with the shorthand notation used above we have
margin-top: 1em;
margin-right: 3em;
margin-bottom: 4em;
margin-left: 3em;
The margin-left value is equal to 3em and not to zero.
Let’s see another example that falls in the same category. I use all the time the shorthand notation to specify values for the background property.
for example
background: #000 url(myimage.jpg) no-repeat fixed left top;
this is of course equivalent with this
background-color: #000;
background-image:url(myimage.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
Please try to use this order as it was presented here. Some people think if we omit one value in the shorthand notation, that means that simply there is no value for this property. Well, this is not the case.The initial value will be assigned to the missing property.
Initial value is the value for a property when there in no value specified for that property and it is not inherited. The initial value for each property is specified in the CSS specification.
so for the property in question ,background, the initial values for the
background-color:transparent;
background-repeat:repeat;
background-attachment:scroll;
background-position: 0% 0%;
If you write for example
background-color:#000;
background:url(myimage.jpg);
The background color will not be black, because this value #000 will be overwritten in the shorthand notation by this value background-color:transparent;
So, do not mix shorthand and standard notation.
Do not omit the Doctype declaration
If you omit the doctype declaration, e.g
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
the browser will always render the document in quirks mode and in most cases we do not want that.
By rendering in the quirks mode we will see our web site showing in a way we do not want.
For example the Internet Explorer 5 box model will kick off instead of the normal CSS box model and all the dimensions will be calculated according to this model and not the CSS box model as it was defined in the CSS2.1 specification.
All modern editors like Dreamweaver add this in the top of the HTML document.
Some people believe if they just add this
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>
without adding this line
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
the browser will render in standards mode. No, it will render in quirks mode.
Be careful with case sensitivity
CSS is case insensitive according to the CSS specification. If we have a closer look to these specs we will see that cannot control the document markup and how case sensitivity is handled from the mark up point of view. HTML is case insensitive but the id and class attributes are not. XHTML, being XML, is always case sensitive.
so if we write in our external css file
p{color:#ff0;}
that will match all elements in an HTML mark up that has <p>…</p> , <P>…</P> tags.
but if we write in our external css file
.special {color:navy;}
and type in our document <p class=”SPECIAL”>hello</P>, the color navy will not be applied to our paragraph, since the id,class attributes are case sensitive. In order to avoid all confusion please be consistent with your case matching. i write all tags in html/xhtml in lowercase and i follow the same technique in my css document.
Do not quote attribute-property values
Lots of times i see CSS beginners, writing these CSS statements
p{color:”navy”;} or h1{font-size:”2.2em”}
It will not work and will cause you some unwanted frustration.
Do not leave whitespace between the number and the unit
If you type this css statement h1{font-size:2.3 em} it will not work because there is a whitespace between 2.3 and em.
Do not leave whitespace between the dot and the class name. the same goes for id selectors
This notation in a css file will not work
. special or # wrapper
make sure you do not leave any spaces between the class/id selector name and the dot(.) or hash(#).
Use relative and absolute values correctly
Use mm,cm,in(inches),pt(points),pc(picas) when you specify styles for the print media. On the other hand use relative units like em,ex,px when you specify styles for on-screen display. Nothing will crash if you do otherwise but it is almost certain that you will create illegble output.
Do not use color-system color keywords
It is always better to use this kind of notation when we want to specify color for our elements
1) color:#ff0000; or the equivalent color:#f00;
2) color:rgb(23, 156, 234);
3) color:rgb(12%, 35% , 67%);
do not use the color keywords like gray,lime,maroon or system colors like buttonface,buttontext.
Our markup will display differently between various browsers when using color or system color names.
The at rules @charset,@import must be the first things in a CSS file
When using the @charset or @import at rules make sure they are the first lines in the css file otherwise they will be ignored.
so if you write this inside your css file
html
{
font-size:1.2em;
color:#000;
}
and then
@import url(“style.css”)
the above at-rule will be ignored.
and do not use the @page rule. it is not supported at all in all browsers.
Be careful when you use the :focus and the :lang pseudo class
If you use the :focus pseudo class make sure you understand that IE 7 and earlier versions do not support it or implement it in a buggy way. IE 5.5 and IE 6 for example when they encounter a css file with the :focus pseudo class they apply the values that are specified in the :active pseudo class!!!
In IE 8.0, :focus it will be fully supported. The :lang pseudo class is not supported in version IE7 and earlier versions. It will be supported in IE 8.
Be careful when you use the inherit keyword
First of all for versions of Internet Explorer up to version 7 the inherit keyword is not supported.
when using the background property for example and using the shorthand notation you cannot use the inherit keyword.
the followinf css snippet is invalid
#wrapper {
background:#67aacc inherit right top;
}
Be careful of the font-size property and inheritance
If you write the following HTML markup
<div id=”content”>
hello
<p>click <a href=”http://www.microsoft.com”>here</a> to visit the microsoft website</p>
</div>
and style the above markup with this css snippet
#content,p,a{
font-size:190%;
}
we will not have all the elements (div,p,a) with a font size with 1.9 bigger than the normal font-size.
The font-size property is inherited. But writing the CSS like before we will have a markup that has a p element 1.9 bigger than its parent element (div element) and an a element that is 1.9 times bigger than its parent element(p tag).
If you want to have all elements(children element) of the div element to have the same font-size you must rewrite the CSS like this
#content{
font-size:190%;
}
Please be careful with nested elements and inherited properties , especially with tables,cells and rows….
Stay clear of the Media Queries
In CSS3 specification media queries are defined, which give us extra power when it comes to the control we have with CSS over how our content is rendered accross different devices.Basically media queries are logical expressions that evaluate true or false. They are used with conjuction with media types (e.g screen).
if you need to have a look at all the properties and respective values browse here
http://www.w3.org/TR/css3-mediaqueries/
Well, no modern browsers supports these new specs. So do not use them…. There is some partial support from Opera 9 and Safari 3 but still, do not use them
Avoid the vendor specific properties
Try not to use properties that are only operational and target a speficic bwowser like Firefox or Internet Explorer, unless there is absolutely no other way..
Create vertical and horizontal navigation menus with CSS May 31, 2008
Posted by fofo in CSS.Tags: CSS
5 comments
The most often question i get when explaining XHTML and CSS is how to get create and style vertical and horizontal navigation menus with CSS. i will try to explain the process in this post and show how easy it is to change from a vertical to a horizontal menu. We always start by having a the proper markup. The main point to note here is that we are going to mark up the navigation links as an unordered lists.
Have a look at the code below:
<ul>
<li><a href=”/”>Home</a></li>
<li><a href=”/company/”>Company</a></li>
<li><a href=”/products/”>Products</a></li>
<li><a href=”/services/”>Services</a></li>
<li><a href=”/people/”>People</a></li>
<li><a href=”/contact/”>Contact</a></li>
</ul>
because we need to distinguish this list from other lists in the page we will give it an id, navigation.
so the mark up will become like this
<ul id = “navigation”>
<li><a href=”/”>Home</a></li>
<li><a href=”/company/”>Company</a></li>
<li><a href=”/products/”>Products</a></li>
<li><a href=”/services/”>Services</a></li>
<li><a href=”/people/”>People</a></li>
<li><a href=”/contact/”>Contact</a></li>
</ul>
Sometimes we need to seperate each item in the list from the other items. we can do that by adding an id to each element in the list. The markup becomes like this
<ul id = “navigation”>
<li id=”hom”><a href=”/”>Home</a></li>
<li id=”comp”><a href=”/company/”>Company</a></li>
<li id=”prod”><a href=”/products/”>Products</a></li>
<li id=”serv”><a href=”/services/”>Services</a></li>
<li id=”peop”><a href=”/people/”>People</a></li>
<li id=”con”><a href=”/contact/”>Contact</a></li>
</ul>
now we have the markup ready we can worry about the CSS. Let’s style the navigation id.Some straightforward CSS code follows. We style the background, and select a width and set padding and margin to 0.
#navigation {
margin: 0;
padding: 0;
background: #2683AE;
list-style-type: none;
width: 180px;
font-size:1.4em;
font-family:Verdana;
}
Then we set the CSS rules for the link elements.The rules are easy to follow.We add a border as well.
#navigation a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-bottom: 1px solid #FFF;
}
Then we create the CSS rules for the hover.
#navigation a:hover {
background: #C1C1C1;
color:red;
}
This last bit of CSS removes the bottom white border from the last link in the menu.
#navigation #con a {
border: none;
}
This is the complete CSS. Place the code below in a seperate file with the name vertical.css
#navigation {
margin: 0;
padding: 0;
background: #2683AE;
list-style-type: none;
width: 180px;
font-size:1.4em;
font-family:Verdana;
}
#navigation a {
display: block;
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5;
border-bottom: 1px solid #FFF;
}
#navigation a:hover {
background: #C1C1C1;
color:red;
}
#navigation #con a {
border: none;
}
The completed markup follows. sav the code below in a file with a name of your choice and place it in the same folder where the .css file is.
<!DOCTYPE html PUBLIC “-//W3C//dtD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>Vertical Navigation</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”vertical.css” media=”screen” />
</head>
<body id=”body_his”>
<ul id=”navigation”>
<li id=”hom”><a href=”/”>Home</a></li>
<li id=”comp”><a href=”/company/”>Company</a></li>
<li id=”prod”><a href=”/products/”>Products</a></li>
<li id=”serv”><a href=”/services/”>Services</a></li>
<li id=”peop”><a href=”/people/”>People</a></li>
<li id=”con”><a href=”/contact/”>Contact</a></li>
</ul>
</body>
</html>
Now if we need to change that vertical navigation menu to a horizontal menu we do not have to change our markup just the CSS code!!! the complete code for styling the menu horizontally follows. Have a look at the minor changes in the CSS rules that change our menu from vertical to horizontal.
#navigation {
margin: 0;
padding: 0;
background: #2683AE;
list-style-type: none;
width: 1026px;
font-size:1.4em;
float:left;
}
#navigation li{
margin:0;
padding:0;
float:left;
}
#navigation a {
float:left;
width:168px;
text-align:center;
color: #FFF;
text-decoration: none;
line-height: 2.5;
border-right:3px solid #fff;
}
#navigation a:hover {
background: #C1C1C1;
color:red;
}
Headings, Image Replacement and CSS May 27, 2008
Posted by fofo in CSS.Tags: CSS
add a comment
When we design our website or write an article that is going to be posted on a website we need to make this website or article to stand out. We need to draw the attention of our web visitors. One way to accomplish that is to create and style really attractive headings that give the visitor or the reader a quick idea of what the text underneath contain.We style headers with the use of CSS to try to make them unique for each site we create. We have a very limited number of fonts to use in our web site. We have to rely on these fonts(Arial,Tahoma,Times New Roman) if we want our headings to be reliably represented by most browsers across the Web. There is a problem in differentiating our site from the next one due to the limited number of fonts to use in a browser. What we can do is to create a very attractive header like an image and then replace the text with that image. One of the most popular ways to achieve that is to use the text-indent property.
Before we explain what we are about to do, here is the contents of the html file.
********************************************************
<DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<title></title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<style type=”text/css” media=”screen”>
@import “headimagereplacement.css”;
</style>
</head>
<body>
<h1>
.NET ROCKS
</h1>
</body>
</html>
******************************************************
save this file with a .html extension to your desktop or any other folder.
The .css file for the .html file follows:
**********************************
h1 {
height: 33px;
background-image: url(images/NET.jpg);
background-repeat: no-repeat;
text-indent:-9999px;
}
*********************************
you must save this file in the same folder with the .html file and with the name headimagereplacement.css.
We will try to make the text in the h1 element to move off the screen and replace it with the image below.
Save this image in an “images” folder inside the directory where you place the .html and .css file.
If we do not use the text-indent property then the text of the h1 element will be visible. So that is why we use the text-indent:-9999px, to move it to so far in the left that that does not appear in the screen.Also note that we have to specify the height for the heading element so that it is the same with the height of the image. That solves the problem so far. But happens in the case that users have their images turned off in their browser?
The solution we have so far is inadequate. We must provide some alternative text for those users with images turned off. So instead of moving the text itself we need to hide it behind the image we will replace it with. Thus the image will appear to those who have images enabled while the text will display for those who don’t. we have to cgange slightly the HTML file
*****
<h1>
<span></span> .NET ROCKS
</h1>
****
we need another element inside the h1 element so we can apply a background image to cover up the HTML text. The changes in the .css file follow
*********************
h1 {
height: 33px;
width:169px;
position:relative;
overflow:hidden;
}
h1 span {
position: absolute;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
background-image: url(images/net.jpg);
background-repeat: no-repeat;
}
*********************
We set the height and width of the h1 element to the dimensions of the image so we do not face the problem of the text becoming greater than the image. We also use the overflow:hidden property to make sure no text exceeds the boundaries of h1.
We set the width and the height of the span to 100% so that it has the same size of the h1.
By setting the position:absolute of the span tag, it takes the span tag out of the document flow, so the text of the h1 flows below it.
Order of CSS rules matters!!!!!!!!!! April 1, 2008
Posted by fofo in CSS.Tags: CSS, css elements, css order, css rules
2 comments
I enjoy giving seminars on topics that involve the server side technologies of the web world. but i equally enjoy giving seminars on client side technologies, especially CSS.
one question i often get, and seems to puzzle a lot of people, is the styling of the hyperlink elements in an html document and more specifically why they do not get the underline effect in the hyperlinks, when they hover over. most of them are adamant that they have specified the rules correctly in the external .css. In most cases they have done so correctly. but they do not understand one thing that is of huge importance in CSS.
the order of our rules matters!!!!!!!!!!!!!!!!!!!!
i will try to explain with an example.
when we set certain rules in a .css file for hyperlinks the browser will look for its default built in rule for hyperlinks that says that hyperlinks should be blue and underlined.
so for example, in an external .css file(e.g mystyles.css) we can have the following css code to style our hyperlinks with our own rules
a:link, a:visited{
font-style:italic;
font-weight:bold;
text-decoration:none;
}
with the above rule,among other things, we take out the underline from all the links.
to achieve the underline effect when we hover over a link, we just form a new rule
a:hover, a:focus{
text-decoration:underline;
}
if we have these rules with that order then everything works fine.
but if you have the rules in the .css file like this
a:hover, a:focus{
text-decoration:underline;
}
a:link, a:visited{
font-style:italic;
font-weight:bold;
text-decoration:none;
}
then you will not see the underline effect when you hover over hyperlinks. so for all people out there who know how to style the hyperlink elements but do not see the correct output in the browser window, do not panick and do not blame the browser for “not supporting” that behavior.Just keep in mind, the order of css rules matters.
Microsoft announced that IE 8 will render in standards mode March 13, 2008
Posted by fofo in Internet Explorer.Tags: CSS, IE7, IE8, Javascript
add a comment
Microsoft had a sudden change of heart (and mind) regarding the way the new IE 8 will render a web page.
Initially MS announced that IE 8 will support version targeting. What MS was proposing in simple words is this:
If a web developer created a well-formed document with a strict DOCTYPE, IE 8 will behave exactly as its predecessor and render it according to IE 7 standards.
Initially the web page would be rendered in IE 8 standards mode and only if the developers explicitly asked in their pages that they wanted the page to be rendered in IE 8 standard mode, the browser would do so.
The tag that should be used is the head area of the document is this:
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
The web developers were not impressed.
Now it has been decided that by default, IE 8 will interpret web content in the most standards compliant way it can.
Microsoft listened to the community that voiced its concerns and changed its initial plans and now we are moving towards to a more web standards compliant world.
IE8 is currently in its beta 1 form.
People in the IE developer team have created a product that has much greater support for Cascading Style Sheets (CSS). There is also a significant gain in performance and compatibility with Document Object Model (DOM) standards.
To see a list of all the CSS improvements made in IE 8 click here
There are many more improvements for developers in IE8.
- The IE Developer Toolbar has been greatly enhanced. The toolbar is now built into the browser
- Microsoft has fixed the notorious circular reference memory leak, which drove crazy the javascript developers
- The (DOM) ,is much more standards compliant, bringing it up to the same level found in the other major browsers.
All the imporevements in the IE 8 can be found here
DOT NET RULES 