critique my first css site plzzzzzz

[ible-white]

Hi everyone,I am pretty new to css. I basically sat and combed through the tutorials here on w3schools. I have done a site and just need your honest opinion plzzzzzz.http://tester-page.ebdadventist.org/index.htmlHOW IS THE DESIGN & LAYOUT? DOES THIS WORK IN YOUR BROWSER/ TEST BROWSER?The working links thus far- youth ministries (above in red)--> adventurer club and its sub-menus. (I did not want to do the whole thing to realise that i have to do it all over again)I tested it in the following broswers:AVANT BROWSER 10.2 BUILT 52CRAZY BROWSER 2.0.1- the same as avantFIREFOX 1.5.0.6INTERNET EXPLORER 6.0NETCAPTOR 7.5.4OPERA 8.54TABLANE 1.5testing in the other main browsers for me will be appreciate- such as netscape, macintosh and linux browsers, etcany other constructive criticims/ comments will be appreciatedONLY in Firefox (my default browser) and Opera shows it as intented. In all of the other browsers above, the right side slight shifts to the left and the paragragh first letter special effect does not show.Thx in advance....Donna

[Cronthenoob]

Well, the layout is pretty nice, I personally like it.The only problem I have is the quality of the images. Everything is very blocky. If you could improve the quality the site would be 100 times better.

[ible-white]

Hi Cronthenoob,Thx for your critique. Appreciated. But what do u mean by "blocky"? U mean its grainy? Poor? And does that include all of the images?Perhaps I'm too cheap on image size- trying not to make them pass a certain amount of kb. lol. I'll have a look at it definitely though.Donna

[Cronthenoob]

By blocky I mean the curves look like they are made with blocks. It'd look better if the edges were smooth. And also, the image background is a different color than the pages background color.

[S@m]

Not bad!I'm not sure about the background image either. It seems too much like a badly compressed gif image or something.However, if that is the style you are after, who am I to say it looks bad. :)As far as your IE problem, I would use a conditional comment to add a style sheet for IE only.Put this under your style sheet link:

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen, projection" href="style_IE.css" /><![endif]-->

That will check for IE browsers v6 and blelow. Then it will display that style sheet for IE only. That way you can change whatever settings you want so it displays correclty in IE without fear you will mess up your pages in every other browser.Good luck!

[boen_robot]

Looks pleasent. What do you intend to use it for? A blog?Anyway... the only thing besides the quality of the images, already mentioned, is that in IE7, the search box is a little too big. It goes over the black line. If there isn't a min/max-width, I suggest you use it. IE7 supports it.And try to use a clean gradient, unless this grainy feel wasn't the intended effect.

[ible-white]

Hey,Your responses are awesome--> I am listening to all cause thats how we learn.ok- i see what u mean about the blocky look Cronthenoob. i'll fix that.badly compressed background image S@m? hahahahaa... i'll smooth that out. thxthx for the IE7 observation boen robot. i'll definitely have to put a max-min on that box.thx again all!!!!

[BiteMe]

WHAT!!!!!???Are we looking at the same site? Bloody awful is what i'd say. The images are shockingly bad, the header is a mess and that yellow & black mess, whats that all about.However i do like your main content box, that is nicely laid out. So thumbs up for that.But the top section stinks, like a skunk, a skunk rolled in vomit.

[steffalynn]

yah, i don't know about that fade effect in the background. on the other hand, this didn't draw to mind an image of a skunk swimming in vomit either. biteme, you're never allowed to see any pages i make ever!btw, who's the random dood hiding behind the big star? he looks angry or something . . . this disease is scared of him!

[Cronthenoob]

My conclusion:The layout is nice, but the images arent so great!And yes, who is that dude and why is he there?

[ible-white]

ok BiteMe and a disease.... a skunk in vomit huh? and disease- u dont have to be afraid of the dude. lol.well- i dont feel offended at all although that was quite harsh. i just had a big laugh thats all.anyway- its my second shot at designing an afficial website- my first at usung css. and i'm still learning.i dont know what browser u guys r using- but check back tomorrow for a lil' revised version tho.I guess its better that i get the bad comments here rather than when its officially up.Ible-White

[reportingsjr]

Looks very nice, I have to say what everyone else has said though:Images look like crap. Just make them smoother and they should be alot better..

