[Scifience]

My first attempt at using CSS. It is heavily based on someone else's CSS that they made freely available, but I modified it a good bit.

http://s92322499.onlinehome.us/

Any suggestions / good resources for learning more cool CSS stuff? Thanks!

[si_lance]

very nice. I like the xhtml compliance as well.

[holygoat]

Nice, but I am intrigued as to why the title text isn't anti-aliased (at least, in Safari).

[Scifience]

Originally posted by holygoat:
Nice, but I am intrigued as to why the title text isn't anti-aliased (at least, in Safari).

It is an image, not actual text like everything else. I tried to smooth it in Photoshop, but (as you can see) it didn't work too well. I'll try and work on it.

The only reason that it is an image in the first place is because I wanted to use Myriad Pro, a font most people who don't have Macs don't have available to them.

Thanks for the kind words everyone!

[yeabil]

I'm viewing with Safari in 800 x600, The text in the paragraph when it goes into the stream area(right side) becomes hard to read because of the dark back ground of the image. The David Letterman quote is a little hard to read because of the italic font and size. Nice design.

[redJag]

Very cool design. The Letterman quote needs bolded or enlarged, can't read it! I also notice the spilling over of the text into the stream photo. I would suggest you check out sandbagging divs! The border around the whole site could use some smoothing or detail or something, though.

Overall, though, very nicely done.

p.s. when did HTML get turned off? I hate BB Code

[clam2000]

I'd add:
z-index:3;
to the #pageHeader style.

in it's current form part of the enliten is cut of by the trees when my browser is compressed to small.

adding a white background to the main text wouldn't hurt either:
add
#article1 {
background-color: rgba(255,255,255,.65);
}
to your style sheet.
(the .65 controls the alpha, you can ajust it up and down (1-0)).

--will

[redJag]

is that alpha property supported by many browsers? Windows IE, for instance?

[Synotic]

Originally posted by redJag:
is that alpha property supported by many browsers? Windows IE, for instance?

It's only supported in Safari and in Mozilla based browsers it defaults to transparent... so it can be problematic where you want it to default to white or some other colors instead of none at all. In this particular example it would be more of a luxury and really wouldn't destroy the look if the opacity wasn't respected because currently the color already is "transparent". Mozilla has a property itself (something like moz-opacity but not...) and IE has a proprietary filter for transparency. I don't know if there are any examples out there that has them all working in tandem. Safari is the only one that supports it according to the spec though.

[clam2000]

the same effect could be achieved with a semi-transparent png image (There is still a javascript hack to get ti working with IE).

with the hack it will work in almost all browsers
--will

[teknik]

GOd, MS is so backwards with their things. Wouldn't it make sense that one of the worlds largest companies would have support for just about everything?

[redJag]

Originally posted by teknik:
GOd, MS is so backwards with their things. Wouldn't it make sense that one of the worlds largest companies would have support for just about everything?

They will be updating IE with Service Pack 2 for Windows XP. I've got my fingers crossed that they won't just be patching the many, many, many holes. CSS supports? I mean real support..Please please please.

[Synotic]

Originally posted by clam2000:
the same effect could be achieved with a semi-transparent png image (There is still a javascript hack to get ti working with IE).

with the hack it will work in almost all browsers
--will

Good point although that particular example won't work with background images. A List Apart has an article that deals with PNGs in css backgrounds. I kind of glossed over it but the one downside is that in ie5 mac it shows the image completely opaque. And in netscape 4.7 win/mac and opera 5 for mac no image is displayed at all. But for this particular purpose it wouldn't severely affect the design.

Originally posted by teknik:
GOd, MS is so backwards with their things. Wouldn't it make sense that one of the worlds largest companies would have support for just about everything?

I don't see the connection...

[Scifience]

Originally posted by yeabil:
I'm viewing with Safari in 800 x600, The text in the paragraph when it goes into the stream area(right side) becomes hard to read because of the dark back ground of the image. The David Letterman quote is a little hard to read because of the italic font and size. Nice design.

