site cretique - advice needed!

[phi0x]

Hi guys! I'm working on a site for my friend, trying to become a better web dev.. but I'm having some trouble.

I know or at least think that the site I'm making could be done a different way that would make it easier to code or easier to manage...

www.candyskyparties.com/alpha/

it seems to work in almost every new browser and even ie6/7.
but in opera it doesn't display properly, and at my friends place his firefox which I assume was an older version, wasn't displaying the slides properly.

any suggestions would be appreciated, I know I'm coding it a little funny, or think I am?

any suggestions on how to redesign the code would be appreciated, for I know there's probably going to be little quirky problems if I proceed to try to finish the site.

[cfajohnson]

Errors found while checking this document as XHTML 1.0 Transitional!
Result: 9 Errors
Address: http://www.candyskyparties.com/alpha/

The text is hard to read because there is not enough contrast between it and the (horribly coloured) background.

The input boxes overflow their container:
http://cfaj.freeshell.org/testing/candysky.jpg

[phi0x]

are you using safari? it renders fine on latest firefox/ie8
it was working fine before i added the new text stuff on ie6/7.

i don't know what other colour schemes to use, my friend wants the sky type background since its 'candySKYparties' she also wants to see more pink which I haven't thought of a way to implement more.

those 9 errors aren't anything serious from what I can see though...

[cfajohnson]

Originally Posted by phi0x

are you using safari? it renders fine on latest firefox/ie8
it was working fine before i added the new text stuff on ie6/7.

It has nothing to do with what browser one is using.

You haven't allowed for viewers with fonts larger than yours.

i don't know what other colour schemes to use, my friend wants the sky type background since its 'candySKYparties' she also wants to see more pink which I haven't thought of a way to implement more.

That background doesn't look anything like sky.

But whatever background you use, be sure that the text colour has enough contrast to be legible.

those 9 errors aren't anything serious from what I can see though...

All errors are serious. If there are errors, a browser may do something that is nothing like what you want.

HTML is simple. If you can't even write valid HTML, do something else.

[JunkMale]

Just look at this behavior of the rolling banner...

This is what the site looks like to a Linux user viewing in Opera.

[phi0x]

I had stated it doesn't work in opera.. I don't know how to fix that part.

if anyone could give some TIPS on what to do to fix things, that would be appreciated!

[cfajohnson]

First, fix the HTML errors. That may solve some of the problems.

If it doesn't, ask here again.

[aj_nsc]

I disagree about the background colour - I think it's an interesting choice and not at all horribly coloured. What is a little ridiculous, however, is the fact that there's white text on it, I can't spend more than two seconds looking at it without tearing up.

[JunkMale]

It don't look too good in FireFox either...

[criterion9]

You might try going dark with the text to contrast such a bright background color. Maybe a black or dark blue/gray would be more readable.

[phi0x]

yeah I think I'll have to make a white foreground matte or something and change up the text colour to something darker, then it will pop out more, while retaining the blue skyish background.

again I would like some help with tips on how my coding style is, and how to improve it. instead of just answers like 'your site has errors, fix them' I know there might be a better way for me to code this so I would appreciate some actual tips or links to really good design flow tutorials to improve my design/coding methods.

[cfajohnson]

Originally Posted by phi0x

again I would like some help with tips on how my coding style is, and how to improve it. instead of just answers like 'your site has errors, fix them' I know there might be a better way for me to code this so I would appreciate some actual tips or links to really good design flow tutorials to improve my design/coding methods.

Where to begin? Take a look at http://cfaj.freeshell.org/testing/candyskyparties.jpg.

First tip: fix the errors in the HTML. There's no point talking about anything else until that has been done. Go to the validator at http://validator.w3.org/check?verbos...com%2Falpha%2F. It tells you what the errors are. There are only 6 errors. It shouldn't take long to fix them.

Second tip: do not use text in your images. Separate them.

Third tip: start with pure (valid) HTML, no CSS or JS. Add rules as necessary to get what you want. Do not use different stylesheets for every version of Internet Explorer.

Fourth tip: do not slice and dice images. The Candy Sky Parties logo should be one image. It will be much simpler to style. See a quick and dirty example at http://cfaj.freeshell.org/testing/candysky.html.

[phi0x]

thanks! I just want to note that the reason I have different css sheets is one is for the contact script and there is one for mozilla/ie8 and one for ie6 and 7 and any other type of browser that doesn't render the regular css sheet. I just have different statements with the same stylesheet because I couldn't get one conditional statement to cover all the IE browsers.

if I don't have text in the images then how can I make it look as good? some text-images have the border padding on the font etc.. styled and can't do that with regular fonts through css. I try to use css font if possible.

I think I'm going to have to redesign it from scratch, the coding that is along with a few graphical updates and slice updates. I'll take screenshots of how it is now so people reading this post can see what's been going on and can learn from my mistakes!

[cfajohnson]

Originally Posted by phi0x

thanks! I just want to note that the reason I have different css sheets is one is for the contact script and there is one for mozilla/ie8 and one for ie6 and 7 and any other type of browser that doesn't render the regular css sheet. I just have different statements with the same stylesheet because I couldn't get one conditional statement to cover all the IE browsers.

If you need that many stylesheets, you must be trying to control the look far more than is actually possible.

if I don't have text in the images then how can I make it look as good? some text-images have the border padding on the font etc.. styled and can't do that with regular fonts through css. I try to use css font if possible.

Of course it can be done in CSS.

[phi0x]

could you show me a site that has text done in css that looks like the candyskyparties logo text or the quote form 'name' etc.. text that has that white padding around the text? I really did not know it could be done in css. could you give me a tutorial on how to do that.