Entries Tagged 'css' ↓

Today I downloaded Internet Explorer 7.0 Beta 2 to see if they finally fixed some of the horrible problems with their implementation of CSS. 

 The style tags that were not working in IE 6.0 seem to be working now!  I am so glad that Microsoft has gotten back to getting their browser updated.   I hope that people upgrade as fast as possible when it finally comes out. 

However, I don’t know why anyone would still use IE 6.  There is too many holes in security, no RSS support, does not support tabs and is terrible at rendering CSS.  For now if you don’t upgrade to Internet Explorer 7.0 Beta 2, please use FireFox 1.5 for own safety and to experience web 2.0 to its fullest!

One of the problems with using CSS is when to use the ID or Class Selector. It may be obvious to people who use CSS everyday, however for the beginner, this can very confusing.

When creating a stylesheet when should one use ‘*’, ‘.’ or ‘#’? What exactly does it mean when when a style contains one of these characters?

I have compiled a quick set of tips that I hope will help developers get a better understanding of CSS.

The universal selector

The universal selector allows you to match any element to the style. Think of this like a wilcard. To create a universal selector, begin the style with a ‘*’.

For Example: to make all text in your document blue:

* {color:blue;}

Class and ID Selectors

There are two types of selectors for Styles: class selectors and ID selectors.
Remember these only work if you have marked up your HTML correctly.

Class Selectors
Class selectors in CSS must have the name of the class preceded by a period (.) and can be joined with a simple selector.

For Example:

p.warning {color:red;}
span.warning {font-style:italic;}

To make a generic class tag that can be use by any element, simply create a new css entry the begins with a period (.)

For Example:
.warning {font-style:italics;}

Multiple Classes
If you need to combine mutiple classes you can do so by seperating them with a space inside your class attribute of the tag.

For Example:
.warning {font-style:italics;} .urgent {font-weight:bold;}

The class tag could be class=”urgent warning” or class=”warning urgent”. This would then create a style that uses italics and is bold. The order of the words does not matter.
To create a different style when combining two tags, append the two togther with a period between the two.

For Example:
.warning.ugrent {background:silver;}

This will create a style that is bold, italic with a background of silver.
WARNING: IE 6 and lower has problems rendering multiple classes.
I have not tested IE 7.0 to see if this has been fixed (Along with several CSS 2.0 issues that I hope get fixed)

ID Selectors
ID Selectors are very similar to class selectors but there are some critical differences. ID Selectors are preceded by the Pound symbol (#)For Example:

#sidebar {margin-top:0px; margin-left:0px; margin-right:20px;margin-bottom:20px;}
What is the difference between a class and ID Selector?
The difference is that an ID selector can be used once and ONLY once in a document.

WARNING: The problem is that most browsers will ignore this rule and allow you use multiple elements using the same ID tag. However avoid this because problems will occur if you need to use Javascript or an AJAX feature on the element. You will not be able to use the getElementById() method to get the right element from the DOM.
NOTE: Class and ID Selectors are case-sensitive! Make sure you follow a standard when it comes to naming your CSS tags.
I hope this helps clarify some issues that I had in the past with using CSS.

I’ve been writing some code that will do a form post from one website to another. (php to an asp.net site)

I created the form that will post the values stored in a couple of hidden input tags. I used the id attribute to name each input tag.

I run a test and it looks like it posted succesfully to the asp.net site. All is good. Well….Maybe not. The asp.net site shows that it received a post but there are no items in the Forms or Querystring collection.

I don’t even think to look at then php code because A) the php page displayed in the browser and B) it did the submit to the other site without throwing a javascript error. I’m thinking the problem is 100% on the asp.net 2.0 site that received the post.

I spend the next 1.5 hours trying everything I could think of but I still can’t get the what should have been posted to the page to show up.

After almost throwing my computer out the window, I go back and look at the PHP code. I then decide to use the name attribute instead of id. Guess what? It worked!

So some of you maybe wondering why I was using id attribute instead of name? It’s because I’ve gotten so used to using the id attribute for asp.net server controls that I’d almost forgotten about the name attribute!

So the moral of the story is to write plain html once in a while so you don’t make these kind of rookie mistakes! It’s always something so simple that can ruin a good day of coding!