16 replies [Last post]
blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

G'day all,

I have taken up web development as a hobby, and I offered to create a site for my father.

http://www.holisticfertility.us

as you can see, I could use any advice that I could get, and any tidbit of information will help.

the site does look decent in firefox and safari, but IE is giving me major problems.

i don't want to have to go to table design Shock

thanks in advance!

blutz

ps you can see my css at holisticfertility.us/styles.css

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The first thing you must do

The first thing you must do is learn to validate your code. The w3c site exists, among other things, for that purpose.

The CSS standard is predicated upon your html code being valid html code. For invalid html the standard does not apply.

So first learn to validate!

If you use Firefox this is easy with the "Web Developer" extansion or the "Html Validator" extension.

You've got a doctype declaration so that's good, but it should always be the STRICT version for a new page.

I recommend a look through the "How to" section of this site.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

Thanks Ed for the advice

There are lots of changes for me to make after checking the validator on w3c. I also changed my doctype to strict as
you suggested.

I am not sure what you meant about the firefox extensions? are those add-ons? I will google it to find out : )

Anyway, advice from a guru is inspiration enough to push on!

Thanks again,
blutz

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Forget the "Guru" nonsense.

Forget the "Guru" nonsense. I just means I have over 2000 posts here, not that I know anything much.

Right, I was talking about Firefox add ons. Just go to their add on site and look for the titles, or google them.

There's also a thread somewhere on the site about what folks think are essential FF addons for a developer, so do a search for that.

It isn't hard to learn to validate, just read the error messages and think about them. If they really puzzle you ask a question about it here. But validating your CSS and your html is an absolutely essential core skill that you need to be a successful web page writer.

After awhile you'll find yourself writing valid code fairly easily, but there is a learning curve and no one can do that for you.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

Thanks Ed

for the input thus far. I have gone through all of my pages to make
sure that they validated on the W3C website, and so in that aspect
I should be good to go!

one thing that I had to change, which I found a little weird, was that
the spans were causing errors?? What I did was replace all of my spans
with "del", and changed the respective classes to be text-decoration:none;
After doing that all of the errors went away.

Does anyone have an idea why this may be the case?

I also got those FF extensions, thank you for pointing me in that direction.

Overall, I feel that my site is performing much better on all browser types.
: )

does anyone else have input on how I can improve my site?

Super Grateful,
blutz

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

blutz wrote:for the input

blutz wrote:

for the input thus far. I have gone through all of my pages to make
sure that they validated on the W3C website, and so in that aspect
I should be good to go!

Well you still have a couple of rather nasty errors, such as repeating the doctype and html tags. At least that's true at the original url you posted in your first message.

Quote:

one thing that I had to change, which I found a little weird, was that
the spans were causing errors?? What I did was replace all of my spans
with "del", and changed the respective classes to be text-decoration:none;
After doing that all of the errors went away.

This makes me think it's a different page since there's no "del" tags that I can see in the code. Also, it's a really lousy solution. Tags should reflect the meaning of the content, and the "del" tag is for old content that you want to show as having been deleted. It should be used only very rarely indeed.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

Oh you are right

My mistake, I validated every page except my index page (how dumb of me)

you can see the page with the "del" tags here http://www.holisticfertility.us/index.php?screen=studies

I agree that using these tags is probably a poor practice. I just wonder why the validator
says that those are ok and the span tags are not?

thanks again for the response
blutz

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

That page isn't valid

That page isn't valid either!

Span is illegal where you were trying to use it because it is an inline display element and cannot contain block display elements like ul. But "del" is crazy there, if you must have a container for your ul use "div" which is a block display element intended to hold other block display elements. However the "ul" is a block element on it's own and doesn't really need any container in most cases.

Spans and divs are not intended for heavy use - they are purely non semantic grouping elements that should be used sparingly and only when necessary.