[steffalynn]

ible . . . just for the record, i was saying that i *didn't* think it looked like that. sheesh, my first day and i'm already causing trouble without meaning to!(i edited for this ps).s. as long as the dood is a friend of yours . . . i'll take your word for it.

[pulpfiction]

website's really good. content in the middle, nice color scheme, text placing. little work on the image on top and image behind top menu. fix that then its gonna look even better.

[aquatsr]

like everyone else has said: images need some work.

[ible-white]

hi everyone again,i listened attentively to all the critiques. Thanks all.i did some tidying up somewhat.i dont know what u will think- but shoot back the comments again at me plzzzz.i know one of the big things was the header image- so i replaced it and did a fresh one.well- i am just getting into graphics design as well.so- throw the comments at me- i wont cry. hahahaif it still doesnt measure up- let me know.THANKS!!!The old version: http://test-page.ebdadventist.org/The updated version: http://tester-page.ebdadventist.org/

[BiteMe]

Thats the spirit lad, dont take things too personal. Good on yer The new one is much better. im not feeling the green/yellow flava you got at the top, but this is much better.However (you may know this already) it has 19 errors against w3c validation.looky>>Shout back if you need a hand corretcing them.Get the code valid, it will improve your skill set and make the css, more browser effective

[Cronthenoob]

New version looks way better! Nice work.

[steffalynn]

yah! this is much much better! the only thing i have left is maybe changing the top colour to match the sidebar? then again, the big star does match both and kinda brings it together, so this one's up to you. also, i really like the pinstripes just above the tabs--they break it up and draw the eye.a+ for effort!

[aspnetguy]

Yes the tabs are much nicer...good job

[reportingsjr]

ahh, good job! keep it up to!

[boen_robot]

The search box is still too big. I don't see anything in the CSS changes either. I think you don't need to add a class or ID though. IE7 supports attribute selectors, so you can do something like:

input[name=quicksearch] {width: whatever suits you}

Then again, I think there was a problem with forms that don't use IDs on their field, so you might want to add an ID too. At that point, it get's simpler and more cross browsery:

#quicksearch {width: ...}

After looking at the source code, I have some more notes. There's nothing visibly wrong with it, but there are still semantic errors, besides the validating problems:1. You are using inline links. I mean "<a href="...">...</a><br />". Use lists instead. That is "<li><a href="...">...</a></li>". Your #nav is the only thing using lists as carriers.2. A lot of other <br /> elements between divisions. Use margins in the CSS if you need extra space.3. You're also using empty <p></p> elements as spacers. Use margins!4. Your whole top box is semantically incorrect. Use lists for the menu and put the links inside each list item. Get rid of the whole <strong> element in it and use "font-weight" on the <li>s instead. You may want to remove the "|"s and use :before and/or :after with the "content" property. It won't work for IE6 and IE7, but it still looks nice. If you really need them, I suggest you use images that you load only for IE browsers.5. Your form looks really empty. How about putting some of the content from above in it as a group. Like this:

<form action="http://www.biblegateway.com/quicksearch/" method="post"><fieldset><legend>Look up a word or passage in the Bible at www.biblegateway.com</legend><input name="quicksearch" type="text" size="17" /><input type="submit" value="Search Bible" /><fieldset></form>

You're also going to need some clever CSS for that though, so be careful.6. The target attribute has been removed in strict XHTML. Use JavaScript instead. Oh and by the way, the only browsers you need to test on are different versions of IE, Firefox and Opera. Other Windows browsers use one of those browser's rendering engine, so it's pointless to test them.

[ible-white]

hmmm... i did not have any chance 2day to do any work on the site- had ppl over all day... was dying to see what u guys had to say about the updated one.anyway- thx for the comments again--> i'm trying.well- to be honest- i really forgot to validate it for errors. thx for pointing that out. i'm gonna try to fix them myself first before i ask for any help tho.you'll hear from me soon again.... gone to see what more i could do to improve...

[joecoolaug]

I like the layout and theme. I'm not sure if they're supposed to, because it's just a test, but the tabs on the top don't work. They also look a little bit "choppy," if you know what I mean.That's very impressive for your first CSS site.

[ible-white]

Hey--> Thanks