A few questions and a critique request

[Neredbojias]

With neither quill nor qualm, sagejoshua quothed:

Hehehe. Nice. I'm going to quote that on my business testimonial
page.

Josh

No problem. My wife never reads business material.

 

[sagejoshua]

More likely than a bug is the excessive absolute positioning and all

those px dimensions. There is no need for most of it.

What is unneeded? I was under the impression that for a FIR or
FIR-derivitive you need to specify the exact dimensions of the
containing block. Could you be a little more specific?

A tip for the OP: open your page in the moz/FF DOM inspector and look at
both CSS style rules and computed styles for various elements. You may
find your own answers there.

I've never used it before. It seems really buggy. (Maybe its my CSS).
But something simple, like the 760px wide wrapper, it gets wrong. It
only blinks over the right half of the wrapper. I used negative
margins for centering, maybe that has something to do with it...

And rather than reinvent the wheel, take a look at some already
tried-and-true CSS templates. Even if you don't use one, study the
techniques used. For some examples, see:
<URL:http://css-discuss.incutio.com/>

I will... thanks.

And thanks for all your helpful advice.

Josh

 

[sagejoshua]

Well, it's certainly hard to tell from what I said. I meant that
validation does not guarantee that sites will look acceptable for all
browsers. Older browsers will give poorer results to newer CSS
constructs. Newer browsers can nail your idea or suck badly.

Why can't they all just get it right! Well, I guess that's what makes
it interesting. It can't be TOO easy.


Josh

 

[kchayka]

What is unneeded?

<URL:http://www.snakebirdstudios.com/nojs.php>

Off the top of my head, it is unnecessary to absolutely position either
#wrapper or #footer. Both should be static, or relatively positioned if
need be. If I spent more than a couple minutes looking at it, I'm sure I
could point out all kinds of stuff.

I was under the impression that for a FIR or
FIR-derivitive you need to specify the exact dimensions of the
containing block. Could you be a little more specific?

All image replacement methods are bad, some are just less bad than
others. Did you happen to look at your page with image loading disabled
or listen to it in a screen reader? I suspect not. The method you chose
to use (looks like the original FIR) is one of the more bad variety.
Very inaccessible, indeed.

I'm not sure why you even bother using FIR for subheadings in the
content area. It's not like you're using a fancy font or anything. :-\

I've never used it before. It seems really buggy. (Maybe its my CSS).
But something simple, like the 760px wide wrapper, it gets wrong. It
only blinks over the right half of the wrapper.

If it doesn't blink where you expect, that's usually an indication your
code isn't doing what you thought it would. The code is much more
suspect than the tool.

I used negative margins for centering,

There is no need for this, either. Google for margin:auto.

 

[sagejoshua]

I'm not sure why you even bother using FIR for subheadings in the
content area. It's not like you're using a fancy font or anything. :-\

Well, I guess that's a matter of taste. Doesn't have to be fancy, I
just wanted a particular font. But what about FIR... is it your
opinion that I should just skip it and use an <img> tag (supposing I
want to keep the images)?

I was looking at zeldman's page, and it looks like he sets h1 to

text-indent: -9999px;

and applies a background image to the <a> tag. I've heard of that
before, but I thought it was a little buggy. Also, if there wasn't a
link within the header, would you just apply the background image to
the header itself?

There is no need for this, either. Google for margin:auto.

I'm pretty sure that negative margins are far more cross-browser
compatible (and suprisingly bugless) than auto margins. Netscape 4.x
even renders negative margins correctly.

Thanks for the advice.
Josh

 

[rf]

I'm pretty sure that negative margins are far more cross-browser
compatible (and suprisingly bugless) than auto margins. Netscape 4.x
even renders negative margins correctly.

Using negative margins for centring is a Very Bad Mistake. If the viewport
is less than the width of the centred content then the content disappears
off the left hand of the viewport, never to be seen again. This content is
not accessible *at all*, the horizontal scroll bar will not let you to go
there.

Try it for yourself here:
http://www.snakebirdstudios.com/

Narrow the window to 640 pixels wide (not an uncommon size). Part of your
*navigation*, of all things, disappears.

To centre content use auto margins. For those browsers that do not support
it correctly (IE 5.x and IE6 in quirks mode) then use a suitable hack
(text-align: center;, hidden from other browsers, is one)

 

[sagejoshua]

Using negative margins for centring is a Very Bad Mistake. If the viewport

is less than the width of the centred content then the content disappears
off the left hand of the viewport, never to be seen again. This content is
not accessible *at all*, the horizontal scroll bar will not let you to go
there.

Hmm, you've got a very good point. I got the idea from "The Zen of CSS
design." I guess you can't always trust what you read in books. Thanks
for taking the time to explain.

To centre content use auto margins. For those browsers that do not support
it correctly (IE 5.x and IE6 in quirks mode) then use a suitable hack
(text-align: center;, hidden from other browsers, is one)

