Chicken Soft

[Sardtok]

Hi,
please check out my newly created site: www.chickensoft.com
I know the design isn't all that much, but I was going for a simple,
yet functional design.
I have not yet added a right side menu, but it will contain section related links.

Post feedback here or mail it to me.
Thanks,
Sigmund Hansen
Chicken Soft's webmaster, coder and more.

[Palmer]

Not a big fan of New Times Roman but the rest of it looks fine and loads fast. Nice work.

Palmer

[harmonic]

Originally posted by Palmer
Not a big fan of New Times Roman but the rest of it looks fine and loads fast. Nice work.

Palmer

Me too, maybe verdana? It's the cool thing for web pages.

[Sardtok]

Sure,
I'll try a few different fonts, locally, and update the css.
Verdana usually looks good seen it used a lot on design pages and all.
The only problem I guess is the font-size; 10pt Verdana is a lot larger than 10pt Times.
Although I think just about everyone has the Verdana font on their system I should have a font-family to fall back on (for instance use serif to fall back on the system default serif font)?
And if it does fall back on a serif font (most likely Times) there could be some font size issues, especially on high resolutions.
The site would work with a 10pt Verdana instead of the 10pt Times it is using now.
And it would probably look better, especially on high resolutions.
Later I might add something like a cookie system so people can alter font-sizes and maybe colors?
What do you think?

[Palmer]

Never use pt sizes when it comes to specifying the font. You'll get several different looking results between browsers and different platforms, speciffically on Apple computers certain font sizes are unreadable. Go with pixel sizes (px) Verdana, 11 or 12 px. It's readable but not too small or big.

I used 12 px here...
http://www.sheltercareinc.org/

And 11px here...
http://www.designoutpost.com/

[Sardtok]

Ok, I've changed all the font sizes to pixel sizes now and got it looking pretty well, I've uploaded the new css file.
I went with 12 px for the main font and 15 px for the header font.
Also fixed the CHICKEN SOFT ENTERTAINMENT to pixel sized fonts which seem to be equivalent of the pt sizes for how it looked on my screen. ;)

Ugh,
I'm having some slight problems with how Netscape is inheriting attributes down the hierarchy in css.
I'll have it fixed in 2 minutes, gonna try to fix it using as little code as possible so ;)

Ok it has been done.
Should look the same in Gecko browsers as in Opera and IE. ;)

[Palmer]

I'm still seeing the Times font though. 12px for that particular font is pretty small. If you're going to stick with Times, you'll need to bump it up a pixel or two. If you go with verdana, you need to change it to Verdana on every reference on the style sheet. Not just in the body attribute.

Palmer

[Sardtok]

Ah yeah,
it showed as Verdana here, but the problem was I had a double reference to the font-family attribute in body, one with just serif and one with Verdana, serif.
I moved it into BODY * so now it should work.
It works for me in Opera, Netscape and IE.

[Palmer]

Not working for me in IE6, no verdana, check your spelling, maybe that's it :( (and yes I hit refresh)

[Sardtok]

Ok I tried removing all excessive white space.
Also changed the font-family to Verdana, verdana, serif
just to be on the safe side with case sensitivity, here both worked.

If it still doesn't work I'll try removing the ", serif"
from the css.

If it still doesn't work I have no idea what the problem is.

Oh and if you haven't already you can check out the css yourself (not very nice formatting now that I removed excessive white-space though)
www.chickensoft.com/style.css

[Palmer]

Can you show me where it says verdana anywhere in this style sheet???


