7 replies [Last post]
gmerideth
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2006-03-12
Posts: 4
Points: 0

I've spent a few weeks converting our entire site away from hundreds of table elements to as pure a CSS site I could get away with. There are some compiled modules that I haven't gotten around to converting to CSS versus table tags so I've used CSS to try to enhance the tables where possible. I went from quasi-familiar with CSS to hating it, back to being happy with it over the past two week period.

So far, without using hacks, the site has the same look and feel in Firefox 1.0.5, IE 6 and even under IE 7 beta 1 (haven't loaded beta 2 yet).

The site spans 3 machines and the CSS comes from http://i.ftnj.net/v2/core.css. I've placed a visual studio formatted version of the file at http://i.ftnj.net/v2/core_ex.css.

What I'm looking for is tips on where I can get better utilization of CSS. I may have made 2 or even 3 CSS elements where I may not need and want to learn better combination techniques to lower the number of CSS elements.

CSS validation complains about the lack of background colors when using a color element which I believe while "proper" can safely be ignored(?). Markup validation complains about my use of the "language" tag and "target" tags but otherwise I'm ok.

The site is at http://www.forwardtechnology.net. I use a lot of JavaScript to provide the sliding/fading quick links at the top of the page from the Yahoo animation suite and I've implemented numerous Ajax parts around the site which I would like to check in as many browsers/os's as I can.

Thanks for any help/suggestions.

It seems every validator complains about the -moz opacity and alpha:filter for the quick link section but it works so /shurg.

JBelthoff
Offline
Enthusiast
Connecticut
Last seen: 15 years 9 weeks ago
Connecticut
Timezone: GMT-5
Joined: 2006-01-16
Posts: 51
Points: 0

Site check

Hi gmerideth,

Your site is coming along nicely. However; your html does not validate.

See Here:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.forwardtechnology.net%2F

I would also take notice of the doc type you have chosen. More info about DocTypes is here: http://www.alistapart.com/articles/doctype/

You should also do some reading on Standard Compliance mode vs Quirks Mode as well.

I'm a newbie myself and didn't like having to learn all this stuff, but I can tell you it helps after you understand the basics.

Keep doing it and you will lean all the CSS Shorthand over time. It doesn't take long but it does take effort.

Keep up the good work.

John Belthoff
Dodge, Duck, Dip, Dive & Dodge
If a man can dodge a wrench, he can dodge a ball!

JB - IPG - Asp.Net

gmerideth
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2006-03-12
Posts: 4
Points: 0

Site check

JBelthoff wrote:
your html does not validate.

Selecting a good doctype is part of the issue I've had. Using a strict html4 doctype produced the least amount of warnings and the two parts that the validation complain about are simple changes (i.e. removing "language="javascript"" and the target tags for <a> elements).

I've read a number of articles from this site on doctypes and while dropping to quirks mode doesn't affect the site's structure I wanted to follow some type of strict pattern in the new site design.

I can change those two warnings and get a clean validation run through.

JBelthoff
Offline
Enthusiast
Connecticut
Last seen: 15 years 9 weeks ago
Connecticut
Timezone: GMT-5
Joined: 2006-01-16
Posts: 51
Points: 0

Site check

Yes target="whatever" is not suppose to valid in strict.

However you should ckeck into to using XHTML either strict or transitional. Going foreword a good understanding of those will help you tremendously.

I know it did for me.

Enjoy!

John Belthoff
Dodge, Duck, Dip, Dive & Dodge
If a man can dodge a wrench, he can dodge a ball!

JB - IPG - Asp.Net

gmerideth
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2006-03-12
Posts: 4
Points: 0

Valid

Using XHTML I was able to refine the elements and get a "This Page Is Valid XHTML 1.0 Transitional!". Now to start cleaning up the CSS. Thanks for the input.

JBelthoff
Offline
Enthusiast
Connecticut
Last seen: 15 years 9 weeks ago
Connecticut
Timezone: GMT-5
Joined: 2006-01-16
Posts: 51
Points: 0

Site check

Good job!

You are best sticking with either:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Unfortunatley if you want to use the target="whatever" you must downgrade to the Transistional. There are other things as well such as ordered lists with the Start attribute.

However, now that you know that your HTML validates and is well formed you can concentrate on maiking it look nice with the css. Laughing out loud

John Belthoff
Dodge, Duck, Dip, Dive & Dodge
If a man can dodge a wrench, he can dodge a ball!

JB - IPG - Asp.Net

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 8 years 3 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Site check

Hi! I think you have a good thing going with your index page, very colourful but not an over-kill. The layout seems user-friendly enough but only until you resize the font/text. Maybe, if you're using height definitions on some of your elements, removing those height definitions will help not break the layout apart on resizing. The internal pages look fine but again, having the same problems on text resize. Cheers! Laughing out loud

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

gmerideth
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2006-03-12
Posts: 4
Points: 0

Site check

ABCruz wrote:
Hi! I think you have a good thing going with your index page, very colourful but not an over-kill. The layout seems user-friendly enough but only until you resize the font/text.

Hmm..resizing of the font's I never even thought about. I am using a number of height elements to get things to line up correclty so I'll create a staging site, hop into VS and adjust the font-sizes so I can see whats going on.