my hate/love relationship with CSS

[ony_gosshamer]

This is a digital SOS from Quebec, Canada.

I'm having problems. I'm preparing the all-css (yeh!) layout for my first blog and because i'm a self-taught web-designer, there are problems i just can't solve on my own.

I found that some of you have very good knowledge of CSS and such, so this is where I hope you guys come in:

The main problem is the layout. The html is there to receive the Movable Type code afterwards.

These are the two files:

http://pages.infinit.net/kfff/pifpaf/index.html

http://pages.infinit.net/kfff/pifpaf/pp_styles.css

I don't understand two things:
- Why the background color of the ".main_space" class is white.
- Why IE places the navigation panel in the center.

Things I know:
- Safari tends to render everything better that IE: when I position everything in relative mode the ".main_space" background color is there but the layout is all over the place in IE (not safari).
Things I don't know:
- The difference beween "Class" and "ID" and "Span". I use the "class" everywhere, maybe that's the problem...

thanks a bunch in advance for your help guys

 

[phatcactus]

I'm really bad at understanding other peoples' code, so I'm afraid I can't help ya there, but I can try to explain Class v. ID v. Span (v. Div)...

The class attribute is used to indicate something is a particular uhm, class of something. For example: p class="footnote" could be wrapped around every paragraph that's a footnote, and you could style the whole site's footnotes a certain way.

The id attribute is similar to class, but instead of identifying a multitude of objects, it's used for singling out one in particular. p id="summary" might be used to designate a one-paragraph summary of an article.

In short: class and id are simply ways of making standard XHTML elements a little different, as far as CSS is concerned. Two items on a page should not have the same id. That's what class is for.

Span is just like div, but it's an inline element. That is, instead of functioning like an h1 or p tag, it functions like a strong or em tag.

Class and id and span and div should be used as sparingly as possible, as they add no real semantic information to the document. It's usually pretty easy to avoid them, but at times they're quite necessary.

 

[mr. k]

The problem is probably caused by the lack of div.main_space being open. When the div ends you need to throw in a </div> tag. A quick run through the validator throws up a few errors you would be wise to correct - but overall the site looks good and only has a few minor errors.
I don't know about IE positioning something wrong, try to clear up the html so it validates and see if that clears it up, I don't want to test for IE right now.
As for the difference between class and id, an id is unique - there can only be one element with an id value of element. There could be five elements with a class value of element, it doesn't matter with class, it does with id. And a span is just the equivalent of a div - but it is an inline element. See http://www.w3.org/TR/REC-CSS2/visuren.html#box-gen for more on css boxes.

"lend me a drink"
"happily I had the camera of my rich father..."
I love half knowing the language!

 

[toast]

Ah ! Enfin un francophone qui faot de belles choses en CSS sur ce forum ! Merci de la part d'un Français !

What Mr. K said. Validating your pages during their development will save you a lot of time and errors.