Archive for the ‘CSS’ Category

CSS for IE 7 only

The new IE 7 is a huge step in the right direction for Microsoft, but it’s still lacking in some areas.

There are still some significant differences in the way IE 7 and other browsers like Firefox and Safari handle some CSS. But there is a some what simple way around this, Microsoft recognizes it’s short comings and has built in something called Conditional Comments that are kind of like regular HTML comments.

You’ll need to create a CSS file for any IE 7 only commands and then use these conditional comments to send this CSS file only to IE 7. To do this, place the following code into the header of each HTML file, after the link for the main CSS file.

  1. <!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

The only CSS you need to place into this extra file are those which will override commands in the main CSS file. You don’t need to duplicate commands across the two CSS files as IE7 will also read through the main CSS file.

And remember that conditional comments can only be placed inside HTML files and not CSS files.

Posted by mnoga on March 12th, 2007 3 Comments

New Service and website to go with it!

I just finished a new website geared towards offering a new service. The website is called Bake it! offering Web Design Conversion.

What does that mean, well you give me your design and I will turn it into a Standards Compliant web page, it’s that simple.

Take a look, you can find it at http://www.Bakeit.ws

Posted by mnoga on February 4th, 2007 No Comments

Backgrounds all around (CSS)

The background property is used to set an image as a background of something, such as the whole page or a div or even a table cell. This is best don using CSS.

Example:

  1. BODY { background: white url(mainBG.gif); }

The background-repeat property specifies how a background image is repeated.

The repeat-x value repeats the image horizontally

The repeat-y value repeats the image vertically.

Example:

  1. BODY { background: white url(mainBG..gif);
  2. background-repeat: repeat-x }

This code will create a background image for the body of your html document that is repeated horizontally across the screen.

Posted by mnoga on December 6th, 2006 No Comments

CSS Trick

I’m building a user interface for a new contact book application at my day job and I’m using CSS for the whole thing, well, almost the whole thing. I have one table in there but it is used for the list of contacts so since that is tubular data, its ok. ;-)

I’ll keep my comments on browser inconsistencies to myself for now, but I have one little trick I thought I would share. For those situations where you have a slight difference from IE to Firefox, rather than using two completely different style sheets that pretty much contain the same thing you can just put two attributes in a style with the same name except, you start the second one with an underscore, see below;

  1. #container_contacts
  2. {
  3. left:    2em;
  4. _left: 5em;
  5. }

Firefox will read only the one without the underscore, IE will read both and since the underscore named one is second then it uses that one and you efectivley have two versions of the same style that ends up being browser specific.

Nothing earth shattering but I thought I would share in hopes that it might save someone else some time and frustration.

Posted by mnoga on August 28th, 2006 No Comments