14 replies [Last post]
MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

http://beta.samhulick.com/

Validated and examined in a few browsers, looks perfect in Firefox and Safari (on OS X and iPhone), looks close to perfect in IE7, and has just a couple issues in IE6.

Initial problems I would like to fix:

1) The left banner photos don't show up in IE6 for some reason. But the initial news page works fine. I for the life of me cannot figure it out.

2) In IE6 and IE7, the language links in the upper left are missing their bottom borders. And the Japanese (Nippon) kanji doesn't show up properly, it just shows two boxes, whereas in Firefox and IE7 I get the actual kanji (but the title tooltip in IE7 shows boxes).

Also, not so important: looks like the TARGET param of the anchor tag is invalid in XHTML 1.0. How in the world are we supposed to tell the browser to open in a new tab/window then? Those targets are staying put!

I'm mostly interested in feedback on the dark.css file. I used the reset.css as advised, so I had to redefine everything, even basic things like H1 and STRONG. I couldn't figure out how browsers make it so there's a blank line between H1, H2, and other text blocks, but if it's the first H1 on the page, there's no space above it. Doing something like defining h2 and h2:first-child but including margin-top:0 on the h2:first-child works, but not in IE6.

Be tough on my CSS please. I don't wanna pick up any bad habits or misuse properties. I just started diving into this last week. I just converted myself from the whole tables-n-spacers method of designing web sites (yuck).

Thanks for your time.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 27 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Good luck on number 1, i dug

Good luck on number 1, i dug and dug and don't see the issue. I'm sure one of other elites on this board won't have a problem hashing it out though.

Basically, the only reason I am replying is to note the fact that target's are not allowed due to the fact that you are in essence calling your users 'stupid'. You are telling them that they don't know what they should do with the link so you are going to rob them of their freedom of choice and force a new window upon them. You are also breaking their back button. With a new window the back button obviously has no "back" to go to.

Leave the choice up to the user. They if like your site enough, they will come back to it. If they want multiple windows open, they will right click and tell the link to open in a new window.

Other then that, I like your design, simple and easy to use. font sizes seem to be a good size and your page can handle a few size bumps before breaking.

Good job so far and good luck on your future endeavors.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

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

MDesigner wrote:Also, not so

MDesigner wrote:
Also, not so important: looks like the TARGET param of the anchor tag is invalid in XHTML 1.0. How in the world are we supposed to tell the browser to open in a new tab/window then? Those targets are staying put!

You are not supposed to be forcing new windows on the user. It is one of the biggest useability mistakes you can make and you can't actually force my browser to open a new window unless I permit it anyway. Most people have pop up blockers installed these days and for a darned good reason.

But you can leave it in if you really want to drive people away never to return, which is the usual result these days.

Who is this site supposed to be serving? You or the visitor?

Ed Seedhouse

Posting Guidelines

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

MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

Ed Seedhouse wrote:MDesigner

Ed Seedhouse wrote:
MDesigner wrote:
Also, not so important: looks like the TARGET param of the anchor tag is invalid in XHTML 1.0. How in the world are we supposed to tell the browser to open in a new tab/window then? Those targets are staying put!

You are not supposed to be forcing new windows on the user. It is one of the biggest useability mistakes you can make and you can't actually force my browser to open a new window unless I permit it anyway. Most people have pop up blockers installed these days and for a darned good reason.

But you can leave it in if you really want to drive people away never to return, which is the usual result these days.

Who is this site supposed to be serving? You or the visitor?

Thanks for the response, Ed.

Well, popup blockers are built to stop popup windows that do NOT result from a user click. _blank targets are user driven. The purpose here is that if they are clicking links that keep them within my site, it keeps them in that tab/window. If they click a link that leads to an external site, I use target _blank to either:

1) open a new window
or
2) open a new tab

..depending on their browser settings.

I see your point though, and I can see that some people might find it annoying. I think web designers started using it this way to prevent "web surfing ADD," where someone can click a link and get distracted and forget where they came from in the first place. Though that technique is probably better suited to e-commerce stores and the like. One could argue that if they forget your site, then it wasn't captivating enough. Smile

I'll have to give it further consideration. I actually prefer when sites have target _blank, because it neatly opens a new tab for me. Otherwise I'd be holding down 'ctrl' on damn near every link I click on any given site. But I can see that for people who get a new window instead of a tab, it's kind of a pain. Maybe I'll fix it so the _target is gone on all browsers except Safari on the iPhone.

What about the other site issues? Namely, lefthand banner photos not showing up in IE6, and the missing bottom border from the language links in the upper left? And the syntax and usage of my CSS in general. I'd appreciate any input on those as those are more serious issues I think.

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

MDesigner wrote:Well, popup