I'm aware of this; the problem is that I designed it on a 1280x1024 monitor, so that is what the image is made to fit. It barely hangs over on 1024x768, and almost nobody uses anything under that anymore (no offense intended). Anyway, it is a problem, but in an ideal world everbody has at least a 17" flat panel, and I like to design for an ideal world.

[Scifience]

Originally posted by redJag:
is that alpha property supported by many browsers? Windows IE, for instance?

No, but there is a work-around in it that still makes it look acceptable. Here's how it looks in IE6 Win at 1024x768.



There is also a background image specified in addition to the alpha transparency, so it looks good either way and still validates.

IE is really a crappy browser, if you notice, the black bars around the edges that show up in Mozilla, Safari, and other *modern* browsers aren't there, either. I'm going to be including a nice, "Download Firebird" link for the Windows users when the site goes live.

Edit: Fixed image, stupid Windows capitalized the JPG at the end of the file name, so my UNIX server wouldn't access the image because it is case-sensitive.

[Scifience]

Originally posted by teknik:
GOd, MS is so backwards with their things. Wouldn't it make sense that one of the worlds largest companies would have support for just about everything?

No, it wouldn't. They're MS, after all, and don't support any of the major standards that other companies do. Their web editing software, FrontPage, makes such messy HTML that a web designer with ten years of experience would have a hard time figuring out what it does. NOTHING FrontPage makes validates. The program doesn't even make an attempt.

[yeabil]

"(no offense intended)." none taken

"...but in an ideal world everbody has at least a 17" flat panel, and I like to design for an ideal world. " Mmmmm....that would be nice

[RGB]

Originally posted by Scifience:
I'm aware of this; the problem is that I designed it on a 1280x1024 monitor, so that is what the image is made to fit. It barely hangs over on 1024x768, and almost nobody uses anything under that anymore (no offense intended). Anyway, it is a problem, but in an ideal world everbody has at least a 17" flat panel, and I like to design for an ideal world.

My boss uses Windows XP Pro / IE 6 on an 800x600 resolution, therefore I have to design for a less than ideal world. The Windows box I have to use at this company is giving me headaches left and right, especially IE. Surprisingly, I really don't know how, but the site actually looks better in IE 6 than in Safari at this point in development. I can't figure it out! Safari just isn't rendering a few items as I anticipated.

[Scifience]

Originally posted by RGB:
My boss uses Windows XP Pro / IE 6 on an 800x600 resolution, therefore I have to design for a less than ideal world. The Windows box I have to use at this company is giving me headaches left and right, especially IE. Surprisingly, I really don't know how, but the site actually looks better in IE 6 than in Safari at this point in development. I can't figure it out! Safari just isn't rendering a few items as I anticipated.

Ouch....that's enough to cramp any web designer's style. I haven't used 800x600 since, hmm, 1999? I feel bad for you, having to design for such archaic stuff.

The reason it may be looking better in IE at this point is that you have ended up using some non-standard (IE Only) tags in your quest to make the site look right for your boss, in which case it isn't valid HTML for all browsers.

That's why I always try to design for a perfect system that supports all the standards first, and then go back and modify it for other browsers. Sometimes I even end up having to make a watered-down IE stylesheet that it uses when IE is detected.

My advice: don't design for IE, design for a compliant browser such as Mozilla or Safari. You can always make a watered-down IE version later, since IE and CSS just don't mix well.

[RGB]

Originally posted by Scifience:
Ouch....that's enough to cramp any web designer's style. I haven't used 800x600 since, hmm, 1999? I feel bad for you, having to design for such archaic stuff.

The reason it may be looking better in IE at this point is that you have ended up using some non-standard (IE Only) tags in your quest to make the site look right for your boss, in which case it isn't valid HTML for all browsers.

That's why I always try to design for a perfect system that supports all the standards first, and then go back and modify it for other browsers. Sometimes I even end up having to make a watered-down IE stylesheet that it uses when IE is detected.

My advice: don't design for IE, design for a compliant browser such as Mozilla or Safari. You can always make a watered-down IE version later, since IE and CSS just don't mix well.

