## My CSS Website ## Any comments? ##

**monkey64** · 01-23-2007, 03:54 PM

I've just written a website in CSS. It's called the http://www.realbabyguide.co.uk
It started life as an affiliate site but after our daughter was born, we thought we'd turn it into a site of our experiences. Hope you like babies! I'd be interested in your comments.

I'm the designer and I've tested it in IE5.0, IE5.5, IE7, and Firefox 1.5.0.9 but I am sure that there are others that I should test it on. I'm particularly intetested in how it is viewed on an Apple Mac.

The design stretches and shrinks as you resize your browser window (like Amazon). It does nothing groundbreaking but there's some php code behind the scenes to log which banners are veing clicked on. The results are stored in a MySql database.

CSS v Tables!

Beginning to wish I wrote it using tables rather that the more politically correct CSS! The truth is that CSS an excellent concept. It does away with the bloated code which tables require. You can even attach a seperate stylesheet which contains the CSS code, so you cut down on code in your .html file. There are some great CSS templates here.

In reality though, it's almost impossible to create a pixel perfect multi browser website. Believe me I tried. Then I tried again! What works on one browser, often does not work on another. It's a real headache. You're unlikely to have these problems if you use tables for layout. There are even variations between bifferent versions of Internet Explorer due to the IE5x PC mis-implementation of the box model. Thankfully though there are various hacks available; the most useful by Tantek Celik.

If I was starting again, I'd write it using tables anyday and use the CSS to style the tables. How many pro web designers use pure CSS? I can't beleive they'd make any money if they had to iron out all the cross browser issues! Maybe I'm being too cynical.

**LadynRed** · 01-23-2007, 04:19 PM

Quote:

In reality though, it's almost impossible to create a pixel perfect multi browser website.

From a designer's standpoint, you shouldn't even try. The fact is that browsers all have minor differences (and that's no just IE bugs !!), you will never achieve absolute pixel perfection. The better idea is to make it look and work the way you want it to in as many browsers as you can and just let go of the 'perfection' aspect. Even tables are not dealt with exactly the same in all browsers.

I am I professional web designer, and I do NOT use tables for layout on ANY of my sites and haven't for years. Tables are a nightmare for various reasons. They have their place - for tabular data - which is what they were meant for in the first place.

Quote:

Maybe I'm being too cynical.

And maybe you're just too new at it

.

Once you actually LEARN CSS, it is not at all hard to create all-css sites w/o a lot of headaches and cross-browser issues.. and NO HACKS !!! Hacks will get you into trouble, it's better to learn to use Conditional Comments to make IE 6 and below behave.

In looking at your site, you're still not 'there' but you've made a decent effort. You still have tables in there for layout, you're not using proper semantic markup (paragraph text should be enclosed in <p></p> tags), and you've got some minor problems in Firefox 2.0 - specifically the baby videos area at the bottom of the home page.

Your styles belong either in an external css file or in a style block in your <head> section - not inline with your code.

Your text should be inside paragraph tags. If you did that, you would then be able to dump most if not all of those <br> tags and use CSS to space out your paragraphs.

At the bottom of your home page, the divs for the products are NOT being contained inside the main product <div> because you failed to CLEAR the float, therefore, in FF, they are 'hanging down' over your footer area.

You need to Validate your code, you have a lot of improper markup, empty tags and the like.

I would also recommend the following book for learning to convert from Tables to CSS:
http://www.sitepoint.com/books/css2/

On the outside, your design is nice, the graphics are well done and it's laid out well enough. You just need some work under the hood.

**monkey64** · 01-23-2007, 04:37 PM

Well thanks LadynRed.

That's a really helpful reply. I'm a newbie to CSS and I don't find it that straightforward. I'd love to drop the tables in favour of CSS. Just a few queries:

1. You mention that my styles belong in an external css file or in a style block in the <head> section - not inline with your code. Just wondered why that is? What I've done seems to work.

2. The reason I used <br> tags was that a <p> tag gave me too much vertical spacing. Are you sugesting that I style something like a <p2> tag a dn dump the <br> tags?

3. You mention NOT using box model hacks, rather using conditional comments to make IE 6 and below behave. I'm not with you there I'm afraid, I've always used the Tanek Celik box hack. What exactly is a conditional comment?

4. Take your point regarding the divs for the products NOT being contained inside the main product <div> because you failed to CLEAR the float, therefore, in FF, they are 'hanging down' over your footer area

Thanks again

**LadynRed** · 01-23-2007, 05:01 PM

Quote:

1. You mention that my styles belong in an external css file or in a style block in the <head> section - not inline with your code. Just wondered why that is? What I've done seems to work.

Yes, it works, but it's inefficient and could slow down your page rendering as the browser interprets each styled line as it comes to those inline styles. Plus, it's MUCH easier to edit your CSS if it's all in one place rather than scattered throughout. For maintenance sake, if you have to change styles, you've got to change it on EVERY line on EVERY page. If all your styles are in one place, then you only change things in ONE file - your CSS file (or the style block). Make sense ?

Quote:

2. The reason I used <br> tags was that a <p> tag gave me too much vertical spacing. Are you sugesting that I style something like a <p2> tag a dn dump the <br> tags?

There is no such thing as a p2 tag. You can completely control the vertical spacing of <p>s with CSS, something like this:

p{
margin-bottom: 3px;
margin-top: 3px}

Or shorthand: margin: 3px 0px 3px 0px (Top Right Bottom Left - TRouBLe)
Once you have the top and bottom margins set the way you like, then BR's become unnecessary for spacing.

Quote:

3. You mention NOT using box model hacks, rather using conditional comments to make IE 6 and below behave. I'm not with you there I'm afraid, I've always used the Tanek Celik box hack. What exactly is a conditional comment?

A Conditional Comment is something that ONLY IE browsers can read, so they are ignored by other browsers. They are used like this:

Quote:

The first one says if If the IE version is less than 7, use iefixes.css file - which contains only those 'hacks' needed to kick IE into submission.

The 2nd says if the IE version is 7 or greater, use ie7fixes.css.

These CC's go into the <head> of your document. IE will 'see' them and obey.
You might want to read this article: http://www.456bereastreet.com/archiv...f_css_hacking/

Quote:

4. Take your point regarding the divs for the products NOT being contained inside the main product <div> because you failed to CLEAR the float, therefore, in FF, they are 'hanging down' over your footer area

Fixing that is relatively simple. I use this method:

.brclear { /* Use a break with this class to clear float containers on both sides */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then in your html file, you add: <br class="brclear" /> following the container that's being floated, or in your case, just above the footer div.

**monkey64** · 01-24-2007, 02:31 PM

What an excellent forum.

I posted and got help from a web professional who gave me invaluable advice.
Ladynred, u got me thinking...

I'm off to the bookshop: http://www.sitepoint.com/books/css2/

Thanks again

**anill** · 02-09-2007, 12:57 AM

nice