How would I hide the text-align from other browsers. I know how to
hide things from IE 5.x and below, but not the other way around.

Thanks again for your help.



Josh

 

[sagejoshua]

Off the top of my head, it is unnecessary to absolutely position either
#wrapper or #footer. Both should be static, or relatively positioned if
need be. If I spent more than a couple minutes looking at it, I'm sure I
could point out all kinds of stuff.

You know, you're absolutely right (har har).

Josh

 

[rf]

Hmm, you've got a very good point. I got the idea from "The Zen of CSS
design." I guess you can't always trust what you read in books.


How would I hide the text-align from other browsers. I know how to
hide things from IE 5.x and below, but not the other way around.

Look into Conditional Comments (supported only by IE, search for it over at
http://microsoft.com ) although in this case you don't really need to hide
it from other browsers since you will need to set text-align: left for your
textual content anyway.

IE (<6 and quirks mode) has a bug where text-align: center not only
centres the actual content (the text) but any child element as well. You
could simply use it on the body element and set every other element
(including your "content container" back to left:

* {text-align: left;}
body {text-align: center: ...}

However, in your case I would question why you need the page to be exactly
this many pixels wide. All your visitors (except those few who have their
browser exactly the same size as yours) will have either a horizontal
scroll bar or wasted space in their viewport. What is wrong with using
width: 100% for your content?

 

[sagejoshua]

Look into Conditional Comments (supported only by IE, search for it over at
http://microsoft.com ) although in this case you don't really need to hide
it from other browsers since you will need to set text-align: left for your
textual content anyway.

I've been meaning to research Conditional Comments, anyway. I'll give
it look. However, I'll probably go with the other option: setting the
body to text-align: center; and everything else to :left;.

However, in your case I would question why you need the page to be exactly
this many pixels wide. All your visitors (except those few who have their
browser exactly the same size as yours) will have either a horizontal
scroll bar or wasted space in their viewport. What is wrong with using
width: 100% for your content?

I like the control of a fixed width layout. I figure the percentage of
people with 800px or wider displays is high enough to go with a 760px
wrapper. Here's what the Web Style guide says:

Graphic "safe area" dimensions for layouts designed for 800 x 600
screens:
Maximum width = 760 pixels
Maximum height = 410 pixels (visible without scrolling)

I hate reading text that flows all the way across the page.
Readability studies show that people read and retain more with shorter
horizontal scan. That, and I can never get graphics to look good in
liquid layouts. So those are my reasons. Although there are some very
elegant 100% width pages out there.

Thanks again for your input and advice.
Josh

 

[kchayka]

I was looking at zeldman's page, and it looks like he sets h1 to

text-indent: -9999px;

If you are truly interested in accessiblity, ignore anything that
Zeldman does. Contrary to his claims, he doesn't get it. This particular
method isn't any better than the other one you tried. Again, look at the
page with image loading disabled and see what happens.

Some alternative methods are shown at
<URL:http://www.mezzoblue.com/tests/revised-image-replacement/>

The Gilder/Levin method seems to be less bad than most, but it does have
some limitations.

Netscape 4.x even renders negative margins correctly.

I hope this doesn't mean you're trying to get NS4 to render the page the
same as the latest Opera or FF? What a huge waste of effort!

 

[sagejoshua]

Some alternative methods are shown at
<URL:http://www.mezzoblue.com/tests/revised-image-replacement/>

The Gilder/Levin method seems to be less bad than most, but it does have
some limitations.

I've checked those out. I just didn't know which one to use. I guess I
don't quite understand the need for FIR... I used it under the
assumption that I was making my pages more accessible. If that's not
the case, then in your opinion, what is the best way to represent a

I hope this doesn't mean you're trying to get NS4 to render the page the
same as the latest Opera or FF? What a huge waste of effort!

I just meant that it seemed to be the most cross-browser compatible
mode of centering. After reading what rf said about using negative
margins, I think I've changed my mind. Before, I just used <div
align="center">, but I know that's pretty bad, too. It seems that his
suggestion of using auto margins and text-align(for IE) is the best
way. Right?

Thanks for all your time and help.

Josh

 

[kchayka]

I guess I
don't quite understand the need for FIR... I used it under the
assumption that I was making my pages more accessible.

It's a myth. Image Replacement is really only beneficial to search
engines. Some IR techniques might work out for screen readers, but at
the expense of those who browse with image loading disabled.

There is no IR technique that works for everyone, so the content still
ends up inaccessible to somebody. The only way around it is to disable
CSS altogether. But I doubt anyone would go to that much trouble. I know
I'd probably just leave the site.

If that's not
the case, then in your opinion, what is the best way to represent a
header with an image? Just put the <img> in the <h> with no text and
an alt tag?

Alt is an attribute, not a "tag".

This really is the most accessible way to deal with it, assuming you use
appropriate alt text. The downside is search engines - some index alt
text only for image links, others not at all.

Plain text is the only thing that is truly accessible to everyone. Drop
the images altogether, if possible.