Nope, nothing proprietary. 100% standard. More than likely, it's a result of the trial-and-error I go through frequently. The only browser I have to check while I'm here at work is IE 6, so first and foremost I get the page working in IE 6, then I have to check it later. I don't want to have to bring my laptop in every day in order to check pages, and design for a better browser from the get-go. I'll bring it in at various points throughout the process, make the fixes, then move forward.

[James L]

Scifience,

You are actually a bit off on your browser resolution comment:

"I'm aware of this; the problem is that I designed it on a 1280x1024 monitor, so that is what the image is made to fit. It barely hangs over on 1024x768, and almost nobody uses anything under that anymore (no offense intended). Anyway, it is a problem, but in an ideal world everbody has at least a 17" flat panel, and I like to design for an ideal world. "

According to many site stats, including all of my server stats from sites I maintain, about 40 - 45% of the people viewing the web still use 800 x 600! About the same number is currently using 1024 x 768, and the remain 10% or so is made up of the other resolutions. Only 4% of web users actually use the resolution you designed in.

I wouldn't call just under 1/2 the users of the web "almost nobody"!

..just food for thought.

Here is one link for such stats:

http://www.thecounter.com/stats/2003/May/res.php

[Scifience]

Originally posted by James L:
Scifience,

You are actually a bit off on your browser resolution comment:

"I'm aware of this; the problem is that I designed it on a 1280x1024 monitor, so that is what the image is made to fit. It barely hangs over on 1024x768, and almost nobody uses anything under that anymore (no offense intended). Anyway, it is a problem, but in an ideal world everbody has at least a 17" flat panel, and I like to design for an ideal world. "

According to many site stats, including all of my server stats from sites I maintain, about 40 - 45% of the people viewing the web still use 800 x 600! About the same number is currently using 1024 x 768, and the remain 10% or so is made up of the other resolutions. Only 4% of web users actually use the resolution you designed in.

I wouldn't call just under 1/2 the users of the web "almost nobody"!

..just food for thought.

Here is one link for such stats:

http://www.thecounter.com/stats/2003/May/res.php

Thanks for the link; I never really had any solid details to back that up other than what the people I know use.

At least everybody running a Mac has at least 1024x768

[Chris O'Brien]

The stats are from 8 months ago, so you could hope and pray that something serious happened in the wintel world since then and everyone now has at least 1024x768

[Synotic]

Originally posted by RGB:
Nope, nothing proprietary. 100% standard. More than likely, it's a result of the trial-and-error I go through frequently. The only browser I have to check while I'm here at work is IE 6, so first and foremost I get the page working in IE 6, then I have to check it later. I don't want to have to bring my laptop in every day in order to check pages, and design for a better browser from the get-go. I'll bring it in at various points throughout the process, make the fixes, then move forward.

I didn't see this before, but I do agree with this. Despite what people believe IE 6 and IE 5:mac really are not that bad at rendering CSS. Of course what lots of people do though is completely design in one browser and get annoyed when another browser doesn't correctly render it. It's much better to work in stages and test in various browsers. You'll find errors come up a lot less and it generally makes designing pages a lot better experience (as opposed to finding your site is completely f#!cked up and having to rewrite it)

my advice: don't design for IE, design for a compliant browser such as Mozilla or Safari. You can always make a watered-down IE version later, since IE and CSS just don't mix well.

I disagree with this. Like I said before, IE on both sides may have some bugs, but if you work in stages you'll find that these are often simple things that you can easily get around... Your divs aren't working with display: inline... use float: left and move on. If you design completely in Safari and nothing else, you're asking for trouble. A much better thing to do is design for IE 5:mac (or IE 6 if you have access to it). Then test it in Safari and other so-called "modern" browsers. If you find something wrong in Safari, find exactly what causes it and submit it to hyatt. That way you help the web and your site works beautifully in all browsers

Also, this may sound stupid but whenever I'm bored and want to create a new site design I always use 640x480 as a size... and I don't find it as a limitation, what are you using the extra pixels for anyways? Most sites I frequent don't require me to fullscreen my windows (I'm on a 15" PB). As long as the content and navigation is always visible it's fine I suppose.