MDesigner wrote:
Well, popup blockers are built to stop popup windows that do NOT result from a user click.

Nope. They also block windows opened in response to a click. And for a good reason, because it breaks web conventions, by making the back button unworkable.

See for example "web mistake number 9" at http://www.useit.com/alertbox/9605.html

Quote:
_blank targets are user driven.

Nonsense. If people want the link to open a new window they will right-click it. When they left click it they expect the new page to open in the current window, and they know they can get back to your site by clicking the "back" button.

Quote:
The purpose here is that if they are clicking links that keep them within my site, it keeps them in that tab/window.

And what right do you have to make them do that? Especially since, in fact, you can't do that.

Quote:
I see your point though, and I can see that some people might find it annoying.

The evidence is that almost everyone finds it annoying. Why do you want to annoy your visitor?

Quote:
I'll have to give it further consideration. I actually prefer when sites have target _blank

Well you are very unusual. Most people hate it, including me.

Quote:
because it neatly opens a new tab for me.

So a web site can read your mind and know what you want?

Quote:
What about the other site issues? Namely, lefthand banner photos not showing up in IE6, and the missing bottom border from the language links in the upper left? And the syntax and usage of my CSS in general. I'd appreciate any input on those as those are more serious issues I think.

Others can deal with that, though they might be discouraged by your failure to take good advice backed up by lots of evidence in this particular matter. I'm just commenting on your mistaken attitude to opening new windows. The designers of xhtml 1.0 strict removed the _blank target because the research and evidence were so overwhelmingly against it. If you want to you can still use a javascript to do that, and it's more appropriate to do it that way, if you must, because html/xhtml is not supposed to be controlling browser behaviour. That's what javascript is for.

- html/xhml is meant for marking up meaning.
- CSS is for controlling presentation.
- javascript for controlling behaviour.

Ed Seedhouse

Posting Guidelines

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

MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

*sigh* Here we go. Look,

*sigh* Here we go.

Look, the target=_blank was a side issue I was mildly concerned about. The other issues relating to CSS layout are far more important as I have very little experience in that arena. Web design & development I've been doing for ten years. CSS, not so much.

So you'll have to excuse me if I decided to debate target=_blank. That wasn't the focal point of my question.

Seriously, Ed, I'd appreciate it if, assuming you're well-versed in CSS, you'd take a look at the CSS portion and give me some feedback. There won't be any debate or argument over that, because I'm new to it.

Phreestyle
Phreestyle's picture
Offline
Enthusiast
Australia
Last seen: 6 years 1 week ago
Australia
Timezone: GMT+8
Joined: 2007-05-12
Posts: 235
Points: 6

Okay, for what it is worth i

Okay, for what it is worth i have few comments.

Your page is neat and clean and so is your code. In fact I see very little that could be improved. About the only thing you could improve - and it is really a very small thing - is to group elements that have common attributes. For instance,
your h1, h2 and h3 elements use the same font-family and the same font colour, these could be grouped together. Eg,

h1,h2,h3 {font-family: Arial, Helvetica, sans-serif; color: #ffffff;}

You could also use the shortform for hex colours - ie, #ffffff could be written as #fff. A tiny saving in bandwidth.

Other than those very minor points everything looks good to me.

Life's a journey. Enjoy the trip.

MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

Ahh, cool.. thanks Rob!

Ahh, cool.. thanks Rob! I'll definitely look for common things that can be grouped together. It'll help tidy up the CSS code a bit.

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

MDesigner wrote:Seriously,

MDesigner wrote:
Seriously, Ed, I'd appreciate it if, assuming you're well-versed in CSS, you'd take a look at the CSS portion and give me some feedback. There won't be any debate or argument over that, because I'm new to it.

The site is valid xhtml 1.0 strict - that's good (though html 4.01 strict would be better in my opinion, but that's only an opinion). I don't like the color scheme - white on a black background is too hard to read for me. Very brittle and a couple of font-size increases basically break your layout and make it unreadable. After two resizes your content is largely invisible.

I don't like fixed width sites in general as they tend to be brittle and waste screen space on higher resolution screens. Your font size is only marginal for my eyes, especially for white on black, which is why I tried to resize it and then it broke on the second font increase.

Why do people seem to go for black backgrounds so much? How many books have you bought that have white text on black backgrounds? Think there might be a reason for that?

Your pictures are distracting and draw attention from the content, which is presumably important. They are decent pictures but too distracting. They should be smaller and lower in contrast. They take up too much space on the screen and squeeze the actual content. A whole column just for pictures? Ask yourself what the pictures do to help or hinder someone using the site.

At least you're not forcing me to listen to music.

The nav bar is stylish and works quite nicely, so that's a strength.