BODY {background-color: #001D41; margin: 0px; height: 100%; color: white;
font-family: serif; font-size: 10pt}
BODY * {vertical-align: baseline; text-align: left}
TABLE {empty-cells: show}
.topleftcor {background-image: url("bgimages/cs-topleftcor.png"); background-position: 100% 100%;
background-repeat: no-repeat; width: 120px; height: 125px}
.topbar {background-image: url("bgimages/cs-topbar.png"); background-position: 0% 100%;
background-repeat: repeat-x; width: 450px; height: 125px; vertical-align: middle}
.topbar TABLE {width: 100%}
.title {font-family: arial, sans-serif; font-size: 24pt}
.subtitle {font-family: arial, sans-serif; font-size: 12pt; font-weight: bold; letter-spacing: 6pt}
.logo {text-align: right}
.toprightcor {background-image: url("bgimages/cs-toprightcor.png"); background-position: 0% 100%;
background-repeat: no-repeat; width: 120px; height: 125px}
.menuleft {background-image: url("bgimages/cs-leftbar.png"); background-position: 100%;
background-repeat: repeat-y; width: 120px; height: 300px}
.menuleft A {color: #6189CB; text-decoration: none}
.menuright {background-image: url("bgimages/cs-rightbar.png"); background-position: 0%;
background-repeat: repeat-y; width: 120px; height: 300px}
.menuright A {color: #6189CB; text-decoration: none}
.main {background-color: #6189CB; color: black; width: 450px; height: 300px}
.main A {text-decoration: underline; color: black}
.main A:hover {text-decoration: underline; color: #004FA6}
.main .header {background-color: #004FA6; color: white; width: 225px}
.botleftcor {background-image: url("bgimages/cs-botleftcor.png"); background-position: 100% 0%;
background-repeat: no-repeat; width: 120px; height: 5px}
.botbar {background-image: url("bgimages/cs-botbar.png"); background-repeat: repeat-x;
text-align: center; padding-top: 5px; width: 450px; height: 5px;}
.botrightcor {background-image: url("bgimages/cs-botrightcor.png"); background-position: 0% 0%;
background-repeat: no-repeat; width: 120px; height: 5px}
.header {font-size: 12pt; font-weight: bold}

[Sardtok]

That's not the stylesheet I get,
try Ctrl-F5 it will reload instead of refresh.
I asked a friend to check it out, and he says he gets Verdana (And yes he knows what Verdana looks like he does a lot of design work and is going to get a Graphical Design education when he finishes high school).
BODY {background-color: #001D41; margin: 0px; height: 100%; color: white}
BODY * {vertical-align: baseline; text-align: left; font-size: 12px; font-family: Verdana, verdana, serif}
TABLE {empty-cells: show}
.topleftcor {background-image: url("bgimages/cs-topleftcor.png"); background-position: 100% 100%; background-repeat: no-repeat; width: 120px; height: 125px}
.topbar {background-image: url("bgimages/cs-topbar.png"); background-position: 0% 100%; background-repeat: repeat-x; width: 450px; height: 125px; vertical-align: middle}
.topbar TABLE {width: 100%}
.title {font-family: arial, sans-serif; font-size: 32px}
.subtitle {font-family: arial, sans-serif; font-size: 16px; font-weight: bold; letter-spacing: 8px}
.logo {text-align: right}
.toprightcor {background-image: url("bgimages/cs-toprightcor.png"); background-position: 0% 100%; background-repeat: no-repeat; width: 120px; height: 125px}
.menuleft {background-image: url("bgimages/cs-leftbar.png"); background-position: 100%; background-repeat: repeat-y; width: 120px; height: 300px}
.menuleft A {color: #6189CB; text-decoration: none}
.menuright {background-image: url("bgimages/cs-rightbar.png"); background-position: 0%; background-repeat: repeat-y; width: 120px; height: 300px}
.menuright A {color: #6189CB; text-decoration: none}
.main {background-color: #6189CB; color: black; width: 450px; height: 300px}
.main A {text-decoration: underline; color: black}
.main A:hover {text-decoration: underline; color: #004FA6}
.main .header {background-color: #004FA6; color: white; width: 225px}
.botleftcor {background-image: url("bgimages/cs-botleftcor.png"); background-position: 100% 0%; background-repeat: no-repeat; width: 120px; height: 5px}
.botbar {background-image: url("bgimages/cs-botbar.png"); background-repeat: repeat-x; text-align: center; padding-top: 5px; width: 450px; height: 5px;}
.botrightcor {background-image: url("bgimages/cs-botrightcor.png"); background-position: 0% 0%; background-repeat: no-repeat; width: 120px; height: 5px}
.header {font-size: 15px; font-weight: bold}

Here is what I get when I download the file from Chicken Soft and it shows the same as my local file, only difference is the UNIX linefeeding.

[Palmer]

Nope, still Times. Hit F5 and everything. I think it has to do with you having 2 body attributes...

BODY {background-color: #001D41; margin: 0px; height: 100%; color: white}
BODY * {vertical-align: baseline; text-align: left; font-size: 12px; font-family: Verdana, verdana, serif}

Why is that? Verdana should be listed in the first one, that's what the browser sees first.

[Sardtok]

The second one is a selector, it does not apply to BODY but all children of BODY or descendants rather cause it applies to grand-children and so on as well.
The star is a wildcard meaning all tags, so the selector:
BODY *
means all tags which are inside the body tag gets these attributes.
for instance:
<body>Not affected
<h1>Affected
<p>
Affected
</p>
Affected
</h1>
Not Affected
</body>
Not affected
See?
Go to http://www.w3.org/TR/REC-CSS2/selector.html
if you need to know more about it ;)

[Palmer]

Sorry, I only code in CSS1. Well regardless of what css you use, over 80% of your visitors are going to see Times New Roman. :)

[Sardtok]

The weird thing is I've tested it in IE6, Opera 7 and Netscape 7.
And it shows up with Verdana in all of them.
And I do know the difference between serif and sans-serif fonts.
I've set the font-family to: Verdana, sans-serif now so if Verdana is not available it'll use Helvetica or Arial or something like that.

Still really really weird that you see Times, because IE 6 has support for css2.
And css1 browser's biggest problem is not the font though, it's the background-position attributes.

Whoops, I'll leave the text above as it is.
I checked out the css1 specs at w3c and it seems selectors and background-position is supported.

[Sardtok]

I think I know what the problem was.
It was probably a DNS problem.
Your ISP's DNS was probably not updated, or maybe my DNS has not been updated however that sounds weird as I've had to update my rsa host keys and ssl certificates when connecting to chickensoft.com using different protocols.

[Palmer]

Well I have the latest version and everything. A brand new Dell as well with Win XP. Here's what I see and trust me I've refreshed and hit F5. I also tested it in the latest version of Opera and netscape 4.7. All Times New Roman. I did run it through the HTML Checker at NetMechanic.com and it passed with flying colors. 5 stars and 0 errors. Very weird indeed.

IE 6
http://www.yourwebbuddy.com/misc/chicken.jpg

Opera 6
http://www.yourwebbuddy.com/misc/chicken2.jpg

Netscape 4.7
http://www.yourwebbuddy.com/misc/chicken3.jpg

[Aaron]

That is weird. I'm seeing Verdana here on O7.

[Palmer]

You're right I'm probably seeing the old site and DNS hasn't propogated to Ohio. We're always behind the times :p

Palmer

[Sardtok]

Yeah, you get the old site.
On the new one I've also added a forum,
but I have yet to add a Chicken Soft theme to the forum.

Hehe,
love the way it looks in MoZilla 4 browsers, NetScape 4.x

[Palmer]

Well glory be, it JUST propogated. Looks awesome :D Glad we figured that out, I was beginning to think I had a browser or computer problem.

[Sardtok]

Thanks for the feedback,
yeah looks a lot better with Verdana.
Glad you like it,
nice to hear, especially coming from you, who's running two design pages, I really like designoutpost and the looks of the new programmingoutpost. ;)

[Palmer]

Yeah, I actually do this for a living :p I just landed a contract to redesign, overhaul the operation, and host BestAutoJobs.com $900 bucks! WooHoo! :D If you're ever bored, stop by SitePoint.com, I'm a Mentor over on those forums. Lots of helpful people there as well.

Glad we solved the mystery,
Palmer

[Steven]

Originally posted by Sardtok
Thanks for the feedback,
yeah looks a lot better with Verdana.
Glad you like it,
nice to hear, especially coming from you, who's running two design pages, I really like designoutpost and the looks of the new programmingoutpost. ;)

Aw, can you feel the love in here between current and new IH clients, I sure can.

:heartbeat

-Steven

[Sardtok]

Well Steven, I guess we might as well just get this love thing over with right now:
And I wiiiiilll looooove you baaabeeaaaah, AAAAALWAAAAYS.
There we go.
And if you wanna join me:
Say it LOUD,
Say it PROUD,
M-Yeah,
I'm hosted by InsiderHosting.com and I'm PROUD. ;)

Ok, I think that should do it. ;) :heartbeat