By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,265 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

positioning

P: n/a
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their position
and anything outside the div is hidden. (overflow:hidden.) the idea (and its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.
Jul 20 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Sat, 24 Jan 2004 16:28:53 -0500, salty_dogs <sa********@hotmail.com>
wrote:
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their
position
and anything outside the div is hidden. (overflow:hidden.) the idea (and
its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.

I'm viewing the site as intended in IE 6 on a PC, and also with Opera.

Oh man oh man... what a mess...

I'm taking into account you're new at this. It's not too late to save you.
Cue the "Accessibility Eye For The Javascript Guy" theme music...

1) You are using an image for text. Now, ok, it's a graphics site, and
there is a lower likelihood that someone with images turned off is going
to have much value with your site. But one big problem is that the text is
awfully small, and in IE you can't resize the image to be larger. So
there's a big readability issue there. Also, when the search spiders come
to your site, what text will they have to catalog your site? Using images
for text is simply A Bad Idea.

2) Images sometimes fail to load. When they do, what have you provided?
With background images, there's nothing. When images are content - as text
is - you really have to provide some sort of meaningful alt text. Which
means you need to put them in the HTML as images. Putting content in a
background is using the background-image property to do something it's not
intended to do, and that is also A Bad Idea.

3) When I click on a link, a new window pops up (which makes a lot of
users run away by itself) and there's no address bar or anything anymore.
Why do you need to do this? I liked my address bar... Seriously, popups
and removing browser features - say it with me - A Bad Idea.

Take a look in comp.infosystems.www.authoring.html for my rant in the
"different pages for different screen resolutions" thread. It's too long
to repost here. Try Google if your server doesn't have it.

I can tell you're a quite good artist. Visually, on IE on a PC, your
design is attractive and displays your work well. But you're getting your
results by working against how many browsers work - browsers which follow
the specifications far more closely than IE on a PC. Would you do your
sketches on wax paper with tempera? Of course not, that would be pushing
against the way the materials of your art are designed to work. That's
essentially why these design errors are negatively affecting your site.

These structures you've sketched - they are built on a foundation, that's
why they are standing and habitable. Sadly, your javascript, which is best
compared to the wallpaper or utilities in the building, has taken
preference over the solid structure of good HTML. If an architect chose to
ignore the basics, the house would come tumbling down - as you're seeing
in other browsers. It comes off like a master electrician tried to build a
house - sure the wiring is sound, but what good is that when the roof
caves in?

As someone else said in the thread I cited, in web page design the user
dictates the size of the canvas. Plus a lot of other parameters - most of
which your design takes for granted will be the same as on your computer.

You need to understand that your problems with the way the page is being
rendered lie at a more basic level than simple positioning.

Hate to break it to you, but in my opinion the design needs to be
re-thought. By focusing so hard on this stylized design effect with so
little real knowledge of HTML and CSS (by the way, I recommend htmldog.com
as a good starting point in learning how this stuff should work), you've
put the cart before the horse. Try to do as much without images as you
can. Use background images only for stuff that isn't content on the page.
Then apply the script to a page that will work across platforms and
browsers.

Maybe I'm wrong, maybe some genius can suggest something that will make it
work. I hope so. In the meantime - is it possible to come up with an
alternate plan that uses no javascript at all?

Be prepared to lose the effect if what you'll get in return is a more
functional page. And it may be possible to make it happen in the way you
like, but that has to be added to a page design that works.

Start with the basics, don't bite off more than you can chew. Simple is
better, less is more.
Jul 20 '05 #2

P: n/a
salty_dogs wrote:

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.


Don't use images for text. Your chosen text size in the graphics is the
size of fly droppings and impossible to read. Using only graphics has
many issues and no benefit.

I can't read the text on your home page, but discovered it was a link
when the mouse accidentally went over it. However, with JavaScript
disabled, nothing happens when I click on it. With JS enabled, all I
get is a pop-up window (yuck!) with (presumably) a menu in the top left
and a big, empty white box on the right. The site is completely
unusable on all counts.

Since you are just learning, please spend some time studying web-related
usability and accessibility issues. Lurk around here and
comp.infosystems.www.authoring.html for a while and you should learn a
lot about these subjects. Also, read a few articles at
<URL:http://www.useit.com/>. I don't always agree with everything
Nielsen says, but he is generally on track.

--
To email a reply, remove (dash)un(dash). Mail sent to the un
address is considered spam and automatically deleted.
Jul 20 '05 #3

P: n/a
Somewhere around 1/24/04 1:28 PM, salty_dogs typed wildly with reckless
abandon:
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their position
and anything outside the div is hidden. (overflow:hidden.) the idea (and its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.


In addition to what the other said, what about this:
http://members.tdn.com/ajhess/momeara.html
It's /about/ the same look and function, but this is resizeable too.
You still need to let the user know there is a link there to click.
Making link text identical to everything else is not very nice.

One of the ways I learn is to help. I threw this together in about 10
minutes, so to you regulars here, whom I respect immensely, can you
critique this for me as well? Is there a better way to do this? Thanks, Aron
Jul 20 '05 #4

P: n/a
In message <bu************@ID-195982.news.uni-berlin.de>, salty_dogs
<sa********@hotmail.com> writes
i have a site that works well in ie6 for the pc. but i've also seen it
(don't have a mac) with ie for mac and safari. both of these browsers
produce different and unwanted results.

the biggest problem is this:

i wanted a particular look for the text, so i used images instead of html
text. instead of using a different image for each state, i use a
'background' image. depending on the link state, they change their position
and anything outside the div is hidden. (overflow:hidden.) the idea (and its
not mine) is that instead of loading a separate image for each state, the
background image is all that is needed, it just changes position and the
part outside the div is hidden.

if anyone cares to look... www.momeara.com comments are welcome. please
consider this if you respond... html/css is new for me and i suspect that
its kind of hackered coding.

You've had some good advice from people looking at your site. But
remember that other people with disabilities of various types may be
*listening* to your site through their browser.

Hence the need to ensure that when using graphics for text (and this is
perfectly OK in the visual medium provided that the text is not as tiny
as you have it) you must remember to ensure that the graphics have
adequate 'alternative text'.

Also remember that people who cannot see that you have opened the next
page in a new window can get confused. So you should always include, on
the link, the words '(will open in a new window') or something similar.

Anyway, visiting your site http://www.momeara.com/ all I hear is:

'click me' in a voice telling me it's a link.

If I do 'click' on the link, then I hear an audio clue to tell me a new
window is opening, followed by:

'This page is empty'

So you see the need to ensure that you provide text alternatives to the
graphics ;-)

However, if I were to go to Aron's page:
http://members.tdn.com/ajhess/momeara.html

I would hear:
-------------------------------------------------------------------------

momeara.com
ma**@momeara.com
401-952-4115
335 Court Street #210
Brooklyn NY, 11231
momeara.com is a pesonal website for michael omeara
copyright 2003 all rights reserved
1024x768 pc-ie6
(sorry, right now I only work on a pc)
-------------------------------------------------------------------------
-

It's spoken in a voice to tell me it's all one big link, but it's much
better because I can now hear the content that you intended me to hear.

It also tells me that the author needs to check the spelling -- and
include some punctuation -- but that's another story ;-)
regards

--
Jake
Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.