I think you are trying to do way too much in developing a whole site as a beginner, myself. We have to learn to walk before we learn to run, and you seem to want to go straight to flying! And falling as a result. Just an observation for what it's worth.

Why not start with a few simple straightforward standalone pages until you learn the tricks of the trade?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

I've never been afraid of failure

so why would I start now! : )

I have never been known to give up so easily!

Don't get me wrong, the help and advice that you have given me
does not go unappreciated.

If you choose to stop up giving me advice because I am a "lost cause"
then so be it!

Of course, your input is ALWAYS welcome because you have been very
helpful thus far!!

Anyway, I am pretty sure all of my pages are, at this point,
100% compliant (I spent quite a bit of time yesterday working on it).

Links:http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dhome&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dabout_us&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dservices&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dstudies&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dtestimonials&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dprograms&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dclasses&charset=%28detect+automatically%29&doctype=Inline&group=0
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.holisticfertility.us%2Findex.php%3Fscreen%3Dcontact&charset=%28detect+automatically%29&doctype=Inline&group=0

Today I will work to resolve the "del" issue in more detail.

Thanks Again for Everything
blutz

blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

del issue fixed

replaced with "strong"

I believe this would be more semantically correct?

blutz

isedeasy
Offline
Enthusiast
Bristol
Last seen: 8 years 44 weeks ago
Bristol
Timezone: GMT+1
Joined: 2008-02-09
Posts: 74
Points: 12

Why don't you use

edit - Just seen where you used strong tags and yes they are more appropriate than del tags

"If a man is trying to hang himself from the tree in my yard but the knot keeps slipping and allowing him to fall before it kills him do you expect someone to go out and teach him to tie a better knot?" - Triumph

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 28 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

This:[code]<div

This:

<div id="nav"><ul>
<li><img src="images/nav_left.jpg" width="216" height="47" alt="leftnav" /></li>
<li><a href="index.php?screen=home">
<img src="images/nav_home.jpg" onmouseover="this.src='images/nav_homeRO.jpg'" onmouseout="this.src='images/nav_home.jpg'" width="60" height="47" alt="home" /></a></li>
 
<li><a href="index.php?screen=about_us">
<img src="images/nav_about.jpg" onmouseover="this.src='images/nav_aboutRO.jpg'" onmouseout="this.src='images/nav_about'" width="84" height="47" alt="about us" /></a></li>
<li><a href="index.php?screen=services">
<img src="images/nav_services.jpg" width="70" height="47" alt="services" onmouseover="this.src='images/nav_servicesRO.jpg'" onmouseout="this.src='images/nav_services.jpg'" /></a></li>
 <li><a href="index.php?screen=studies">
 <img src="images/nav_studies.jpg" width="67" height="47" alt="studies" onmouseover="this.src='images/nav_studiesRO.jpg'" onmouseout="this.src='images/nav_studies.jpg'" /></a></li>
 <li><a href="index.php?screen=testimonials">
 <img src="images/nav_testimonials.jpg" width="96" height="47" alt="testimonials" onmouseover="this.src='images/nav_testimonialsRO.jpg'" onmouseout="this.src='images/nav_testimonials.jpg'" /></a> </li>
 <li><a href="index.php?screen=programs">
 <img src="images/nav_programs.jpg" height="47" width="83" alt="programs" onmouseover="this.src='images/nav_programsRO.jpg'" onmouseout="this.src='images/nav_programs.jpg'" /></a></li>
 
 <li><a href="index.php?screen=classes">
 <img src="images/nav_classes.jpg" width="69" height="47" alt="classes" onmouseover="this.src='images/nav_classesRO.jpg'" onmouseout="this.src='images/nav_classes.jpg'" /></a></li>
 <li><a href="index.php?screen=contact">
 <img src="images/nav_contact.jpg" width="69" height="47" alt="contact" onmouseover="this.src='images/nav_contactRO.jpg'" onmouseout="this.src='images/nav_contact.jpg'" /></a></li>