I won't comment on your CSS except to say that if you want to zero out margins on all those elements a simple "*" would do it more elegantly.

Ed Seedhouse

Posting Guidelines

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

MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

Thanks Ed! I noticed it

Thanks Ed!

I noticed it does break after a couple text size increases.. that really sucks. Any ideas why? It looks like the top navigation is causing it. I'm not sure how to fix that. Actually, here's my plan.. I want to make it so the language selectors, my name/title, and navigation text do NOT change sizes. I think mostly what the user would want to be resizing for is the main content, anyway. And it will stop the layout from breaking.

Quote:
I won't comment on your CSS except to say that if you want to zero out margins on all those elements a simple "*" would do it more elegantly.

Are you referring to the reset.css file? Or something else?

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

MDesigner wrote:Thanks Ed! I

MDesigner wrote:
Thanks Ed! I noticed it does break after a couple text size increases.. that really sucks. Any ideas why?

Basically because of the approach you are using to layout. You may not be using tables for layout but you are still thinking of your page as if it were a table. If you are interested in changing that then start with a visit to the "Truth & Consequences of web site design" site.

Quote:

Quote:
I won't comment on your CSS except to say that if you want to zero out margins on all those elements a simple "*" would do it more elegantly.

Are you referring to the reset.css file? Or something else?

At the start of your "reset.css" file you have this:
@charset "UTF-8";
/* CSS Document */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

All those tags should be replaced with a single "*" selector. It's much clearer that way and at least you know that all the tags will be the same after that. As it is you might have missed one and that might get you confused.

Also that charset rule is better in the header of your html file. Ideally you should be making sure your server is sending utf-8 with the appropriate HTTP Headers (which is not the same as the "head" element in html). Second best is to put it in a meta tag in the HEAD element of your document as you have done. Given that your charset rule in the CSS will have no effect, so take it out.

Ed Seedhouse

Posting Guidelines

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

MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

Thanks for the link, I will

Thanks for the link, I will definitely check that out. It's hard to break the table habit after 10 years. Smile

As for reset.css, I didn't make that. I did some searching on this forum and someone gave a link.. and I found the CSS code someone had given careful thought to.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Maybe there's a reason he chose not to use *, not sure. I could give it a shot.

There's also this:

http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/

I have more reading to do it seems. Smile

Thanks again for the site check.

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

In general I am suspicious

In general I am suspicious of any of the "cut and fit" approaches to web design. The real purpose of a web page is surely to serve content to the user. I never go to a page because it has a great layout, I go to it because it has information (content) I want or need.

If this is so then everything about the page should be designed to make that content easily available. Content should come first, in other words, and the layout and other design elements should compliment that content and make it most usable. Anything that gets in the way of that is simply a distraction.

HTML as it is today is designed solely for marking up the meaning or structure of content, and that's the proper way to use HTML or xhtml. It ideally should say nothing about layout or style, only about the content's meaning. Of course each browser will have it's own default layout for each element.

CSS is used then to compliment the content and make it stylish and useable. Any CSS that gets in the way of that aim is bad CSS, in my opinion. That doesn't mean a page can't look great, but that it should not look great just to look great.

The best layouts are therefore, I suggest, not even noticed. If my eye is functioning well I never see my eye, only the scene in front of me. If I'm seeing my eyes, or hearing my ears, something is wrong with them that needs to be fixed.

In the same way I suggest, if the user is noticing your layout there is something wrong with your layout.
As on the Web it is the user that has the ultimate power, it behooves us to provide the user with a good experience if we want her to come back or to buy something.

The upshot of this is that really you should mark up your content completely before even thinking of layout or style. Then add in layout and style that make that content most useable for the visitor. Anything else is just an expression of the designer's ego and out of place on the web since the visitor doesn't care about the designer's ego needs.

Of course I am speaking of an ideal that can never be fully attained, only approached to a greater or lesser extent.

Ed Seedhouse

Posting Guidelines

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

MDesigner wrote:As for

MDesigner wrote:
As for reset.css, I didn't make that. I did some searching on this forum and someone gave a link.. and I found the CSS code someone had given careful thought to.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Maybe there's a reason he chose not to use *, not sure. I could give it a shot.

* resets everything. Some people don't want to reset everything - they're happy with the borders on form elements, for example.

Verschwindende wrote:
  • CSS doesn't make pies

MDesigner
Offline
Regular
Last seen: 12 years 21 weeks ago
Timezone: GMT-5
Joined: 2007-07-19
Posts: 36
Points: 0

Hmm, still no one has any

Hmm, still no one has any idea why the left photos don't show up in IE6? I might just redo the CSS from scratch with some of the new knowledge I've picked up on this thread.