<li><img src="images/nav_right.jpg" width="210" height="47" alt="rightnav" />
</li></ul></div>

This here is a mess. Wrapping your ul in a div, using images to tell people what they're clicking on, and using onmouseover onmouseouts for changing the image. Those three are issues. So, I can barely see what's going on with the site in FF1.5, where too many images are simply covering random text here and there.

So!

A ul is a box like a div is a box. They can be styled the same way, so 99% of the time you don't need a div around a ul. Stick your id on the ul instead:

I'm no expert, but I fake one on teh Internets

blutz
Offline
newbie
long island new york
Last seen: 12 years 42 weeks ago
long island new york
Joined: 2008-07-15
Posts: 7
Points: 0

stomme poes thanks

Some great advice there, I really appreciate it.

Looks like I have a lot more work to do.

I am up to the challenge!

As I look over the information that you sent me and make adjustments,
I will stop back here to give updates on my progress.

Most probably won't care but I think it would be nice to know
that your help is going to a good use.

Again, Thanks a Million!
blutz

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Excellent advice there from

Excellent advice there from "Stomme poes".

I'm not suggesting giving up! Quite the contary.

My suggestion was that you make a strategic retreat. Take the time to work on a more basic page or two until you really understand how CSS works with html. It's also easier for us to help you with straightforward pages. Once you understand how to write semantic html and then how to do basic positioning and styling, you can return to the main project and it will go much more smoothly and take you much less time. You might then even get it finished before you will if you continue this way. But even if you don't you will save yourself many many stressful hours if you continue to design and you will be much more productive.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 28 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hmmm, yeah, Ed's suggestion

Hmmm, yeah, Ed's suggestion is a good one... put the current site on hold and build a few replicas of it but with reduced navigation and the such. Can you keep struggling through what you've got and eventually get it? Absolutely, I did this with my first drop-down menu (one of Stu Nichols! Whose CSS is very messy and difficult to debug!). But when I was done, I still had trouble adjusting anything later, because it was a sort of mess that I never fully understood (and later, I switched to a Suckerfish because the code was cleaner and made more sense).

I actually never finished building it because I got stuck somewhere and was using another book by the time I fixed it, but building the Bubble Under site with the book
Build Your Own Web Site The Right Way Using HTML and CSS by Ian Lloyd
was invaluable in getting me started. It's old enough to likely sitting free in your local library. Mostly, I like that he explains what you're doing and why.

The second book, not quite as old but still likely old enough to be in your library, really helped me get started with positioning with CSS, in various different ways (without knowing this beforehand I could have never used the techniques I linked you to above-- I saw deathshadow do the menu image replacement thing and after I understood what it was I was like, whoa, dude...). It's called
HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer

Both books write in XHTML, but it doesn't really matter which you use. So, I had started with XHTML because of those books, and learned HTML4.01 later.

And Ed's right about losing less hair-- when tackling something a bit complicated, you can do it faster and easier your first time if the basic parts of it were already built several times first, so that you're only doing a bit that's new. That way, when it doesn't work right the first time you try it (it never does) you know what parts of your code are absolutely safe and what's iffy-- saving you bug-squashing time.

But still, I wish someone had sent me those links back when I was first doing these things-- and in fact I have a few things bookmarked that Dan Schulz had mentioned a year ago, and I'm grateful.

I'm no expert, but I fake one on teh Internets

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 11 weeks 4 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

It's nice to hear "Stomme

It's nice to hear "Stomme poes"'s recommendations for public libraries since I work on one and have for over 30 years.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 9 years 28 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Dan Schulz has always

Dan Schulz has always emphasised public libraries to people, I think mostly because there are many web developers who are used to learning online for free. Buying a bunch of books doesn't appeal to everyone, and so when recommending a book it's good to say "you may be able to get this for FREE" esp with Dutch people : )

I'm no expert, but I fake one on teh Internets